標籤：

React全家桶實現一個簡易備忘錄

01-29

前言

總括： 本文採用react+redux+react-router+less+es6+webpack,以實現一個簡易備忘錄(todolist)為例儘可能全面的講述使用react全家桶實現一個完整應用的過程。

  • 代碼地址：React全家桶實現一個簡易備忘錄

  • 原文博客地址：React全家桶實現一個簡易備忘錄

  • 知乎專欄&&簡書專題：前端進擊者（知乎）&&前端進擊者（簡書）

  • 博主博客地址：Damonare的個人博客

人生不失意，焉能暴己知。

技術說明

技術架構：本備忘錄使用react+react-router+redux+less+ES6+webpack實現;

頁面UI參照：TodoList官網實現;

在線演示地址：Damonare的備忘錄;

功能說明

  • 支持回車添加新事項;
  • 支持刪除事項(點擊X符號);
  • 支持狀態轉換具體包括：
    • 新建事項->正在進行(點擊checkbox選項)
    • 正在進行->已完成(點擊文字內容本身)
    • 正在進行->新建事項(點擊checkbox選項)
    • 已完成->正在進行(點擊文字本身)
  • 支持判斷輸入空字元，過長字元(20個漢字以內);
  • 支持搜索;
  • 支持本地化存儲;
  • 支持狀態的展開隱藏(點擊標題)
  • 兼容手機端(iPhone6及以上)
  • 支持路由切換

正文

1. React淺談

1.1 組件化

毫無疑問，當談到React的時候不能避免的會提到組件化思想。React剛開始想解決的問題只是UI這一層面的問題，也就是MVC中view層面的問題，不成想如今越滾越大，從最早的UI引擎變成了一整套前後端通吃的 Web App 解決方案。對於React組件的理解同樣要站在view層面的角度出發，一個完整的頁面是由大大小小的組件堆疊而成，就好像搭積木，每一塊積木都是一個組件，組件套組件組成了用戶所能看到的完整的頁面。

1.2 JSX語法糖

使用React，不一定非要使用JSX語法，可以使用原生的JS進行開發。但是React作者強烈建議我們使用JSX，因為JSX在定義類似HTML這種樹形結構時，十分的簡單明了。這裡簡單的講下JSX的由來。

比如，下面一個div元素，我們用HTML語法描述為：

<div class="test">n <span>Test</span>n</div>n

如果換做使用javascript描述這個元素呢？最好的方式可以簡單的轉化為json對象，如下：

{n type:"div",n props:{n className:"test",n children:{n type:"span",n props:{n children:"Test"n }n }n }n}n

這樣我們就可以在javascript中創建一個Virtual DOM（虛擬DOM）了。當然，這樣是沒法復用的，我們再把它封裝一下：

const Div=>({text}){n return {n type:"div",n props:{n className:"test",n children:{n type:"span",n props:{n children: text,n },n },n },n }n}n

接下來再實現這個div就可以直接調用Div(『Test』)來創建。但上述結構看起來實在讓人不爽，寫起來也很容易寫混，一旦結構複雜了，很容易讓人找不著北，於是JSX語法應運而生。我們用寫HTML的方式寫這段代碼，再經過翻譯器轉換成javascript後交給瀏覽器執行。上述代碼用JSX重寫：

const Div =()=>(n<div className="test">n <span>Test</span>n</div>n);n

多麼簡單明了！！！具體的JSX語法不多說了，學習更多戳這：JSX in Depth

1.3 Virtual DOM

其實上面已經提到了Virtual DOM，它的存在也是React長久不衰的原因之一，虛擬DOM的概念並不是FB首創卻在FB的手上大火了起來(後台是多麼重要)。

我們知道真實的頁面對應了一個DOM樹，在傳統頁面的開發模式中，每次需要更新頁面時，都需要對DOM進行更新，DOM操作十分昂貴，為減少對於真實DOM的操作，誕生了Virtual DOM的概念，也就是用javascript把真實的DOM樹描述了一遍，使用的也就是我們剛剛說過的JSX語法。對比如下：

每次數據更新之後，重新計算Virtual DOM，並和上一次的Virtual DOM對比，對發生的變化進行批量更新。React也提供了shouldComponentUpdate生命周期回調，來減少數據變化後不必要的Virtual DOM對比過程，提升了性能。

Virtual DOM雖然渲染方式比傳統的DOM操作要好一些，但並不明顯，因為對比DOM節點也是需要計算的，最大的好處在於可以很方便的和其它平台集成，比如react-native就是基於Virtual DOM渲染出原生控制項。具體渲染出的是Web DOM還是Android控制項或是iOS控制項就由平台決定了。所以我們說react的出現是一場革命，一次對於native app的宣戰,就像react-native那句口號——Learn Once,Write Anywhere.

1.4 函數式編程

過去編程方式主要是以命令式編程為主，什麼意思呢？簡單說電腦的思維方式和我們人類的思考方式是不一樣的。我們人類的大腦擅長的是分析問題，提出一個解決問題的方案，電腦則是生硬的執行指令，命令式編程就像是給電腦下達命令，讓電腦去執行一樣，現在主要的編程語言（比如：Java，C，C++等）都是由命令式編程構建起來的。

而函數式編程就不一樣了，這是模仿我們人類的思維方式發明出來的。例如：操作某個數組的每一個元素然後返回一個新數組，如果是計算機的思考方式，會這樣想：創建一個新數組=>遍歷舊數組=>給新數組賦值。如果是人類的思考方式，會這樣想：創建一個數組方法，作用在舊數組上，返回新數組。這樣此方法可以被重複利用。而這就是函數式編程了。

1.5 數據流

在React中，數據的流動是單向的，即從父節點傳遞到子節點。也因此組件是簡單的，他們只需要從父組件獲取props渲染即可。如果頂層的props改變了，React會遞歸的向下遍歷整個組件樹，重新渲染所有使用這個屬性的組件。那麼父組件如何獲取子組件數據呢？很簡單，通過回調就可以了，父組件定義某個方法供給子組件調用，子組件調用方法傳遞給父組件數據，Over。

2. React-router

這東西我覺得沒啥難度，官方例子都很不錯，跟著官方例子來一遍基本就明白到底是個啥玩意了，官方例子：react-router-tutorial。

完事以後可以再看一下阮一峰老師的教程，主要是對一些API的講解：React Router 使用教程。

還有啥不明白的歡迎評論留言共同探討。

3. Redux

3.1 簡介

隨著 JavaScript 單頁應用開發日趨複雜，JavaScript 需要管理比任何時候都要多的 state （狀態）。 這些 state 可能包括伺服器響應、緩存數據、本地生成尚未持久化到伺服器的數據，也包括 UI 狀態，如激活的路由，被選中的標籤，是否顯示載入動效或者分頁器等等。如果一個 model 的變化會引起另一個 model 變化，那麼當 view 變化時，就可能引起對應 model 以及另一個 model 的變化，依次地，可能會引起另一個 view 的變化。亂！

這時候Redux就強勢登場了，現在你可以把React的model看作是一個個的子民，每一個子民都有自己的一個狀態，紛紛擾擾，各自維護著自己狀態，我行我素，那哪行啊！太亂了，我們需要一個King來領導大家，我們就可以把Redux看作是這個King。網羅所有的組件組成一個國家，掌控著一切子民的狀態！防止有人叛亂生事！

這個時候就把組件分成了兩種：容器組件(King或是路由)和展示組件(子民)。

  • 容器組件：即redux或是router,起到了維護狀態，出發action的作用，其實就是King高高在上下達指令。
  • 展示組件：不維護狀態，所有的狀態由容器組件通過props傳給他，所有操作通過回調完成。

n展示組件n容器組件n作用n描述如何展現（骨架、樣式）n描述如何運行（數據獲取、狀態更新）n直接使用 Reduxn否n是n數據來源npropsn監聽 Redux staten數據修改n從 props 調用回調函數n向 Redux 派發 actionsn調用方式n手動n通常由 React Redux 生成n

Redux三大部分：store,action,reducer。相當於King的直系下屬。

那麼也可以看出Redux只是一個狀態管理方案，完全可以單獨拿出來使用，這個King不僅僅可以是React的，去Angular，Ember那裡也是可以做King的。在React中維繫King和組件關係的庫叫做react-redux。

， 它主要有提供兩個東西：Provider 和connect，具體使用文後說明。

提供幾個Redux的學習地址：官方教程-中文版，Redux 入門教程（一）：基本用法

3.2 Store

Store 就是保存數據的地方，它實際上是一個Object tree。整個應用只能有一個 Store。這個Store可以看做是King的首相，掌控一切子民(組件)的活動(state)。

Redux 提供createStore這個函數，用來生成 Store。

import { createStore } from redux;nconst store = createStore(func);n

createStore接受一個函數作為參數，返回一個Store對象(首相誕生記)

我們來看一下Store(首相)的職責：

  • 維持應用的 state；
  • 提供 getState() 方法獲取 state；
  • 提供 dispatch(action) 方法更新 state；
  • 通過 subscribe(listener) 註冊監聽器;
  • 通過 subscribe(listener) 返回的函數註銷監聽器。

3.3 action

State 的變化，會導致 View 的變化。但是，用戶接觸不到 State，只能接觸到 View。所以，State 的變化必須是 View 導致的。Action 就是 View 發出的通知，表示 State 應該要發生變化了。即store的數據變化來自於用戶操作。action就是一個通知，它可以看作是首相下面的郵遞員，通知子民(組件)改變狀態。它是 store 數據的唯一來源。一般來說會通過 store.dispatch() 將 action 傳到 store。

Action 是一個對象。其中的type屬性是必須的，表示 Action 的名稱。

const action = {n type: ADD_TODO,n payload: Learn Reduxn};n

Action創建函數

Action 創建函數 就是生成 action 的方法。「action」 和 「action 創建函數」 這兩個概念很容易混在一起，使用時最好注意區分。

在 Redux 中的 action 創建函數只是簡單的返回一個 action:

function addTodo(text) {n return {n type: ADD_TODO,n textn }n}n

這樣做將使 action 創建函數更容易被移植和測試。

3.4 reducer

Action 只是描述了有事情發生了這一事實，並沒有指明應用如何更新 state。而這正是 reducer 要做的事情。也就是郵遞員(action)只負責通知，具體你(組件)如何去做，他不負責，這事情只能是你們村長(reducer)告訴你如何去做才能符合社會主義核心價值觀，如何做才能對建設共產主義社會有利。

專業解釋: Store 收到 Action 以後，必須給出一個新的 State，這樣 View 才會發生變化。這種 State 的計算過程就叫做 Reducer。

Reducer 是一個函數，它接受 Action 和當前 State 作為參數，返回一個新的 State。

const reducer = function (state, action) {n // ...n return new_state;n};n

3.5 數據流

嚴格的單向數據流是 Redux 架構的設計核心。

Redux 應用中數據的生命周期遵循下面 4 個步驟：

  • 調用store.dispatch(action)。
  • Redux store 調用傳入的 reducer 函數。
  • 根 reducer 應該把多個子 reducer 輸出合併成一個單一的 state 樹。
  • Redux store 保存了根 reducer 返回的完整 state 樹。

工作流程圖如下：

3.6 Connect

這裡需要再強調一下：Redux 和 React 之間沒有關係。Redux 支持 React、Angular、Ember、jQuery 甚至純 JavaScript。

儘管如此，Redux 還是和 React 和 Deku 這類框架搭配起來用最好，因為這類框架允許你以 state 函數的形式來描述界面，Redux 通過 action 的形式來發起 state 變化。

Redux 默認並不包含 React 綁定庫，需要單獨安裝。

npm install --save react-reduxn

當然，我們這個實例里是不需要的，所有需要的依賴已經在package.json里配置好了。

React-Redux 提供connect方法，用於從 UI 組件生成容器組件。connect的意思，就是將這兩種組件連起來。

import { connect } from react-redux;nconst TodoList = connect()(Memos);n

上面代碼中Memos是個UI組件，TodoList就是由 React-Redux 通過connect方法自動生成的容器組件。

而只是純粹的這樣把Memos包裹起來毫無意義，完整的connect方法這樣使用：

import { connect } from react-reduxnconst TodoList = connect(n mapStateToPropsn)(Memos)n

上面代碼中，connect方法接受兩個參數：mapStateToProps和mapDispatchToProps。它們定義了 UI 組件的業務邏輯。前者負責輸入邏輯，即將state映射到 UI 組件的參數（props），後者負責輸出邏輯，即將用戶對 UI 組件的操作映射成 Action。

3.7 Provider

這個Provider 其實是一個中間件，它是為了解決讓容器組件拿到King的指令(state對象)而存在的。

import { Provider } from react-reduxnimport { createStore } from reduxnimport todoApp from ./reducersnimport App from ./components/Appnlet store = createStore(todoApp);nrender(n <Provider store={store}>n <App />n </Provider>,n document.getElementById(root)n)n

上面代碼中，Provider在根組件外麵包了一層，這樣一來，App的所有子組件就默認都可以拿到state了。

4.實戰備忘錄

講解之前可以先看一下github上的代碼，你可以clone下來學習，也可以在線給我提issue，歡迎戳這:React全家桶實現簡易備忘錄

4.1目錄結構

.n├── app #開發目錄n| | n| ├──actions #action的文件n| | n| ├──components #展示組件n| | n| ├──containers #容器組件,主頁n| | n| ├──reducers #reducer文件n| |n| |——routes #路由文件，容器組件n| |n| |——static #靜態文件n| |n| ├──stores #store配置文件n| |n| |——main.less #路由樣式n| |n| └──main.js #入口文件n| n├── build #發布目錄n├── node_modules #包文件夾n├── .gitignore n├── .jshintrc n├── webpack.production.config.js #生產環境配置 n├── webpack.config.js #webpack配置文件n├── package.json #環境配置n└── README.md #使用說明n

接下來，我們只關注app目錄就好了。

4.2入口文件

import React from react;nimport ReactDOM from react-dom;nimport {Route, IndexRoute, browserHistory, Router} from react-router;nimport {createStore} from redux;nimport {Provider} from react-redux;nimport App from ./container/App;nimport AllMemosRoute from ./routes/AllMemosRoute;nimport TodoRoute from ./routes/TodoRoute;nimport DoingRoute from ./routes/DoingRoute;nimport DoneRoute from ./routes/DoneRoute;nimport configureStore from ./stores;nimport ./main.less;nconst store = configureStore();nReactDOM.render(n <Provider store={store}>n <Router history={browserHistory}>n <Route path="/" component={App}>n <IndexRoute component={AllMemosRoute}/>n <Route path="/todo" component={TodoRoute}/>n <Route path="/doing" component={DoingRoute}/>n <Route path="/done" component={DoneRoute}/>n </Route>n </Router>n </Provider>,n document.body.appendChild(document.createElement(div)))n

這裡我們從react-redux中獲取到 Provider 組件，我們把它渲染到應用的最外層。

他需要一個屬性 store ，他把這個 store 放在context里，給Router(connect)用。

4.3 Store

app/store/index.jsx

import { createStore } from redux;nimport reducer from ../reducers;nexport default function configureStore(initialState) {n const store = createStore(reducer, initialState);n if (module.hot) {n // Enable Webpack hot module replacement for reducersn module.hot.accept(../reducers, () => {n const nextReducer = require(../reducers);n store.replaceReducer(nextReducer);n });n }n return store;n}n

4.4 Action 創建函數和常量

app/action/index.jsx

use strict;n/*n * @author Damonare 2016-12-10n * @version 1.0.0n * action 類型n */nexport const Add_Todo = Add_Todo;nexport const Change_Todo_To_Doing = Change_Todo_To_Doing;nexport const Change_Doing_To_Done = Change_Doing_To_Done;nexport const Change_Done_To_Doing = Change_Done_To_Doing;nexport const Change_Doing_To_Todo = Change_Doing_To_Todo;nexport const Search=Search;nexport const Delete_Todo=Delete_Todo;n/*n * action 創建函數n * @method addTodo添加新事項n * @param {String} text 添加事項的內容n */nexport function addTodo(text) {n return {n type: Add_Todo,n textn }n}n/*n * @method search 查找事項n * @param {String} text 查找事項的內容n */nexport function search(text) {n return {n type: Search,n textn }n}n/*n * @method changeTodoToDoing 狀態由todo轉為doingn * @param {Number} index 需要改變狀態的事項的下標n */nexport function changeTodoToDoing(index) {n return {n type: Change_Todo_To_Doing,n indexn }n}n/*n * @method changeDoneToDoing 狀態由done轉為doingn * @param {Number} index 需要改變狀態的事項的下標n */nexport function changeDoneToDoing(index) {n return {n type: Change_Done_To_Doing,n indexn }n}n/*n * @method changeDoingToTodo 狀態由doing轉為todon * @param {Number} index 需要改變狀態的事項的下標n */nexport function changeDoingToTodo(index) {n return {n type: Change_Doing_To_Todo,n indexn }n}n/*n * @method changeDoingToDone 狀態由doing轉為donen * @param {Number} index 需要改變狀態的事項的下標n */nexport function changeDoingToDone(index) {n return {n type: Change_Doing_To_Done,n indexn }n}n/*n * @method deleteTodo 刪除事項n * @param {Number} index 需要刪除的事項的下標n */nexport function deleteTodo(index) {n return {n type: Delete_Todo,n indexn }n}n

在聲明每一個返回 action 函數的時候，我們需要在頭部聲明這個 action 的 type，以便好組織管理。

每個函數都會返回一個 action 對象，所以在 容器組件裡面調用

text =>n dispatch(addTodo(text))n

就是調用dispatch(action) 。

4.5 Reducers

app/reducers/index.jsx

import { combineReducers } from redux;nimport todolist from ./todos;n// import visibilityFilter from ./visibilityFilter;nnconst reducer = combineReducers({n todolistn});nnexport default reducer;n

app/reducers/todos.jsx

import {n Add_Todo,n Delete_Todo,n Change_Todo_To_Doing,n Change_Doing_To_Done,n Change_Doing_To_Todo,n Change_Done_To_Doing,n Searchn} from ../actions;nlet todos;n(function() {n if (localStorage.todos) {n todos = JSON.parse(localStorage.todos)n } else {n todos = []n }n})();nfunction todolist(state = todos, action) {n switch (action.type) {n /*n * 添加新的事項n * 並進行本地化存儲n * 使用ES6展開運算符鏈接新事項和舊事項n * JSON.stringify進行對象深拷貝n */n case Add_Todo:n localStorage.setItem(todos, JSON.stringify([n ...state, {n todo: action.text,n istodo: true,n doing: false,n done: falsen }n ]));n return [n ...state, {n todo: action.text,n istodo: true,n doing: false,n done: falsen }n ];n /*n * 將todo轉為doing狀態，注意action.index的類型轉換n */n case Change_Todo_To_Doing:n localStorage.setItem(todos, JSON.stringify([n ...state.slice(0, action.index),n {n todo:state[action.index].todo,n istodo: false,n doing: true,n done: falsen },n ...state.slice(parseInt(action.index) + 1)n ]));n return [n ...state.slice(0, action.index),n {n todo:state[action.index].todo,n istodo: false,n doing: true,n done: falsen },n ...state.slice(parseInt(action.index) + 1)n ];n /*n * 將doing轉為done狀態n */n case Change_Doing_To_Done:n localStorage.setItem(todos, JSON.stringify([n ...state.slice(0, action.index),n {n todo:state[action.index].todo,n istodo: false,n doing: false,n done: truen },n ...state.slice(parseInt(action.index) + 1)n ]));n return [n ...state.slice(0, action.index),n {n todo:state[action.index].todo,n istodo: false,n doing: false,n done: truen },n ...state.slice(parseInt(action.index) + 1)n ];n /*n * 將done轉為doing狀態n */n case Change_Done_To_Doing:n localStorage.setItem(todos, JSON.stringify([n ...state.slice(0, action.index),n {n todo:state[action.index].todo,n istodo: false,n doing: true,n done: falsen },n ...state.slice(parseInt(action.index) + 1)n ]));n return [n ...state.slice(0, action.index),n {n todo:state[action.index].todo,n istodo: false,n doing: true,n done: falsen },n ...state.slice(parseInt(action.index) + 1)n ];n /*n * 將doing轉為todo狀態n */n case Change_Doing_To_Todo:n localStorage.setItem(todos, JSON.stringify([n ...state.slice(0, action.index),n {n todo:state[action.index].todo,n istodo: true,n doing: false,n done: falsen },n ...state.slice(parseInt(action.index) + 1)n ]));n return [n ...state.slice(0, action.index),n {n todo:state[action.index].todo,n istodo: true,n doing: false,n done: falsen },n ...state.slice(parseInt(action.index) + 1)n ];n /*n * 刪除某個事項n */n case Delete_Todo:n localStorage.setItem(todos, JSON.stringify([n ...state.slice(0, action.index),n ...state.slice(parseInt(action.index) + 1)n ]));n return [n ...state.slice(0, action.index),n ...state.slice(parseInt(action.index) + 1)n ];n /*n * 搜索n */n case Search:n let text=action.text;n let reg=eval("/"+text+"/gi");n return state.filter(item=> item.todo.match(reg));n default:n return state;n }n}nexport default todolist;n

具體的展示組件這裡就不羅列代碼了，感興趣的可以戳這：備忘錄展示組件地址

後記

嚴格來說，這個備忘錄並不是使用的react全家桶，畢竟還有一部分less代碼，不過這一個應用也算是比較全面的使用了react+react-router+redux，作為react全家桶技術學習的練手的小項目再適合不過了。如果您對這個小東西感興趣，歡迎戳這:React全家桶實現簡易備忘錄給個star。

推薦閱讀：

※The Redux Journey 翻譯及分析（上）
※React異常處理
※Learn CSS Animations: From A Designer's Perspective
※#研發解決方案#共享能力的數屏
※創建 React 動畫的五種方式

TAG:React | Redux | 前端开发 |