javascript - 如何检查组件 react 中浪费的渲染

Question

我正在尝试调试 React 应用程序中的性能问题，有任何方法或“开发工具”或任何手段可以检查我的组件的性能以防止浪费渲染的失败

Answer 1

您可以使用https://github.com/welldone-software/why-did-you-render ，它是why-did-you-update ( https://github.com/maicki/why-did-you-update ) 的更新版本，每当您的组件之一发生不必要的重新渲染时，它都会在您的控制台中打印警告。

为防止不必要的渲染，您可以进行的常见优化包括使用 PureComponent 而不是 Component，或者使用 React.memo 作为函数组件，以及在渲染函数之外提升样式/对象文字和函数声明，因为它们返回新引用每次。