React 高級指南小記

接上篇，仍是筆記，仍是乾貨。

深刻 JSX

若是使用 JSX 表達式 <Foo />，Foo 必須在範圍內，由於這些標籤被編譯爲對指定變量的直接引用。

因爲 JSX 編譯爲對 React.createElement() 的調用，所以 React 庫必須始終在 JSX 代碼的做用域中。

可使用 JSX 中的點表示法來引用 React 組件。若是有一個模塊導出不少 React 組件，這很方便。

用戶定義的組件必須以大寫開頭。

當構建通用容器時，擴展屬性可能頗有用。然而，擴展屬性很容易將大量不相關的屬性傳遞給不關心它們的組件。建議謹慎使用擴展屬性。

在包含開始標記和結束標記的 JSX 表達式中，這些標記之間的內容做爲特殊的屬性 this.props.children 傳遞。

React 組件不能返回多個 React 元素，可是一個 JSX 表達式能夠有多個子元素。所以，若是想要一個組件呈現多個元素，能夠將它包裝在 div 中。

傳遞給自定義組件的子項能夠是任何東西，只要該組件將它們轉換爲 React 在渲染以前能夠理解的東西便可。

一些「假」值，仍然會被 React 渲染。

使用 PropTypes 進行類型檢查

出於性能緣由，僅在開發模式下檢查 propTypes。

Refs 和 DOM

ref 屬性接受一個回調函數，回調將在組件被掛載或卸載後當即執行。

當組件裝載時，React 將使用 DOM 元素調用 ref 回調，並在卸載時用 null 調用它。

當在自定義組件上使用 ref 屬性時，ref 回調接收組件的已裝入實例作爲其參數。

不受控制的組件

在大多數狀況下，建議使用受控組件來實現表單。在受控組件中，表單數據由 React 組件處理。不受控組件的表單數據則是由 DOM 自己處理。

要編寫不受控制的組件，而不是爲每一個狀態更新編寫事件處理程序，可使用 ref 從 DOM 獲取表單值。

因爲不受控制的組件在 DOM 中保持真實源，所以，當使用不受控制的組件時，有時更容易集成 React 和非 React 代碼。

優化性能

在某些狀況下，能夠經過重寫生命週期函數 shouldComponentUpdate() 來提高性能，這是在從新呈現過程開始以前觸發的。若是在某些狀況下組件不須要更新，能夠從 shouldComponentUpdate() 返回 false，以跳過整個渲染過程。

大多數時候，能夠繼承 React.PureComponent 而不是編寫本身的 shouldComponentUpdate() 來進行淺比較。

若是僅僅是修改屬性或狀態內的實例的變量，而不是經過建立一個新的實例去覆蓋它，那麼 shouldComponentUpdate() 將不能正常工做。

Reconstruction

當根元素類型不一樣時，React 將拆除舊樹並從頭開始構建新樹。

當 DOM 元素類型相同時，React 會查看二者的屬性，保留相同的底層 DOM 節點，並僅更新更改的屬性。當更新樣式時，React 也知道只更新已更改的樣式屬性。處理 DOM 節點後，React 而後對子節點進行遞歸。

當組件元素類型相同時，實例保持不變，所以，在渲染之間維護狀態。React 更新底層組件實例的屬性以匹配新元素，並在底層實例上調用 componentWillReceiveProps() 和 componentWillUpdate()。接下來調用 render() 函數，而後對子節點進行遞歸。

當對 DOM 節點的子節點進行遞歸時，React 只是同時迭代兩個子節點列表，並在有差別時產生變化。當子節點有 key 時，React 使用鍵將舊樹中的節點和新樹中的節點進行匹配。

Context

經過組件樹傳遞數據，沒必要在每一個級別手動傳遞屬性，能夠在 React 中使用強大的 context API 來作到這一點。

絕大多數狀況下不須要使用 context。

context 是一個實驗性的 API，可能會在將來的版本中取消。

一般建議使用諸如 Redux 之類的狀態管理庫，而不是使用 context。

最後

源碼：https://github.com/chnhyg/react-demo