摘要：為什么使用的核心是將組件化，由數據驅動的展現。僅僅使用進行開發的痛點組件嵌套層級深，回調地獄。遵守容器組件與展示組件分離的原則。

React的核心是將UI組件化，由數據驅動UI的展現。但是如何管理數據模型、組件與數據模型之間的通信，react并沒有很好的解決方案。Redux由flux演變而來，同時簡化了Flux的流程。

組件嵌套層級深，回調地獄。你可能會在一個較深層次的組件里需要更新全局state的某個字段，卻無奈只能通過從頂層組件一層一層傳遞下來的props進行回調。

頁面的state不可預測。由于state缺乏一種可預測的機制，導致用戶在進行一些頁面操作(更改state)，或者異步請求有新的數據從服務端返回的時候，state的變化已經不可控制，很容易產生bug

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

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

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

容器組件負責以下幾件事情：

處理數據邏輯

將store中的state轉變為props傳遞給展示組件，對應mapStateToProps

將注入了dispatch的函數作為props傳遞給展示組件，對應mapDispatchToProps

有狀態的(展示組件則是無狀態的)

發起action，更新state

沒有DOM標簽，沒有樣式

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

不理解數據邏輯：不關心數據是如何得到的，也不關心數據是如何改變的

只通過props獲取數據和操作回調

基本是無狀態的：必須有的話，可以是UI的狀態

在引入之前，你可以先只用展示組件來構建App。當你發現有些組件并不會用到傳進來的屬性，而僅僅只是把它往下傳給子組件的時候(并且層級比較深，超過兩層)，你就要考慮引入容器組件了。

首先，在沒有immutable.js的情況下，碰到較深層次的數據結構時，更新state會變得很麻煩。

舊的state：

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

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

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

可以看到，需要先深度復制一份this.state，然后修改offValue的值，最后執行setState。除了這個過程的有點復雜，另外深度復制對象是挺耗性能的一件事。而通過Immutable.js，我們只需要這樣做：

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

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

在jsx的語法中，你已經習慣了使用擴展運算符來傳遞props，如下所示：

const titleInfo = {
  title: "主標題",
  subTitle: "副標題"
};

...

import Title from "title";

render() {
  return (