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

【问题标题】：React rerender props change vs local state change反应重新渲染道具更改与本地状态更改
【发布时间】：2021-05-26 16:45:46
【问题描述】：

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

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

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

【问题讨论】：

标签： reactjs

【解决方案1】：

这是因为将children 参数传递给Top 组件是在传递对该对象的引用。 React 可以检测到与之前的版本相比没有任何变化，因此它不会重新渲染它。

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

【讨论】：

【解决方案2】：

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

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

这是一个很好的方式来记住这一点：-

如果一个 React 组件在其返回完全相同的元素引用像上次一样渲染输出，React 将跳过重新渲染那个特别的孩子

【讨论】：