React 開發記錄

學習使用 React 要注意點地方有哪些呢？

1. JSX class 是關鍵字要用className替代， for也是關鍵字要用 htmlFor 代替
2. JSX 表達式返回null就是什麼都不顯示，能夠作隱藏某些元素
3. 自定義的組件必須是大寫字母開頭，普通的html都是小寫開頭
4. JSX事件名需使用小駝峯法(onClick)
5. JSX 事件監聽中若要使用當前實例需綁定this
6. 事件監聽時多參數，應將 event 對象放最後一個參數
7. 修改組件狀態應該使用 this.setState
8. setState由父類提供，切並非實時，是一個隊列修改的形式，因此若是要實時操做能夠用在參數使用函數返回上一個setState狀態進行下一次修改，屢次setState並不會形成頁面的渲染問題，由於只有隊列中的最後一次setState纔會對組件狀態進行改變並渲染到頁面中
9. props不能在內部組件進行狀態的修改，只能經過父組件修改props的傳入引起組件重渲染
10. state和props的區別在於，state是控制組件自己的狀態,props是讓外部配置組件的狀態
11. 沒有state是無狀態組件，反之則是有狀態組件，由於狀態會帶來管理的複雜性，因此推薦多寫無狀態組件，少使用有狀態組件，提升組件的複用性
12. JSX渲染列表的時候要爲每個渲染元素帶上key值，通常是後臺返回的每個元素的ID,具備惟一性，key的做用主要在於高速渲染DOM
13. state 不可直接修改, 這會讓React的狀態變得難以追蹤
14. 狀態提高:當某個狀態被多個組件所依賴或影響的時候，應該把這個狀態提高到父組件上，子組件經過props接受狀態
15. shouldComponentUpdate在作組件性能優化的時候很重要，用於控制組件是否何從渲染，帶兩個參數 preProps、preState,返回值是 Boolean
16. 組件在註銷的時候必須處理未釋放的狀態值，例如定時器
17. ref能夠獲取操做DOM，可是儘可能不這麼作，除非React自己作不到
18. 經過依賴prop-types來作 props 類型檢查

重點

實戰

1. 組件複用的時候，當同個頁面組件複用超過1次，組件內部清除定時器必須寫在 class 內，以static timer = null定義，不然當同頁面組件複用超過一次的時候註銷組件的時候仍是會發生內存泄漏問題，再強調一下，註銷組件的時候應在componentWillUnmounthook 中手動釋放 gc 沒法自動釋放的狀態。例如：定時器

代碼規範

1. 組件內部私有方法用_開頭，事件監聽用handle處理，把事件監聽的方法傳給組件的時候用on開頭<Ele onSubmit="this.handleSubmit" />
2. 組件的內容編寫順序以下：

• static開頭的類屬性，如defaultProps``propTypes
• 構造函數, constructor
• getter/setter
• 組件生命週期hook(componentWillMount,componentDidMount等)
• 私有方法, _*
• 事件監聽方法, handle*
• render*開頭的方法，有時候render方法會被分配到不一樣的render執行，這些函數都以render*開頭
• render方法