高性能 React: 3 个提升 APP 速度的新工具

正文

请到「今天看啥」查看全文

Demo #1

为了好玩，我在 todomvc APP 增加了一些严重的性能问题。你可以在 https://perf-demo.firebaseapp.com/?react_perf 试试。

要查看 timeline，打开 Chrome 开发工具，转到“Performance”选项，然后单击“Record”。再在App里添加一些 TODOs ，停止记录并查看timeline。你可以看看到底是哪些组件引起了性能问题 ：）

工具 2: why-did-you-update

影响 React 中性能的最常见问题之一是不必要的渲染循环。默认情况下，React 组件将在父类渲染时重新渲染，即使他们的 props 没有改变。

例如，如果我有一个这样的简单组件：

有一个这样的父类组件：

无论何时父组件被渲染时，DumbComponent将被重新渲染，尽管其props并没有改变。

通常，如果渲染执行完成，并且虚拟DOM并没有改动，那么它是一个无用的渲染循环，因为渲染方法应该是纯的，而且没有任何副作用的。在一个大规模的React应用程序中，检测发生这种情况的发生的位置可能很棘手，但幸运的是，我们有一个可以帮助检测的工具！

使用 why-did-you-update

why-did-you-update 是一个挂钩到 React 检测潜在的不必要的组件渲染的库。即使props 没有改变，当一个组件的渲染方法被调用时它也会进行检测。

安装程序：

• npm 安装：npm i --save-dev why-did-you-update

• 在应用程序的任何地方添加此代码：

注：该工具用于本地开发很好，但要确保生产环境下被禁用，因为它会让你的应用变慢。

请到「今天看啥」查看全文