前言
總括： 本文采用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">
<span>Test</span>
</div>
如果換做使用javascript描述這個元素呢？最好的方式可以簡單的轉化為json對象，如下：
{
type:"div",
props:{
className:"test",
children:{
type:"span",
props:{
children:"Test"
}
}
}
}
這樣我們就可以在javascript中創建一個Virtual DOM（虛擬DOM）了。當然，這樣是沒法復用的，我們再把它封裝一下：
const Div=>({text}){
return {
type:"div",
props:{
className:"test",
children:{
type:"span",
props:{
children: text,
},
},
},
}
}
接下來再實現這個div就可以直接調用Div('Test')來創建。但上述結構看起來實在讓人不爽，寫起來也很容易寫混，一旦結構復雜了，很容易讓人找不著北，于是JSX語法應運而生。我們用寫HTML的方式寫這段代碼，再經過翻譯器轉換成javascript后交給瀏覽器執行。上述代碼用JSX重寫：
const Div =()=>(
<div className="test">
<span>Test</span>
</div>
);
多么簡單明了！！！具體的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傳給他，所有操作通過回調完成。
| 展示組件 | 容器組件 | |
|---|---|---|
| 作用 | 描述如何展現（骨架、樣式） | 描述如何運行（數據獲取、狀態更新） |
| 直接使用 Redux | 否 | 是 |
| 數據來源 | props | 監聽 Redux state |
| 數據修改 | 從 props 調用回調函數 | 向 Redux 派發 actions |
| 調用方式 | 手動 | 通常由 React Redux 生成 |
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';
const store = createStore(func);
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 = {
type: 'ADD_TODO',
payload: 'Learn Redux'
};
Action創建函數
Action 創建函數 就是生成 action 的方法。“action” 和 “action 創建函數” 這兩個概念很容易混在一起，使用時最好注意區分。
在 Redux 中的 action 創建函數只是簡單的返回一個 action:
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}
這樣做將使 action 創建函數更容易被移植和測試。
3.4 reducer
Action 只是描述了有事情發生了這一事實，并沒有指明應用如何更新 state。而這正是 reducer 要做的事情。也就是郵遞員(action)只負責通知，具體你(組件)如何去做，他不負責，這事情只能是你們村長(reducer)告訴你如何去做才能符合社會主義核心價值觀，如何做才能對建設共產主義社會有利。
專業解釋: Store 收到 Action 以后，必須給出一個新的 State，這樣 View 才會發生變化。這種 State 的計算過程就叫做 Reducer。
Reducer 是一個函數，它接受 Action 和當前 State 作為參數，返回一個新的 State。
const reducer = function (state, action) {
// ...
return new_state;
};
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-redux
當然，我們這個實例里是不需要的，所有需要的依賴已經在package.json里配置好了。
React-Redux 提供connect方法，用于從 UI 組件生成容器組件。connect的意思，就是將這兩種組件連起來。
import { connect } from 'react-redux';
const TodoList = connect()(Memos);
上面代碼中Memos是個UI組件，TodoList就是由 React-Redux 通過connect方法自動生成的容器組件。
而只是純粹的這樣把Memos包裹起來毫無意義，完整的connect方法這樣使用：
import { connect } from 'react-redux'
const TodoList = connect(
mapStateToProps
)(Memos)
上面代碼中，connect方法接受兩個參數：mapStateToProps和mapDispatchToProps。它們定義了 UI 組件的業務邏輯。前者負責輸入邏輯，即將state映射到 UI 組件的參數（props），后者負責輸出邏輯，即將用戶對 UI 組件的操作映射成 Action。
3.7 Provider
這個Provider 其實是一個中間件，它是為了解決讓容器組件拿到King的指令(state對象)而存在的。
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'
let store = createStore(todoApp);
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
上面代碼中，Provider在根組件外面包了一層，這樣一來，App的所有子組件就默認都可以拿到state了。
4.實戰備忘錄
講解之前可以先看一下github上的代碼，你可以clone下來學習，也可以在線給我提issue，歡迎戳這:React全家桶實現簡易備忘錄
4.1目錄結構
.
├── app #開發目錄
| |
| ├──actions #action的文件
| |
| ├──components #展示組件
| |
| ├──containers #容器組件,主頁
| |
| ├──reducers #reducer文件
| |
| |——routes #路由文件，容器組件
| |
| |——static #靜態文件
| |
| ├──stores #store配置文件
| |
| |——main.less #路由樣式
| |
| └──main.js #入口文件
|
├── build #發布目錄
├── node_modules #包文件夾
├── .gitignore
├── .jshintrc
├── webpack.production.config.js #生產環境配置
├── webpack.config.js #webpack配置文件
├── package.json #環境配置
└── README.md #使用說明
接下來，我們只關注app目錄就好了。
4.2入口文件
import React from 'react';
import ReactDOM from 'react-dom';
import {Route, IndexRoute, browserHistory, Router} from 'react-router';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import App from './container/App';
import AllMemosRoute from './routes/AllMemosRoute';
import TodoRoute from './routes/TodoRoute';
import DoingRoute from './routes/DoingRoute';
import DoneRoute from './routes/DoneRoute';
import configureStore from './stores';
import './main.less';
const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={AllMemosRoute}/>
<Route path="/todo" component={TodoRoute}/>
<Route path="/doing" component={DoingRoute}/>
<Route path="/done" component={DoneRoute}/>
</Route>
</Router>
</Provider>,
document.body.appendChild(document.createElement('div')))
這里我們從react-redux中獲取到 Provider 組件，我們把它渲染到應用的最外層。
他需要一個屬性 store ，他把這個 store 放在context里，給Router(connect)用。
4.3 Store
app/store/index.jsx
import { createStore } from 'redux';
import reducer from '../reducers';
export default function configureStore(initialState) {
const store = createStore(reducer, initialState);
if (module.hot) {
// Enable Webpack hot module replacement for reducers
module.hot.accept('../reducers', () => {
const nextReducer = require('../reducers');
store.replaceReducer(nextReducer);
});
}
return store;
}
4.4 Action 創建函數和常量
app/action/index.jsx
'use strict';
/*
* @author Damonare 2016-12-10
* @version 1.0.0
* action 類型
*/
export const Add_Todo = 'Add_Todo';
export const Change_Todo_To_Doing = 'Change_Todo_To_Doing';
export const Change_Doing_To_Done = 'Change_Doing_To_Done';
export const Change_Done_To_Doing = 'Change_Done_To_Doing';
export const Change_Doing_To_Todo = 'Change_Doing_To_Todo';
export const Search='Search';
export const Delete_Todo='Delete_Todo';
/*
* action 創建函數
* @method addTodo添加新事項
* @param {String} text 添加事項的內容
*/
export function addTodo(text) {
return {
type: Add_Todo,
text
}
}
/*
* @method search 查找事項
* @param {String} text 查找事項的內容
*/
export function search(text) {
return {
type: Search,
text
}
}
/*
* @method changeTodoToDoing 狀態由todo轉為doing
* @param {Number} index 需要改變狀態的事項的下標
*/
export function changeTodoToDoing(index) {
return {
type: Change_Todo_To_Doing,
index
}
}
/*
* @method changeDoneToDoing 狀態由done轉為doing
* @param {Number} index 需要改變狀態的事項的下標
*/
export function changeDoneToDoing(index) {
return {
type: Change_Done_To_Doing,
index
}
}
/*
* @method changeDoingToTodo 狀態由doing轉為todo
* @param {Number} index 需要改變狀態的事項的下標
*/
export function changeDoingToTodo(index) {
return {
type: Change_Doing_To_Todo,
index
}
}
/*
* @method changeDoingToDone 狀態由doing轉為done
* @param {Number} index 需要改變狀態的事項的下標
*/
export function changeDoingToDone(index) {
return {
type: Change_Doing_To_Done,
index
}
}
/*
* @method deleteTodo 刪除事項
* @param {Number} index 需要刪除的事項的下標
*/
export function deleteTodo(index) {
return {
type: Delete_Todo,
index
}
}
在聲明每一個返回 action 函數的時候，我們需要在頭部聲明這個 action 的 type，以便好組織管理。
每個函數都會返回一個 action 對象，所以在 容器組件里面調用
text =>
dispatch(addTodo(text))
就是調用dispatch(action) 。
4.5 Reducers
app/reducers/index.jsx
import { combineReducers } from 'redux';
import todolist from './todos';
// import visibilityFilter from './visibilityFilter';
const reducer = combineReducers({
todolist
});
export default reducer;
app/reducers/todos.jsx
import {
Add_Todo,
Delete_Todo,
Change_Todo_To_Doing,
Change_Doing_To_Done,
Change_Doing_To_Todo,
Change_Done_To_Doing,
Search
} from '../actions';
let todos;
(function() {
if (localStorage.todos) {
todos = JSON.parse(localStorage.todos)
} else {
todos = []
}
})();
function todolist(state = todos, action) {
switch (action.type) {
/*
* 添加新的事項
* 并進行本地化存儲
* 使用ES6展開運算符鏈接新事項和舊事項
* JSON.stringify進行對象深拷貝
*/
case Add_Todo:
localStorage.setItem('todos', JSON.stringify([
...state, {
todo: action.text,
istodo: true,
doing: false,
done: false
}
]));
return [
...state, {
todo: action.text,
istodo: true,
doing: false,
done: false
}
];
/*
* 將todo轉為doing狀態，注意action.index的類型轉換
*/
case Change_Todo_To_Doing:
localStorage.setItem('todos', JSON.stringify([
...state.slice(0, action.index),
{
todo:state[action.index].todo,
istodo: false,
doing: true,
done: false
},
...state.slice(parseInt(action.index) + 1)
]));
return [
...state.slice(0, action.index),
{
todo:state[action.index].todo,
istodo: false,
doing: true,
done: false
},
...state.slice(parseInt(action.index) + 1)
];
/*
* 將doing轉為done狀態
*/
case Change_Doing_To_Done:
localStorage.setItem('todos', JSON.stringify([
...state.slice(0, action.index),
{
todo:state[action.index].todo,
istodo: false,
doing: false,
done: true
},
...state.slice(parseInt(action.index) + 1)
]));
return [
...state.slice(0, action.index),
{
todo:state[action.index].todo,
istodo: false,
doing: false,
done: true
},
...state.slice(parseInt(action.index) + 1)
];
/*
* 將done轉為doing狀態
*/
case Change_Done_To_Doing:
localStorage.setItem('todos', JSON.stringify([
...state.slice(0, action.index),
{
todo:state[action.index].todo,
istodo: false,
doing: true,
done: false
},
...state.slice(parseInt(action.index) + 1)
]));
return [
...state.slice(0, action.index),
{
todo:state[action.index].todo,
istodo: false,
doing: true,
done: false
},
...state.slice(parseInt(action.index) + 1)
];
/*
* 將doing轉為todo狀態
*/
case Change_Doing_To_Todo:
localStorage.setItem('todos', JSON.stringify([
...state.slice(0, action.index),
{
todo:state[action.index].todo,
istodo: true,
doing: false,
done: false
},
...state.slice(parseInt(action.index) + 1)
]));
return [
...state.slice(0, action.index),
{
todo:state[action.index].todo,
istodo: true,
doing: false,
done: false
},
...state.slice(parseInt(action.index) + 1)
];
/*
* 刪除某個事項
*/
case Delete_Todo:
localStorage.setItem('todos', JSON.stringify([
...state.slice(0, action.index),
...state.slice(parseInt(action.index) + 1)
]));
return [
...state.slice(0, action.index),
...state.slice(parseInt(action.index) + 1)
];
/*
* 搜索
*/
case Search:
let text=action.text;
let reg=eval("/"+text+"/gi");
return state.filter(item=> item.todo.match(reg));
default:
return state;
}
}
export default todolist;
具體的展示組件這里就不羅列代碼了，感興趣的可以戳這：備忘錄展示組件地址
后記
嚴格來說，這個備忘錄并不是使用的react全家桶，畢竟還有一部分less代碼，不過這一個應用也算是比較全面的使用了react+react-router+redux，作為react全家桶技術學習的練手的小項目再適合不過了。如果您對這個小東西感興趣，歡迎戳這:React全家桶實現簡易備忘錄給個star。
