摘要：為什么使用的核心是將組件化，由數(shù)據(jù)驅(qū)動(dòng)的展現(xiàn)。僅僅使用進(jìn)行開(kāi)發(fā)的痛點(diǎn)組件嵌套層級(jí)深，回調(diào)地獄。遵守容器組件與展示組件分離的原則。

React的核心是將UI組件化，由數(shù)據(jù)驅(qū)動(dòng)UI的展現(xiàn)。但是如何管理數(shù)據(jù)模型、組件與數(shù)據(jù)模型之間的通信，react并沒(méi)有很好的解決方案。Redux由flux演變而來(lái)，同時(shí)簡(jiǎn)化了Flux的流程。

組件嵌套層級(jí)深，回調(diào)地獄。你可能會(huì)在一個(gè)較深層次的組件里需要更新全局state的某個(gè)字段，卻無(wú)奈只能通過(guò)從頂層組件一層一層傳遞下來(lái)的props進(jìn)行回調(diào)。

頁(yè)面的state不可預(yù)測(cè)。由于state缺乏一種可預(yù)測(cè)的機(jī)制，導(dǎo)致用戶在進(jìn)行一些頁(yè)面操作(更改state)，或者異步請(qǐng)求有新的數(shù)據(jù)從服務(wù)端返回的時(shí)候，state的變化已經(jīng)不可控制，很容易產(chǎn)生bug

1、通過(guò)react-redux提供的Provider組件,在根組件外面包一層，這樣根組件，以及所有的子組件都能拿到store。實(shí)現(xiàn)的原理是基于React自身提供的context屬性，但是react官方不推薦直接在組件中使用this.context。所以react-redux提供了另一種方法connect，通過(guò)connect將普通的UI組件升級(jí)為容器組件，同時(shí)將獲取store的細(xì)節(jié)也一并封裝在生成容器組件的代碼中，從而容器組件可以直接拿到store

// 定義App組件
class Foo extends React.Component{
    render() {
    const { text } = this.props;
    return 
{text}
;
  }
}
const App = connect(
  mapStateToProps,
  mapDispatchToProps
)(Foo);

2、使用純函數(shù)修改state，保證state變化可預(yù)測(cè)。每次更改都返回一個(gè)全新的state。
3、遵守容器組件與展示組件分離的原則。這是redux一個(gè)重要的思想，容器組件和展示組件各司其職。

容器組件負(fù)責(zé)以下幾件事情：

處理數(shù)據(jù)邏輯

將store中的state轉(zhuǎn)變?yōu)閜rops傳遞給展示組件，對(duì)應(yīng)mapStateToProps

將注入了dispatch的函數(shù)作為props傳遞給展示組件，對(duì)應(yīng)mapDispatchToProps

有狀態(tài)的(展示組件則是無(wú)狀態(tài)的)

發(fā)起action，更新state

沒(méi)有DOM標(biāo)簽，沒(méi)有樣式

可復(fù)用的組件，又稱為“傻瓜組件”，僅僅通過(guò)容器組件傳進(jìn)來(lái)的props進(jìn)行UI展示，以及操作回調(diào)。感知不到redux的存在，脫離redux框架也能使用，盡量保持無(wú)狀態(tài)(可包含少量的UI狀態(tài))，有以下幾條原則：

不理解數(shù)據(jù)邏輯：不關(guān)心數(shù)據(jù)是如何得到的，也不關(guān)心數(shù)據(jù)是如何改變的

只通過(guò)props獲取數(shù)據(jù)和操作回調(diào)

基本是無(wú)狀態(tài)的：必須有的話，可以是UI的狀態(tài)

在引入之前，你可以先只用展示組件來(lái)構(gòu)建App。當(dāng)你發(fā)現(xiàn)有些組件并不會(huì)用到傳進(jìn)來(lái)的屬性，而僅僅只是把它往下傳給子組件的時(shí)候(并且層級(jí)比較深，超過(guò)兩層)，你就要考慮引入容器組件了。

首先，在沒(méi)有immutable.js的情況下，碰到較深層次的數(shù)據(jù)結(jié)構(gòu)時(shí)，更新state會(huì)變得很麻煩。

舊的state：

{
  priceInfo: {
    price: 200,
    promotion: {
      offValue: 30
    }
  }
}

現(xiàn)在需要只更新offValue的值為50，該怎么處理呢？

let newState = _.cloneDeep(this.state);
newState.priceInfo.promotion.offValue = 50;
this.setState(newState);

可以看到，需要先深度復(fù)制一份this.state，然后修改offValue的值，最后執(zhí)行setState。除了這個(gè)過(guò)程的有點(diǎn)復(fù)雜，另外深度復(fù)制對(duì)象是挺耗性能的一件事。而通過(guò)Immutable.js，我們只需要這樣做：

let initialState = Immutable.fromJS({
  priceInfo: {
    price: 200,
    promotion: {
      offValue: 30
    }
  }
});
this.setState(initialState.setIn(["priceInfo", "promotion", "offValue"]), 50);

React做性能優(yōu)化時(shí)經(jīng)常用到 shouldComponentUpdate，只有深度比較才能得出正確的值，決定是否render，而深度比較是十分消耗性能的。Immutable 則提供了簡(jiǎn)潔高效的判斷數(shù)據(jù)是否變化的方法，只需 === 和 is 比較就能知道是否需要執(zhí)行render()，而這個(gè)操作幾乎零成本，所以可以極大提高性能。

在jsx的語(yǔ)法中，你已經(jīng)習(xí)慣了使用擴(kuò)展運(yùn)算符來(lái)傳遞props，如下所示：

const titleInfo = {
  title: "主標(biāo)題",
  subTitle: "副標(biāo)題"
};

...

import Title from "title";

render() {
  return (