React 啥时候重新渲染子组件？

Posted 2023-02-24

【中文标题】React 啥时候重新渲染子组件？

【英文标题】：When does React re-render child component?React 什么时候重新渲染子组件？

【发布时间】：2020-08-14 19:59:10

【问题描述】：

我知道 React 会在 state 或 props 改变（或者当我们强制组件重新渲染时）执行重新渲染。我也知道 React 在重新渲染时会重新渲染组件的子组件。

我注意到 React 会重新渲染子组件，即使它的 props（子 props）没有改变，所以当父组件传递与之前相同的 props 时。

这是为什么呢？ React 是否会重新渲染完全无状态和无属性的子组件？

【参考方案1】：

为什么 React 默认这样做是因为它不知道当状态相同时不重新渲染，除非你在这些组件上使用 reselect 之类的包来记忆。

重新选择可以帮助您仅在传递的状态与当前状态不同时重新渲染组件。

【讨论】：

这里使用 PureComponent 或 React.Memo 也是一种选择吗？可以代替reselect package使用吗？

我不知道其他包，因为我只使用过Reselect。但只要它们都提供记忆功能，它就可以工作。只需阅读那里的文档即可了解它们提供的内容以及如何集成它。

PureComponent 和 React.Memo 是 React 的内置组件/方法。

【参考方案2】：

如果您不希望子组件重新渲染，您应该使用React.memo、PureComponent 或shouldComponentUpdate 生命周期挂钩。

这三个选项中的每一个都告诉 React，如果组件的输入（道具）没有改变，那么重新渲染组件就没有意义，因为组件不会改变。

如果您使用类组件，PureComponent 或 shouldComponentUpdate 应该是您的首选。本质上，PureComponent 只是为你实现了 shouldComponentUpdate。

React.memo 应该是你使用函数组件时的首选。 React.memo 有第二个参数，用于确定相等性的函数，其作用类似于 shouldComponentUpdate。

在使用 React 组件时，您应该绝对使用这三个选项之一而不是重新选择。 Reselect 用于记忆 redux 中的选择器（或只是一般的函数调用）。它不是用来记忆反应组件的。

我通常使用 reselect 来使组件的 props 稳定（使用 connect 时）并防止在每次渲染时重新计算复杂数据。

【讨论】：

非常感谢，现在说得通了。

您好，我还有一个问题，与当前问题无关。因此，当 React 首先在每个组件中调用构造函数然后将其挂载时，例如，当我们更改页面（使用 react-router）或只是单击某项以使我们的组件不可见且不在屏幕上时。再回来看看我们的组件，我们又挂载了这个组件，但是又是不是又调用了一个构造函数呢？

是的，任何时候从页面中删除组件，在添加回页面时都必须重新安装组件。每当安装组件时，整个生命周期都会重新开始，包括构造函数和 componentDidMount。

非常感谢，真的很有帮助。

来自 React 文档：“这个 [React.memo ] 方法仅作为性能优化存在。不要依赖它来“阻止”渲染，因为这会导致错误。”。基于此，我不确定您应该使用 React.memo，还是我遗漏了什么？