在 React 应用开发过程中，我们很容易写出一些不必要的渲染，这些渲染会带来性能问题，特别是复杂应用的情况下。为了解决这个问题，我们可以使用一款称为 unnecessary-react-render 的 npm 包，这个包能够帮助你检测并消除掉无用的渲染，提升你的应用性能。
安装
你可以使用以下命令来安装 unnecessary-react-render 包:
npm install --save-dev unnecessary-react-render
使用
在开发环境下使用
在开发环境下，我们可以使用 React.addons.Perf 来监测组件的渲染是否有效。
首先，在你的 React 应用入口文件（例如 index.js）中添加以下代码，这个代码会在开发环境下自动收集出所有组件的渲染信息：
import { whyDidYouUpdate } from 'why-did-you-update';
if (process.env.NODE_ENV === 'development') {
whyDidYouUpdate(React);
}接下来，在你的浏览器中打开你的应用，并在你的 DevTools 中检查控制台聚着的 why did you render。它们将会告诉你哪些组件渲染的次数过多，哪些可以被优化。
在生产环境下使用
在生产环境下，我们可以使用另一个库 @welldone-software/why-did-you-render，它可以通过覆盖 React 渲染函数来分析你的应用。
首先，在你的应用入口文件（例如 index.js）中导入 @welldone-software/why-did-you-render 和 react-dom，并将其与 React 一起传入使用：
import React from 'react';
import ReactDOM from 'react-dom';
import whyDidYouRender from '@welldone-software/why-did-you-render';
whyDidYouRender(React, { trackAllPureComponents: true });
ReactDOM.render(<App />, document.getElementById('root'));然后，在你的控制台中搜索所有 WHY-DID-YOU-RENDER 文本，它将会显示你的组件渲染的原因。
示范
下面是一个简单的组件 App：
-- -------------------- ---- -------
----- --- ------- --------------- -
----- - -
------ --
--
----------- - -- -- -
--------------- ------ ---------------- - - ---
--
-------- -
---------------- -- -----------
------ -
-----
--------- ----------------------
------- ---------------------------------------------
------
--
-
-通过使用 unnecessary-react-render，我们可以优化这个组件的渲染。例如，在这里，每次组件更新时，我们的控制台会记录一条日志。然而，如果我们只想在 count 状态发生变化时才记录日志，我们就可以使用 pure 组件同时使用 unnecessary-react-render。以下是修改后的 App 组件：
import { logRenders } from 'unnecessary-react-render';
class App extends React.PureComponent {
...
}
export default logRenders(App);在这里，我们使用了 logRenders 高阶组件包裹了我们的 App 组件，这会将我们的日志信息记录在控制台上。通过使用 PureComponent，我们告诉 React 我们的组件只在状态或属性改变时才需要更新。这样，当我们的 count 状态改变时，我们的组件才会重新渲染，并记录日志信息。
结论
通过使用 unnecessary-react-render，我们可以消除冗余的组件渲染，从而提升 React 应用的性能。虽然使用此包会增加代码的复杂度，但在处理大型应用时，它会是一个非常有用的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005678d81e8991b448e3ebd