反应重新渲染道具更改与本地状态更改

Question

为什么组件 Demo 不会在计数器更改时重新渲染？ 我知道 props.children 与之前的相同，但是本地状态发生了变化，因此应该重新渲染。是否以某种方式优化了更改本地状态以检测 Top 组件 的某些部分是否应该重新渲染？

Children props example

在第二个例子中它会重新渲染，这些例子之间有什么区别？

Local state change

在示例中，您可以单击按钮并在控制台中查看 Demo 是否重新渲染。

Answer 1

在第一种情况下，您传递的是 children，它是 props 的一部分，并且本质上是在每次重新渲染 Top 组件时，相同的 children 引用正在返回，因此 React 会检测到它并且不会重新渲染 Demo 组件。

在第二种情况下，React 将在内部再次执行 React.createElement(...) 以创建 Demo 组件，这是一个新的引用。

这是一个很好的台词：-

<块引用>

如果一个 React 组件在其内部返回完全相同的元素引用 像上次一样渲染输出，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 组件是您传递了对此对象的引用。 React 可以检测到与之前的版本相比没有任何变化，因此它不会重新渲染它。

当您在 <Demo /> 组件中使用名称 Top 渲染组件时，您每次都在渲染新版本的 Demo 组件。