React菜鳥食譜

JSX

1. 用小括號包裹代碼防止分號自動插入的bug，用大括號包裹裏面的表達式

2. 切記你使用了大括號包裹的 JavaScript 表達式時就不要再到外面套引號了。JSX 會將引號當中的內容識別爲字符串而不是表達式

3. 使用小駝峯定義屬性，例如，class變成className，tabIndex對應tabindex

4. 渲染以前會轉換爲字符串，防止XSS(跨站腳本)攻擊

5. 本質上是爲react.createElement(component, props, ...children)方法提供的語法糖

6. data-*，aria-*是例外的，不遵照小駝峯命名規則

7. 沒有子代可使用自閉和標籤，

   <div className="sidebar" /> 

    
8. 可使用 Bable在線編輯器看JSX如何轉換爲JavaScript的
9. 可使用點語法來從模塊中導出組件

const MyComponents = { DatePicker: function DatePicker(props) { return <div>Imagine a {props.color} datepicker here.</div>; } } function BlueDatePicker() { return <MyComponents.DatePicker color="blue" />; } 

9. react將小寫的標籤名認爲是HTML的原生標籤
10. 大寫的標籤名認爲是react組件
11. 不能用表達式表示標籤
12. 標籤名能夠爲大寫開頭的變量
13. 若是沒有給屬性傳值，默認爲true不建議使用
14. 可使用擴展運算符...去傳遞屬性
15. 組件能夠用數組形式返回多個元素
16. false,null,undefined,true都是有效的子代，但不會被渲染
17. 數字0仍然會被渲染

 

元素

1. immutable不可變的，建立後沒法改變其內容與屬性
2. 更新頁面的惟一方法是建立一個新的元素傳入reactDOM.render()
3. 渲染過程只會更新改變的部分

 

組件&Props

1. 組件像是函數，接受的參數爲（props），輸出頁面上的元素
2. 當React遇到的元素是用戶自定義的組件，它會將JSX屬性做爲單個對象傳遞給該組件,這個對象稱之爲「props」
3. 組件名稱必須爲大寫字母開頭，例如<Welcome />
4. 組件必須先定義或引用纔可以使用
5. 組件的返回值只能有一個根元素
6. 建議從組件自身的角度來命名props，而不是根據使用組件的上下文命名
7. 概念：純函數在函數內不改變傳入參數的值
8. 全部的React組件必須像純函數那樣使用它們的props

 

State & 生命週期

1. 狀態是私有的，徹底受控於當前組件
2. 使用類就容許咱們使用其它特性，例如局部狀態、生命週期鉤子，抽象組件的區別
3. 類組件應該始終使用props調用基礎構造函數

4. constructor(props){ super(props); this.state ={date:newDate()}; } 

5. 雖然this.props由React自己設置以及this.state具備特殊的含義，但若是須要存儲不用於視覺輸出的東西，則能夠手動向類中添加其餘字段
6. 若是你不在render()中使用某些東西，它就不該該在狀態中
7. 使用setState()更新組件的局部狀態，狀態改變觸發render()渲染應該更新的元素
8. 不能直接更新狀態，構造函數是惟一初始化this.state的方法
9. 狀態更新是異步的，不能以此爲根據去計算下一個值
10. 若是須要使用前一個state或者props做爲依據，可使用setState()接受一個函數，該函數接收先前的狀態做爲第一個參數，將這次更新被應用時的props作爲第二個參數：

11. this.setState((prevState, props) => ({ counter: prevState.counter + props.increment })); 

12. setState()是淺合併只合並對應的屬性，沒對應的無論
13. 組件的內部狀態其餘組件不可訪問，可是能夠將狀態作爲屬性傳遞給其子組件
14. 狀態向子組件傳遞是單向的，自頂向下的，任何狀態始終由某些特定組件全部，而且從該狀態導出的任何數據或UI只能影響樹中下方的組件
15. 組件是有狀態的仍是無狀態的是可能隨時間變化的

 

事件處理

1. 綁定事件的命名爲駝峯式寫法
2. JSX須要用大括號包起處理函數，DOM寫成字符串

3. <button onclick="activateLasers()"> Activate Lasers </button> <button onClick={activateLasers}> Activate Lasers </button> 

4. 使用preventDefault阻止默認行爲不能用return false
5. 經過bind方式向監聽函數傳參事件對象e要排在所傳參數的後面

 

條件渲染

1. 在JSX中使用邏輯運算符&&或三目運算符，用花括號包裹
2. render()返回null阻止渲染

 

列表&Keys

1. a key should be provided for list items
2. keys能夠給DOM中的某些元素被增長或刪除的時候幫助識別哪些元素髮生變化，因此數組中應給不一樣的key
3. JSX的大括號能夠包含任意的表達式
4. key不會傳遞給組件
5. map()嵌套太多考慮提取出組件

 

表單

1. 表單只接受一個惟一的name
2. 使用受控組件表現表單這種自己具備狀態的元素，react負責渲染表單的組件控制用戶後續操做產生的變化

 

狀態提高

1. 若是幾個組件須要公用狀態數據，最好將這部分提高至他們最近的父組件當中去管理
2. 任何可變數據理應只有一個單一的數據源

 

組合 vs 繼承

1. 建議使用組合而不是繼承

 

React理念

1. 劃分你的組件（遵循單一功能原則）
2. 建立一個靜態版本
3. 定義UI狀態的最小表示，不要重複了
4. 明確組件的狀態
5. 處理反向數據流
6. state只在交互時使用，props是一種父級向子級傳遞數據的方式
7. 自頂向下構建組件適於小型應用，自底向上適用於大型應用
8. 底層組件的更新須要更高層級的組件狀態更新
9. 區分props與state
10. 思考你的應用

 

PropTypes進行類型檢查

1. array
2. bool
3. func
4. number
5. object
6. string
7. symbol
8. node(任何可被渲染的元素（包括數字、字符串、子元素或數組）
9. element
10. PropTypes.instanceOf(Message)某個類的實例
11. PropTypes.oneOf(['News', 'Photos'])限制爲某個特定值之一
12. PropTypes.oneOfType([PropTypes.string,PropTypes.number,PropTypes.instanceOf(Message)])限制爲列舉的類型
13. PropTypes.arrayOf(PropTypes.number)一個指定元素類型的數組
14. PropTypes.objectOf(PropTypes.number)一個指定類型的對象
15. PropTypes.shape({color: PropTypes.string,fontSize: PropTypes.number}) 一個指定屬性及其類型的對象
16. PropTypes.func.isRequired這樣若是這個屬性父組件沒有提供時，會打印警告信息
17. PropTypes.any.isRequired任意類型的數據
18. 自定義驗證器，在'oneOfType'中不起做用
19. 在arrayOf與objectOf中能夠提供自定義的驗證器
20. 可使用defaultProps爲props定義默認值
21. 對於大型的代碼庫建議使用Flow與TypeScript來代替PropTypes

 

靜態類型檢查

1. Flow
2. TypeScript
3. Reason
4. Kotlin
5. F#/Fable

 

Refs&DOM

1. 幾個適用的狀況，處理焦點、文本選擇或媒體控制、觸發強制動畫、集成第三方DOM庫
2. 不要過分適用refs，組件state更爲清晰
3. ref接受一個回調函數，在組件被加載或卸載時會當即執行
4. 回調會在componentDidMount或componentDidUpdate這些生命週期回調以前執行
5. 加載時將DOM元素傳入ref的回調函數，卸載時傳入null
6. 當ref屬性用於適用class聲明的自定義組件時，回調接受加載的React實例，僅對class聲明的組件有效
7. 不能在函數式組件上使用(function component() {})，由於他們沒有實例
8. 可是隻要ref指向一個DOM元素或者class組件，他就能在組件內部使用

 

非受控組件

1. 只提供初始值和獲取結果，其他表單數據由DOM處理
2. <input /> type爲text，<select></select>，<textarea>支持defaultValue，type是radio和checkbox支持defaultChecked

 

性能優化

1. 虛擬DOM，當組件的props或者state改變時，React比較新返回的元素個以前渲染的元素來決定是否有必要更新實際的DOM，不相等時會更新DOM
2. 利用shouldComponentUpdate返回true時React執行更新
3. 返回fasle跳過整個渲染進程，包括組件和以後的內容調用render()
4. React.PureComponent沒必要寫本身的shouldComponentUpdate，它只作一個淺比較。可是淺比較會忽略屬性或狀態突變的狀況，此時不能使用它
5. 使用不可突變的數據結構能夠更輕鬆的追蹤對象變化

 

小知識點

1. 組件的命名的首字母要大寫，這是類命名的規範
2. setSate()是異步的

setState()會調用render方法，可是不會當即改變state的值，state是在render方法中賦值的。因此在執行setState()後當即獲取state的值是不變的。一樣的直接賦值state並不會觸發更新，由於沒有調用render函數。

3. reducer必須返回一個新的對象才能出發組件的更新

由於在connect函數中會對新舊兩個state進行淺對比，若是state只是值改變可是引用地址沒有改變，connect會認爲它們相同而不觸發更新。

4. 不管reducer返回的state是否改變，subscribe中註冊的全部回調函數都會被觸發
5. 組件卸載以前，手動加載的監聽事件和定時器要手動清除，由於這些不是react的控制範圍內，必須手動清除。
6. class變爲className，for變成htmlFor，由於class和for變成了關鍵字
7. 不得使用setState的事件

• shouldComponentUpdate(nextProps, nextState)
• componentWillUpdate(nextProps, nextState)
• render()

8. 存取DOM的適當時機

• componentDidMount()