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

Question

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

儿童道具示例

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

本地状态变化

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

标签： reactjs

Answer 1

在第一种情况下，您传递的childrenwhich 是组件的一部分，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