ReactJS - 父組件中`setState`的性能影響

Question

我正在使用React構建一個大型應用程序，其中共享父組件處理多個子項的所有狀態。其中一些兒童呈現超過1000種物品的清單。

我意識到，切換父級內的布爾值setState將重新呈現父級，然後再次呈現其所有子級。

我的問題是，如果沒有一個列表項到孩子的變化，那麼就重新渲染造成孩子循環並一遍建立龐大的清單 - 每父再呈現時？

虛擬DOM在此扮演什麼角色？孩子是否重新構建列表，但是DOM從不需要更新，因爲差異可以看到列表元素沒有改變？

編輯： 最後，如果是這樣的話，key屬性如何影響列表重新呈現？如果我有1000個項目都帶有唯一的密鑰，但是3個項目的密鑰是null（意味着它們具有相同的密鑰值）那麼是否會重新呈現整個列表？

Answer 1

孩子是否重新構建列表，但是DOM從不需要更新，因爲差異看到列表元素沒有更改？

是的。你可以在這裏更詳細地閱讀這個：https://facebook.github.io/react/docs/reconciliation.html

通常這個操作是如此之快，你幾乎不知道，但在某些時候diff補丁會變得很慢。翻轉一個布爾值可能不是什麼大問題，但是在60 fps下翻轉布爾值可能會導致一些結果。

通常你可以做很多聰明的事情來防止任何明顯的滯後，但實施shouldComponentUpdate總是一個選擇。

https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate

當你在那裏，閱讀的情況下約React.PureComponent這是一件你感興趣。