javascript - ReactJS，渲染方法性能影响

Question

我是 React 世界的新手，在为我的公司开发基于 React 的项目时，我注意到所有组件的编写都没有考虑到特定组件何时应该重新渲染。

项目中的所有组件都是类组件，并且在项目中我找不到对shouldComponentUpdate()方法的单个引用，据我了解，这意味着每次 x 组件的道具/状态发生变化时，都会重新渲染与所有相关的子组件，对吗？或者 React 仍然足够聪明，不会在 -> state/props 更改对组件输出没有影响时重新渲染所有内容？

这让我感到困扰，好像我理解正确这可能会导致整个网络应用程序的性能非常糟糕，我想确定我是否可以向我的老板提出这个问题..

标签： javascriptreactjs

Answer 1

React 一直在努力摆脱基于类的组件上的生命周期方法，并鼓励使用函数式组件，因为生命周期方法是“错误陷阱”。

使用componentDidUpdate和shouldComponentUpdate鼓励人们使用它们并编写难以测试的复杂条件并导致更难调试边缘情况的能力。

在我看来，您在使用的代码库中找不到任何这些方法，这是一件好事。

回答您的问题 - 开箱即用的反应非常快。它会在更新时呈现所有内容，除非您明确告诉它不要（使用React.memo/React.PureComponentor shouldComponentUpdate），但您不应该担心它这样做的事实，除非您看到性能问题。

如果您没有看到任何性能问题，那么没有任何问题，请继续您的业务。

编辑：我还想明确一点，react 无论如何都不会在状态更新上重新渲染“一切”。这仅取决于您如何构建组件。我已经整理了一个简单的示例，该示例显示当组件更新时，react 不会在组件上调用渲染作为子组件传入：

https://stackblitz.com/edit/react-3kuxg9