深刻淺出react和redux筆記總結

設計高質量的React組件

1.組件的生命週期

1.裝載過程

• constructor
• getlnitialState：只在 React.createClass 方法創造的組件類纔會用到
• getDefaultProps：只在 React.createClass 方法創造的組件類纔會用到，用ES6的話，在構造函數中經過給 this.state 賦值完成狀的初始化，經過給類屬性（注意是類屬性，而不是類的實例對象屬性） defaultProps 賦值指定 props 初始值，達到的效果是徹底同樣的，
• componentWillMount：咱們一般不用定義 componentWillMount 函數，顧名思義， componentWilJMount發生在「將要裝載」的時候，這個時候沒有任何渲染出來的結果，即便調用 this setState修改狀態也不會引起從新繪製，一切都遲了 換句話說，全部能夠在這個componentWillMount中作的事情，均可以提早到 constructor 中間去作，能夠認爲這個函數存在的主要目的就是爲了和 componentDidMount 對稱）（componentWillMount 能夠在服務器端被調用，也能夠在瀏覽器端被調用）
• render：render 函數應該是一個純函數，徹底根據 this.state this.props 來決定返回的結果，並且不要產生任何反作用，render 函數自己並不往DOM樹上渲染或者裝載內容，它只是返回JSX表示的對象，而後由 React 庫來根據返回對象決定如何渲染，因此一個render裏面有多個組件時，是全部的組件都轉載完成（已經放在DOM樹）後，纔會依次調用各個組件的componentDidMount
• componentDidMount：只能在瀏覽器端被調用

2.更新過程

• componentWillReceiveProps：只要是父組件的 render 函數被調用，在 render 函數裏面被渲染的子組件就會經歷更新過程，無論父組件傳給子組件的 props 有沒有改變，都會觸發子組件的 componentWillReceiveProps 函數，經過 this.setState 方法觸發的更新過程不會調用這個函數，這是由於這個函數適合根據新的 props 值（也就是參數 nextProps ）來計算出是否是要更新內部狀態 state。
• shouldComponentUpdate：在更新過程當中， React 庫首先調用 shouldComponentUpdate 函數，若是這個函數返回true ，那就會繼續更新過程，接下來調用 render 函數；反之，若是獲得 false ，那就馬上中止更新過程，也就不會引起後續的渲染了，不會調用render（下面的3個都不調用）
• componentWillUpdate：
• render
• componentDidUpdate：能夠利用 componentDidMount 函數執行其餘 UI 庫的代碼，好比 jQuery 代碼 React 組件被更新時，原有的內容被從新繪製，這時候就須要在 componentDidUpdate 函數再次調用 jQuery 代碼

3.卸載過程

• componentWillUnmount：在componentDidMount 中用非 React 的方法創造了一些 DOM 元素，若是撒手無論可能會形成內存泄露，那就須要在 componentWillUnmount 中把這些創造的 DOM 元素清理掉

2.小細節

• PropTypes 提供一系列驗證器，可用於確保組件接收到的數據類型是有效的，在開發過程當中避免犯錯，可是在發佈產品代碼時，用一種自動的方式將propTypes 去掉，這樣最終部署到產品環境的代碼就會更優，現有的 babel-react-optimize 就具備這個功能，能夠經過npm 安裝，可是應該確保只在發佈產品代碼時使用它
• 組件向外傳遞數據是調用父組件的方法來改變父組件的state值。

從Flux到Redux

1.Flux 55