react優化總結--(永久更新中)

1.箭頭函數和bind的使用不當

類函數裏聲明方法的時候最好一次聲明，只定義一次，什麼意思，咱們知道在類裏面聲明方法而後傳遞出去調用的時候this會丟失，通常用bind或者箭頭函數解決，可是咱們也要避免兩種書寫方式，即避免傳子組件props的時候寫內斂箭頭函數或者內斂的bind方式，由於這時候若是咱們在子組件調用這個函數，父組件state改變從新渲染後， this.xxx()}或者 每次會返回一個新的函數對象，props改變後，子組件也會從新渲染，這就形成了沒必要要的性能浪費。

2.key值的命名不當

咱們遍歷數據的時候喜歡用map順便把子節點的key設置成map的key，這樣當數據改變，好比上面的在第二個位置新添了一個X節點的時候，上次的B是賦值爲1，下次一樣的節點B被賦值爲2，這樣一樣的DOM卻被賦值了不一樣的key值就會形成不可預料的結果。咱們要想辦法至少在同一組裏保持key的一致性，這也是保持DOM的穩定性。react的virtual dom和diff算法也正是創建在DOM穩定性的前提下的高效性。

3.動態的節點需不須要設置key

剛剛上面也說了DOM節點咱們通常會設置一個key值，可是當出現這種狀況下的dom節點的時候呢。

<div>
    <p>hello</p>
    {
        someCondition? <p>what?</p> : null
    }
    <p>world</p>
</div>

JSX的本質就是一個輕量級javascript對象，在babel轉譯下變成createElment函數的嵌套，這個對象存的值依次爲 標籤名，key值(參數值)，文本內容。回到原問題，因此無論這個條件是否成立，在someCondition後面都有一個佔位符佔在那裏，這樣key在這裏設不設置就沒有提升react性能之說了。(都有對象佔着,null也是一個對象)

4.react的聲明式編程 （Declarative Programming)

說到聲明式或者響應式要和jq來作對比，我在用jq寫代碼的時候，咱們其實本身一些核心的操做，無論是dom的操做仍是數據的調用，咱們都是直接用的jq的API去實現，當jq的API改變的時候，咱們又不得不花大量精力去修改和維護，這就是命令式編程的特色。而react與此不一樣，react的聲明式設計是讓咱們在用本身寫的函數和代碼去完成咱們想要的核心功能，並無用到太多系統級的核心API，react是讓咱們去實現生命週期函數，實現render函數，當react實現方式會改變，但你寫的code並不會改變，由於你寫的code只是去響應它要作的東西。好比react16發佈的時候，核心在於react底層的diff算法的提高，但咱們的代碼並不須要作很大的改變。

5.JSX

html，css，js徹底分離仍是推崇相關邏輯的代碼（html，js，css）放在一個組件呢（這也正是react的jsx），JSX須要babel轉譯

6.值引用問題在react中也存在

父級所傳遞的props，做爲子級的state，是否會產生值引用對象影響問題？也就是我更改子級state，父級props被相應更改。答案是會，react不會作深拷貝，形成的結果不可預知。