簡要介紹：分離ui與業務的方法一直在演進，從早期的mixins，到hoc，再到render prop，本文主要對比hoc，談談render props
1 . 早期的mixins
早期復用業務通過mixins來實現，比如元件a和元件b中，有一些公用函式，通過mixins剝離這些公用部分，並將其組合成乙個公用集合，然後將這個集合傳遞給每個元件呼叫。
//公有的函式部分
const somemixins=
printweight()
}class
extends
react.component
this.printcolor=this.printcolor.bind(this);
} render()>
這是乙個蘋果
div>
}}class
banana
extends
react.component
this.printcolor=this.printcolor.bind(this);
} render()>
這是乙個香蕉
div>
}}
hoc簡單理解就是元件工廠，接受原始元件作為引數，新增完功能與業務後，返回新的元件。下面來介紹hoc引數的幾個例子。
（1）引數僅為原始元件，比如：
（2）引數為原始元件和乙個物件，比如：
但是這種情況比較少用，如果物件中僅僅傳遞的是屬性，其實完全可以通過元件的props實現值的傳遞，我們用hoc的主要目的是分離業務，關於ui的展示，以及一些元件中的屬性和狀態，我們一般通過props來指定比較方便
（3）引數為原始元件和乙個函式，比如：
這種是hoc的典型例子，原始元件引數表示ui部分，函式引數表示處理邏輯，在hoc工廠中進行耦合後生成新的元件。
（4）柯里化
最常見的是僅以乙個原始元件作為引數，但是在外層包裹了業務邏輯，比如react-redux的conect函式中：
class
admin
extends
react.component
const mapstatetoprops=(state)=>;
}const mapdispatchtoprops=(dispatch)=>
}const connect(mapstatetoprops,mapdispatchtoprops)(admin)
3 . hoc的缺點
下面我們來看看hoc的缺點：
（1）難以溯源，且存在屬性覆蓋問題
如果原始元件a，先後通過工廠函式1，工廠函式2，工廠函式3….構造，最後生成了元件b，我們知道元件b中有很多與a元件不同的props，但是我們僅僅通過元件b，並不能知道哪個元件來自於哪個工廠函式。同時，如果有2個工廠函式同時修改了元件a的某個同名屬性，那麼會有屬性覆蓋的問題，會使得前乙個工廠函式的修改結果失效。
（2）hoc是靜態構建的
所謂靜態構建，也就是說生成的是乙個新的元件，並不會馬上render，hoc元件工廠是靜態構建乙個元件，這類似於重新宣告乙個元件的部分。也就是說，hoc工廠函式裡面的宣告週期函式，也只有在新元件被渲染的時候才會執行。
（3）會產生無用的空元件
3 . render props
class
catextends
react.component } />
);}}
class
mouse
extends
react.component ;
} handlemousemove(event) );
} render() } onmousemove=>
div>
);}}
class
mousetracker
extends
react.component />
div>
);}}
class mouse extends react.component
...}......
( )}/>
精簡來說: 就是父元件可以將自己的state傳遞給子元件，而子元件可以根據父元件的state物件，來進行render。
這樣做的好處是：
（1）不用擔心props的命名問題
（2）可以溯源，子元件的props一定是來自於直接父元件
（3）是動態構建的。
react中關於render渲染次數的效能優化
在普通元件裡面可以使用shouldcomponentupdate鉤子函式提公升react效能。nextprops,nextstate 在內部可以判斷元件外部接受的最新屬性與之前的屬性是否一致，從而約束render重新整理的時機。只要結果返回true，render就會立馬執行渲染更新，返回false就...
React中render內不能直接使用物件解決方法
報錯資訊當時沒記下來，只記得情景。業務 不好貼上，直接寫幾個demo值，沒加樣式等，簡單模擬。食物種類 div 蘋果種類 label span div 牛奶種類 label span div 橘子種類 label span div div export default demo這麼寫會報錯，food...
React中render 下獲取子級資料錯誤問題
今天react antd mobx專案開發的時候，遇到了乙個問題，應該是生命週期渲染問題吧。具體是這樣的 位於render 中，這裡假定我要獲取data.questionnaiteproblemlist下的第一項的id。data是獲取到的資料物件，其中包含乙個物件陣列questionnairepro...