简介
@welldone-software/why-did-you-render 是一款用于识别 React 组件不必要渲染的 npm 包。它可以在你的开发环境中找出组件渲染原因并提供调试信息。这个包可以让你更好地优化 React 应用程序性能，避免因不必要的组件渲染导致的不必要的重新渲染。
原理
当 React 组件的 state 或 props 发生改变时，React 引擎会重新渲染该组件。有时，React 组件在其 state 或 props 没有改变的情况下也会重新渲染。这通常是因为组件使用了一些不稳定的函数或对象（如匿名函数或对象字面量）或者因为组件没有使用 shouldComponentUpdate 方法或 PureComponent 组件。
@welldone-software/why-did-you-render 通过修改 React 引擎源代码（只在开发模式下），记录组件渲染信息并报告何时出现不必要的渲染。
使用
安装
在项目中使用以下命令安装 @welldone-software/why-did-you-render：
npm i -D @welldone-software/why-did-you-render
引入
在项目中的入口文件中引入 @welldone-software/why-did-you-render：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ --- ---- -------- -- --------------------- --- ------------- - ----- - --------------- - - ------------------------------------------------- ----------------------- - -------------------- --- ---------------------------------
用法
@welldone-software/why-did-you-render 提供的接口是名为 whyDidYouRender 的函数。此函数接受两个参数：
React: React 引擎。options: 一个对象，可以包含以下属性：trackAllPureComponents: 是否要跟踪所有 PureComponent 组件的渲染。_consoleError: 是否要使用 console.error 输出调试信息。
if (process.env.NODE_ENV !== 'production') {
const { whyDidYouRender } = require('@welldone-software/why-did-you-render');
whyDidYouRender(React, {
trackAllPureComponents: true,
_consoleError: true
});
}看结果
现在你可以打开你的应用程序并调试。当应用程序中的某个组件出现不必要的渲染时，@welldone-software/why-did-you-render 会在浏览器控制台显示一条警告消息。
示例
下面是一个简单的 App 组件，可以演示如何使用 @welldone-software/why-did-you-render：
-- -------------------- ---- -------
------ ----- ---- --------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
------ --
---------- -----
--
---------------- - ----------------------------
----------------- - -----------------------------
-
------------- -
---------------
------ ---------------- - --
---
-
-------------- -
---------------
---------- ----------------------
---
-
-------- -
------ -
-----
------- -------------------------------- -- -----------------------------
--- --
------- ---------------------------------- -------------------
--------------------- - ----------- ------------ - -----
------
--
-
-
------ ------- ----你可以通过向控制台输出详细的渲染信息来调试 App 组件。当 App 组件中的子组件渲染时，它会显示更多的详细信息以及导致重新渲染的原因：
App re-rendered because: State: count->1, isVisible->false
结论
@welldone-software/why-did-you-render 可以让你更好地了解组件在何时重新渲染，通过优化组件更新，可以提高 React 应用程序的性能。为了满足生产环境的需求，你可以将其添加到你的 CI/CD 流程中，确保只有在开发模式下调试。如果你经常面临不必要的组件渲染问题，@welldone-software/why-did-you-render 是一款值得一试的 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/welldone-software-why-did-you-render