如果你是一名前端开发人员，并且使用的是 React 框架，那么你一定会遇到一个问题：React 组件渲染时会产生大量的重渲染，导致应用的性能下降明显。
在面对这个问题时，我们需要使用工具对组件进行优化。在这方面，why-did-you-update-immutable 是一个非常好用的 npm 包，可以帮助我们快速找到有问题的组件，从而进行定位修复。
why-did-you-update-immutable 概述
why-did-you-update-immutable 可以帮助我们快速找到应用中哪些组件的渲染没有进行优化，从而帮我们定位问题解决性能问题。
why-did-you-update-immutable 的特点包括:
- 提供一个独立的日志记录窗口，用于定位和查看组件的更新记录。
- 针对 Immutable.js，可以检测哪些组件没有对 Immutable.js 进行合适的使用，从而引发了额外的渲染。
- 明确告诉我们哪些组件在做多余的渲染，以及每次渲染的实际原因。
why-did-you-update-immutable 安装
安装 why-did-you-update-immutable 很简单，只需在项目目录下终端运行以下命令：
npm install why-did-you-update-immutable --save-dev
why-did-you-update-immutable 使用
安装后，需要在入口文件引入 why-did-you-update-immutable：
import React from 'react';
import ReactDOM from 'react-dom';
import { whyDidYouUpdate } from 'why-did-you-update-immutable';
// 安装 why-did-you-update-immutable
whyDidYouUpdate(React);在引入之后，项目启动时就可以看到控制台的日志输出了。输出的日志可以帮助我们快速找到哪些组件在做了多余的渲染，从而进行效率的优化。
why-did-you-update-immutable 示例
下面是一个 why-did-you-update-immutable 的使用示例。我们可以从控制台区看到日志输出了两次，说明我们的组件进行了两次渲染，其中一次是多余的渲染。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - --- - ---- ------------
------ - --------------- - ---- -------------------------------
----- ------- ------- --------- -
----- - -
----- -----
------ ----------------
-------- ----- ----- ----
---
--
----------- - -- -- -
----------------------- -- -
------ -
----- ----------------------------- ------ ----- -----
--
---
--
-------- -
------ -
---- ---------------------------
---------------------------------------
---------------------------------------
------
--
-
-
-- -- ----------------------------
-----------------------
-- ----
------------------------ --- ---------------------------------
结语
通过使用 why-did-you-update-immutable，我们可以找出哪些组件在多余地渲染，从而进行性能的优化。当然，它并不是万能的，因此针对其他性能优化技巧，我们也需要进行学习和掌握，才能让我们的 React 应用更具效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671098dd3466f61ffdfea