如果只更改了組件的一部分，React是否呈現WHOLE組件？

Question

我想知道如果我將大型組件拆分成許多非常小的組件，我的代碼是否會更高性能，以便應用程序一次只渲染DOM的較小部分。

但我覺得React可能已經只渲染了應用程序中發生變化的部分，無論該組件是巨大還是微小。 因此，如果改變了一個巨大組件的一小部分，React將只重新渲染組件的那一小部分，而不是整個組件。

我在第二段中的斷言是正確的，還是通過將一個大的組件分成許多小組件可以獲得更好的性能？ 我在這個問題中包含了ReactJS和React Native。 我認為它們在這方面是相同的，但如果它們不同我想知道。

Answer 1

我一直沉浸在React中，所以我希望我的理解是有效的。 React使用虛擬DOM來優化實際DOM的呈現。 本質上是差異化兩個，只有差異修補DOM。 所以我相信你的斷言是正確的。

關於拆分大型組件，我認為這完全取決於狀態和組件的外觀。 這些是我會問自己的問題：是否有多個UI單元可以單獨使用並封裝到組件中？ 我的組件實際上有多少受到狀態變化的影響？

我的理解是，除非狀態發生變化，否則組件不會重新渲染。 React提供了一個生命周期鈎子shouldComponentUpdate ，它不會影響它的子組件，因此開發人員可以控制組件在狀態更改時的呈現。 因此，如果有許多JSX元素沒有改變，最好將受狀態變化影響的元素提取到組件中 。 我相信，通過不使用不會更改的項目進行虛擬DOM更新，我們可以獲得性能。

在寫這個答案的時候，我用Google搜索並發現了這篇博文： React很慢，React很快：在實踐中優化React Apps 。 我沒有使用那里提到的工具，但我很快就會嘗試一下。 我相信這篇文章可以解釋你問題的第二部分。