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不會做深拷貝，造成的結果不可預知。