反應重新渲染道具更改與本地 state 更改

Question

為什么組件 Demo 不會在計數器更改時重新呈現？ 我知道props.children與以前的相同，但是本地 state 發生了變化，因此應該重新渲染。 更改本地 state 是否以某種方式優化以檢測是否應該重新渲染Top 組件的某些部分？

兒童道具示例

在第二個示例中它會重新渲染，這些示例之間有什么區別？

本地 state 更改

在示例中，您可以單擊按鈕並在控制台中查看 Demo 是否重新渲染。

Answer 1

在第一種情況下，您將傳遞作為props一部分的children項，並且基本上在每次重新渲染Top組件時，都會返回相同的children項引用，因此 React 會檢測到這一點並且不會重新渲染Demo組件。

在第二種情況下，React 將在內部再次執行React.createElement(...)以創建Demo組件，這是一個新的引用。

這是一個很好的方式來記住這一點： -

如果 React 組件在其渲染 output 中返回與上次完全相同的元素引用，React 將跳過重新渲染該特定子元素

我在這里提到了這個 - https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/#component-render-optimization-techniques

Answer 2

這是因為將children參數傳遞給Top組件是在傳遞對這個 object 的引用。 React 可以檢測到與以前的版本相比沒有任何變化，因此它不會重新渲染它。

當您在Top組件中使用名稱<Demo />渲染組件時，您每次都在渲染新版本的Demo組件。