React 快速入門小記

大約半個月前，我一直在思考一個問題，Angular、React 和 Vue，究竟該學什麼？

聽取了幾位前輩的意見，也綜合考慮了各方面的緣由，最終選擇了 React，但願我「沒有選錯」。

十天的時間，把 React 的快速入門文檔給過了一遍，整理了一些筆記，如今記錄以下。

JSX 簡介

能夠在 JSX 中嵌入 JavaScript 表達式，並用花括號包裹。

使用括號包裹 JSX 表達式，並將其拆分爲多行以提升可讀性。也能夠避免自動插入分號。

因爲 JSX 是在 JavaScript 中使用的，React DOM 的屬性使用 camelCase 命名。

JSX 是安全的，能夠防止注入攻擊。

渲染元素

元素是元素，組件是組件。

React 元素是隻讀的，一旦建立，就不能改變它的子元素和屬性。

就目前來講，更新 UI 的惟一方法是建立一個新的元素，並傳遞給 ReactDOM.render()。

在實踐中，大多數應用程序只調用一次 ReactDOM.render()。

當調用 ReactDOM.render() 時，只有發生改變的節點纔會被 React DOM 更新。

組件和屬性

從概念上講，組件就像 JavaScript 函數，它們接收輸入，並返回 React 元素。

可使用 ECMAScript 6 的類來定義組件，類有一些額外的功能。

組件的名稱老是以大寫字母開始。

組件中可使用組件。

若是要將 React 集成到現有應用程序中去，能夠優先編寫小的組件，自下而上。

組件越小越好。

一個好的經驗法則：若是 UI 被屢次使用，或者 UI 自己足夠複雜，那麼就能夠將它作成組件。

組件的屬性是隻讀的。

全部的 React 組件必須像純函數那樣使用它們的屬性。

狀態和生命週期

狀態相似於屬性，但它是私有的，徹底由組件控制。

componentDidMount() 在組件呈現到 DOM 以後運行。

狀態有特殊的意義，若是須要存儲不影響視覺輸出的內容，並不在 render() 中使用，則能夠手動向類中添加其它字段。

不要直接修改狀態，而是經過調用 this.setState() 來修改狀態。

React 能夠將多個 this.setState() 調用批處理爲一個 this.setState() 以實現性能上的提高。

更新狀態是異步的，不能依賴上一個狀態值來計算下一個狀態值。
要解決它，應當使用函數而不是對象。該函數將接收先前的狀態作爲第一個參數，並將屬性作爲第二個參數。

當調用 this.setState() 時，React 會將對象合併到當前狀態。

父組件和子組件都不知道某個組件是有狀態仍是無狀態的，而且不該該關心它是否被定義爲函數或類。

組件能夠選擇將狀態作爲屬性傳遞給子組件。

組件以及它的數據只能影響子組件，這一般被稱爲自上而下或單向數據流。

處理事件

DOM 事件使用全小寫命名，而 React 事件使用 camelCase 命名。

使用 JSX 傳遞一個函數作爲事件處理程序。

不能返回 false 來阻止 React 中的默認行爲。必須顯式調用 event.preventDefault()。

當使用 ECMAScript 6 的類定義組件時，常見的作法是將事件處理程序作爲類上的方法。

若是在 ECMAScript 6 的類中使用事件，必須手動在構造函數中綁定。
或者在回調中使用箭頭函數，可是每次呈現時都會建立不一樣的回調。大多數狀況下這麼作是能夠的，可是在底層組件中，可能會執行額外的渲染，通常建議在構造函數中綁定，以免這種性能問題。

條件呈現

若是條件過於複雜，多是提取組件的好時機。

列表和鍵

應給數組中的元素賦予鍵，以給元素一個惟一的身份。

若是數組中的元素是組件，應該將鍵保存在組件上，而不是組件中的元素上。

一個好的經驗法則是，map() 中的元素須要鍵。

鍵被 React 使用，不會傳遞給組件，若是要使用，則使用不一樣的名稱，作爲屬性顯式傳遞。

若是嵌套太深，多是提取組件的好時機。

表單

值不會隨用戶的輸入而改變，由於組件已聲明值，且始終是原來的值。
若要響應用戶輸入的值，則使用 onChange 事件保存用戶輸入的值。

要初始化具備非空值的不受控制的組件，可使用 defaultValue/defaultChecked 屬性。

對於 <input> 和 <textarea> 應該使用 onChange 而不是 oninput。

在 React 中，要使用受控制的表單組件。

若是在 <textarea> 中使用文本節點插入值，那麼它的行爲將相似於 defaultValue。

狀態提高

對於在 React 應用程序中發生變化的任何數據，應該有一個單一的「真實來源」。一般，首先將狀態添加到須要渲染的組件。而後，若是其餘組件也須要它，能夠將其提高到最接近的共同祖先。而不是嘗試在不一樣組件之間同步狀態，應該依賴於自上而下的數據流，或者說是單向數據流。

若是一些變量能夠從屬性或狀態派生，它可能不該該設置爲狀態。

組合與繼承

建議使用組合而不是繼承來重用組件之間的代碼。

組件能夠接收任意屬性，包括原始值、React 元素以及函數。

若是要在組件之間重用非 UI 的功能，建議將其提取到單獨的 JavaScript 模塊中。

在 React 中思考

使用 React 構建界面的思考過程：

1. 打破 UI 進入組件層次結構。
2. 在 React 中構建靜態版本。
3. 肯定最少但完整的狀態。
4. 肯定狀態應該儲存在哪一個組件。
5. 添加反向數據流。

單一職責原則：一個組件應該只作一件事。

要知道它是否是狀態，只須要問三個問題：

1. 數據是從父級過來的嗎？若是是，它可能不是狀態。
2. 數據是否隨時間保持不變？若是是，它可能不是狀態。
3. 能夠根據組件的屬性或狀態來計算它嗎？若是是，它可能不是狀態。

數據不是從父級過來的，會隨時間變化，並不能夠被計算出來，那麼它就是狀態。

對於應用程序中的每一個狀態：

1. 肯定使用該狀態的每一個組件。
2. 查找最接近的共同祖先。
3. 最接近的共同祖先應該擁有該狀態。

最後

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