摘要：主要用于構(gòu)建，被認(rèn)為是中的視圖。高效通過對(duì)的模擬，最大限度地減少與的交互。也就是說，用戶負(fù)責(zé)視覺層，狀態(tài)管理則是全部交給它。該回調(diào)函數(shù)必須返回一個(gè)純對(duì)象，這個(gè)對(duì)象會(huì)與組件的合并。

React 是一個(gè)用于構(gòu)建用戶界面的 JAVASCRIPT 庫(kù)。
React主要用于構(gòu)建UI，React 被認(rèn)為是 MVC 中的 V（視圖）。

聲明式設(shè)計(jì) ?React采用聲明范式，可以輕松描述應(yīng)用。

高效 ?React通過對(duì)DOM的模擬，最大限度地減少與DOM的交互。

靈活 ?React可以與已知的庫(kù)或框架很好地配合。

JSX ? JSX 是 JavaScript 語(yǔ)法的擴(kuò)展

組件 ? 通過 React 構(gòu)建組件，使得代碼更加容易得到復(fù)用，能夠很好的應(yīng)用在大項(xiàng)目的開發(fā)中。

單向響應(yīng)的數(shù)據(jù)流 ? React 實(shí)現(xiàn)了單向響應(yīng)的數(shù)據(jù)流，從而減少了重復(fù)代碼，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡(jiǎn)單。

React 只是 DOM 的一個(gè)抽象層，并不是 Web 應(yīng)用的完整解決方案。有兩個(gè)方面，react沒有涉及：

代碼結(jié)構(gòu)

組件之間的通信

React 能夠根據(jù) state 的變化來(lái)更新 view，setState 方法用于改變組件當(dāng)前的 state，所以可以把更改 state 的邏輯寫在各自的組件里，但這樣做的問題在于，當(dāng)項(xiàng)目邏輯變得越來(lái)越復(fù)雜的時(shí)候，將很難理清 state 跟 view 之間的對(duì)應(yīng)關(guān)系（一個(gè) state 的變化可能引起多個(gè) view 的變化，一個(gè) view 上面觸發(fā)的事件可能引起多個(gè) state 的改變）。我們需要對(duì)所有引起 state 變化的情況進(jìn)行統(tǒng)一管理，這種情況下，就可能需要用到redux了。

簡(jiǎn)單說，React的核心是使用組件定義界面的表現(xiàn)，那么在使用React的時(shí)候我們通常還需要一套機(jī)制去管理組件與組件之間，組件與數(shù)據(jù)模型之間的通信。

Store
作用：保存數(shù)據(jù)的地方，用于管理整個(gè)應(yīng)用的數(shù)據(jù)。它實(shí)際上是一個(gè) Object tree ，整個(gè)應(yīng)用只能有一個(gè) Store。

產(chǎn)生：傳入 reducer 和可選的初始 state 值，通過 createStore 方法生成

const store = createStore(reducer,initialState)

Action
作用：描述用戶的行為，也就是 View 發(fā)出的通知，被 store 接收
產(chǎn)生：通過 action creator 產(chǎn)生

const ADD_TODO = "添加 TODO";
function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}
const action = addTodo("Learn Redux")

Reducer
作用：根據(jù) action，計(jì)算出新的 state，是一個(gè)純函數(shù)
產(chǎn)生：傳入 state 和 action 參數(shù)，返回一個(gè)新的 state

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

reducer 可以進(jìn)行拆分，每個(gè)子 reducer 分別負(fù)責(zé)計(jì)算 view 上面的特定組件，返回局部的 state，再通過 combineReducers 將 reducer 進(jìn)行合并，就可以合并得到完整的state，刷新視圖。

const chatReducer = combineReducers({
  chatLog,
  statusMessage,
  userName
})

Redux應(yīng)用數(shù)據(jù)的生命周期遵循下面4個(gè)步驟：
1）調(diào)用store.dispatch(action), 可以在任何地方進(jìn)行;
2）Redux store調(diào)用傳入的reducer函數(shù)，并且將當(dāng)前的state樹與action傳入。
3）根reducer將多個(gè)子reducer輸出合并成一個(gè)單一的state樹;
4）Redux store保存了根reducer返回的完整的state樹。
5）新的state樹就是應(yīng)用的下一個(gè)狀態(tài)，現(xiàn)在就可以根據(jù)新的state tree來(lái)渲染UI。

Flux 是一種架構(gòu)思想，專門解決軟件的結(jié)構(gòu)問題。它跟 MVC 架構(gòu)是同一類東西，但是更加簡(jiǎn)單和清晰，它跟 React 本身沒什么關(guān)系，它可以用在 React 上，也可以用在別的框架上。
Flux 存在多種實(shí)現(xiàn)（至少15種），F(xiàn)acebook 官方實(shí)現(xiàn)版本：

View： 視圖層

Action（動(dòng)作）：視圖層發(fā)出的消息（比如mouseClick）

Dispatcher（派發(fā)器）：用來(lái)接收Actions、執(zhí)行回調(diào)函數(shù)

Store（數(shù)據(jù)層）：用來(lái)存放應(yīng)用的狀態(tài)，一旦發(fā)生變動(dòng)，就提醒Views要更新頁(yè)面

Redux 的作用跟 Flux 是一樣的，它可以看作是 Flux 的一種實(shí)現(xiàn)，但是又有點(diǎn)不同，具體的不同總結(jié)起來(lái)就是：

Redux 只有一個(gè) store 而 Flux 里面會(huì)有多個(gè) store 存儲(chǔ)應(yīng)用數(shù)據(jù)，并在 store 里面執(zhí)行更新邏輯，當(dāng) store 變化的時(shí)候再通知 controller-view 更新自己的數(shù)據(jù)，Redux 將各個(gè) store 整合成一個(gè)完整的 store，并且可以根據(jù)這個(gè) store 推導(dǎo)出應(yīng)用完整的 state。

沒有 Dispatcher。 Redux 中沒有 Dispatcher 的概念，它使用 reducer 來(lái)進(jìn)行事件的處理，它根據(jù)應(yīng)用的狀態(tài)和當(dāng)前的 action 推導(dǎo)出新的 state。Redux 中有多個(gè) reducer，每個(gè) reducer 負(fù)責(zé)維護(hù)應(yīng)用整體 state 樹中的某一部分，多個(gè) reducer 可以通過 combineReducers 方法合成一個(gè)根reducer，這個(gè)根reducer負(fù)責(zé)維護(hù)完整的 state，當(dāng)一個(gè) action 被發(fā)出，store 會(huì)調(diào)用 dispatch 方法向某個(gè)特定的 reducer 傳遞該 action，reducer 收到 action 之后執(zhí)行對(duì)應(yīng)的更新邏輯然后返回一個(gè)新的 state，state 的更新最終會(huì)傳遞到根reducer處，返回一個(gè)全新的完整的 state，然后傳遞給 view。

簡(jiǎn)單說，Redux 和 Flux 之間最大的區(qū)別就是對(duì) store/reducer 的抽象，F(xiàn)lux 中 store 是各自為戰(zhàn)的，每個(gè) store 只對(duì)對(duì)應(yīng)的 controller-view 負(fù)責(zé)，每次更新都只通知對(duì)應(yīng)的 controller-view；而 Redux 中各子 reducer 都是由根reducer統(tǒng)一管理的，每個(gè)子reducer的變化都要經(jīng)過根reducer的整合。

為了方便使用，Redux 的作者封裝了一個(gè) React 專用的庫(kù) React-Redux。
這個(gè)庫(kù)是可以選用的。實(shí)際項(xiàng)目可以選擇直接使用 Redux，或者使用 React-Redux。React-Redux 雖然提供了便利，但需要掌握額外的 API，并且要遵守它的組件拆分規(guī)范。
React-Redux 將所有組件分成兩大類：UI 組件和容器組件。

UI組件特點(diǎn)：

只負(fù)責(zé) UI 的呈現(xiàn)，不帶有任何業(yè)務(wù)邏輯

沒有狀態(tài)（即不使用this.state這個(gè)變量）

所有數(shù)據(jù)都由參數(shù)（this.props）提供

不使用任何 Redux 的 API

容器組件特點(diǎn)：

負(fù)責(zé)管理數(shù)據(jù)和業(yè)務(wù)邏輯，不負(fù)責(zé) UI 的呈現(xiàn)

帶有內(nèi)部狀態(tài)

使用 Redux 的 API

簡(jiǎn)單說：UI 組件負(fù)責(zé) UI 的呈現(xiàn)，容器組件負(fù)責(zé)管理數(shù)據(jù)和邏輯。
React-Redux 規(guī)定，所有的 UI 組件都由用戶提供，容器組件則是由 React-Redux 自動(dòng)生成。也就是說，用戶負(fù)責(zé)視覺層，狀態(tài)管理則是全部交給它。

connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])

connect()用于從 UI 組件生成容器組件。

connect的意思，就是將這兩種組件連起來(lái)。

mapStateToProps是一個(gè)函數(shù)。

它的作用就是像它的名字那樣，建立一個(gè)從（外部的）state對(duì)象到（UI 組件的）props對(duì)象的映射關(guān)系。

[mapStateToProps(state, [ownProps]): stateProps] (Function)

任何時(shí)候，只要 Redux store 發(fā)生改變，mapStateToProps 函數(shù)就會(huì)被調(diào)用。該回調(diào)函數(shù)必須返回一個(gè)純對(duì)象，這個(gè)對(duì)象會(huì)與組件的 props 合并。如果你省略了這個(gè)參數(shù)，你的組件將不會(huì)監(jiān)聽 Redux store。第二個(gè)參數(shù) ownProps，為傳遞到組件的 props。

mapDispatchToProps是connect函數(shù)的第二個(gè)參數(shù)，用來(lái)建立 UI 組件的參數(shù)到store.dispatch方法的映射。也就是說，它定義了哪些用戶的操作應(yīng)該當(dāng)作 Action，傳給 Store。它可以是一個(gè)函數(shù)，也可以是一個(gè)對(duì)象。

組件

connect 方法生成容器組件以后，需要讓容器組件拿到state對(duì)象，才能生成 UI 組件的參數(shù)。
React-Redux 提供Provider組件，可以讓容器組件拿到state。

React-router采用react組件的方式來(lái)實(shí)現(xiàn)router，通過管理 URL，實(shí)現(xiàn)組件的切換和狀態(tài)的變化。

：路由容器組件

：定義URL路徑與組件的對(duì)應(yīng)關(guān)系

: 指定默認(rèn)情況下加載的子組件

: 用于路由的跳轉(zhuǎn)，即用戶訪問一個(gè)路由，會(huì)自動(dòng)跳轉(zhuǎn)到另一個(gè)路由

:用于取代a元素，生成一個(gè)鏈接，允許用戶點(diǎn)擊后跳轉(zhuǎn)到另一個(gè)路由。它基本上就是a元素的React 版本，可以接收Router的狀態(tài)。

path 屬性:Route組件的path屬性指定路由的匹配規(guī)則

histroy 屬性: Router組件的history屬性，用來(lái)監(jiān)聽瀏覽器地址欄的變化，并將URL解析成一個(gè)地址對(duì)象，供 React Router 匹配。

   render((
     //開始創(chuàng)建路由表
       //聲明每一個(gè)路由
         
         //每個(gè)路由
       
     
   ), document.getElementById("example"))

設(shè)計(jì)好整個(gè)應(yīng)用的state

根據(jù)用戶在view上的行為，定義好所有action

根據(jù)定義好的action，創(chuàng)建相應(yīng)的reducer處理state，合并reducer

根據(jù)定義好的reducer，生成store

通過組件，將store傳入router組件使用

編寫UI組件，并通過connect自動(dòng)生成容器組件

根據(jù)url，react-router調(diào)用相應(yīng)的組件，顯示view