React 高階指南小記

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

如果使用 jsx 表示式，foo必須在範圍內，因為這些標籤被編譯為對指定變數的直接引用。

由於 jsx 編譯為對react.createelement()的呼叫，因此 react 庫必須始終在 jsx **的作用域中。

可以使用 jsx 中的點表示法來引用 react 元件。如果有乙個模組匯出很多 react 元件，這很方便。

使用者定義的元件必須以大寫開頭。

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

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

react 元件不能返回多個 react 元素，但是乙個 jsx 表示式可以有多個子元素。因此，如果想要乙個元件呈現多個元素，可以將它包裝在div中。

傳遞給自定義元件的子項可以是任何東西，只要該元件將它們轉換為 react 在渲染之前可以理解的東西即可。

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

出於效能原因，僅在開發模式下檢查 proptypes。

ref 屬性接受乙個**函式，**將在元件被掛載或解除安裝後立即執行。

當元件裝載時，react 將使用 dom 元素呼叫 ref **，並在解除安裝時用 null 呼叫它。

當在自定義元件上使用 ref 屬性時，ref **接收元件的已裝入例項做為其引數。

在大多數情況下，建議使用受控元件來實現表單。在受控元件中，表單資料由 react 元件處理。不受控元件的表單資料則是由 dom 本身處理。

要編寫不受控制的元件，而不是為每個狀態更新編寫事件處理程式，可以使用 ref 從 dom 獲取表單值。

由於不受控制的元件在 dom 中保持真實源，因此，當使用不受控制的元件時，有時更容易整合 react 和非 react **。

在某些情況下，可以通過重寫生命週期函式shouldcomponentupdate()來提公升效能，這是在重新呈現過程開始之前觸發的。如果在某些情況下元件不需要更新，可以從shouldcomponentupdate()返回 false，以跳過整個渲染過程。

大多數時候，可以繼承react.purecomponent而不是編寫自己的shouldcomponentupdate()來進行淺比較。

如果僅僅是修改屬性或狀態內的例項的變數，而不是通過建立乙個新的例項去覆蓋它，那麼shouldcomponentupdate()將不能正常工作。

當根元素型別不同時，react 將拆除舊樹並從頭開始構建新樹。

當 dom 元素型別相同時，react 會檢視兩者的屬性，保留相同的底層 dom 節點，並僅更新更改的屬性。當更新樣式時，react 也知道只更新已更改的樣式屬性。處理 dom 節點後，react 然後對子節點進行遞迴。

當元件元素型別相同時，例項保持不變，因此，在渲染之間維護狀態。react 更新底層元件例項的屬性以匹配新元素，並在底層例項上呼叫componentwillreceiveprops()和componentwillupdate()。接下來呼叫render()函式，然後對子節點進行遞迴。

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

通過元件樹傳遞資料，不必在每個級別手動傳遞屬性，可以在 react 中使用強大的 context api 來做到這一點。

絕大多數情況下不需要使用 context。

context 是乙個實驗性的 api，可能會在未來的版本中取消。

通常建議使用諸如 redux 之類的狀態管理庫，而不是使用 context。

原始碼：