江苏龙网

  1. 主页 > 生活百科 > >

推荐几个 React 性能优化工具

react

本文翻译自 5 Recommended Tools for Optimizing Performance in ReactJS，作者 Chidume Nnamdi，有较大的删改 。
Profiler
推荐几个 React 性能优化工具

文章插图
 
Code SandBox
可以前往
https://codesandbox.io/s/react-profiler-example-o75nc?fontsize=14&hidenavigation=1&theme=dark 在线编辑效果 。
Profiler 是 React 中的一个组件，由 B. Vaughn 开发，它可以测量 React 应用渲染的频率和渲染所花费的时间资源 。Profiler 提供一个函数属性 onRender，当组件 mount 或者 update 的时候，这个函数会接受到一些时间指标 。用这些时间指标你就可以发现效率低下的代码了 。
import React, { Profiler } from 'react';...<Profiler id="Counter1" onRender={this.callback1(this)}>  <Counter1 /></Profiler>id 用来标识对应的 Profiler 组件，onRender 函数会在组件 mount 或者 update 的时候执行，它的参数结构如下：
function onRenderCallback(  id,  phase,  actualDuration,   baseDuration,  startTime,  commitTime,) {  console.log('onRenderCallback', {    id,    phase,    actualDuration,     baseDuration,    startTime,    commitTime,  })}
  • id 组件 id；
  • phase 执行阶段，mount 或者 update；
  • actualDuration Profiler 和子组件渲染当前的更新所花费的时间，这个值在首次 mount 的时候比 update 阶段的值大；
  • baseDuration 子组件最近一次渲染所持续的时长
  • startTime 开始渲染当前的更新的时间戳
  • commitTime React 提交当前更新的时间戳
这些数据可以帮助我们分析组件运行的效率，找到性能瓶颈 。
React Developer tools
推荐几个 React 性能优化工具

文章插图
 
React Developer tools 是 React 官方团队发布的一个浏览器插件，功能十分强大 。我要介绍的是 Highlight Update 这个功能 。这个工具用来检测组件重复渲染非常有效 。他可以用不同的颜色来标识组件的边框，颜色越黄表示这个组件重复渲染的次数越多 。
如果你有一个组件树像下面这样：
推荐几个 React 性能优化工具

文章插图
 
如果 Main 组件重复渲染了，那么封装 Counter 和 Count 组件的边界就会出现一个边框表示重复渲染 。
我们激活这个特性之后,在 ReactJS 官网开启关闭右侧的菜单，会出现边框提示：
推荐几个 React 性能优化工具

文章插图
 
如何激活这个特性呢？找到调试工具的 Components 一栏，点击右上角的小齿轮，再选中弹窗中的 Highlight updates when components render.
推荐几个 React 性能优化工具

文章插图
 
边框的类型取决于重复渲染的程度，重复渲染越多，颜色越深 。
|    绿色 - 低频次更新|    蓝色 - 一般频次更新v    红色 - 高频次更新通过使用这个工具，我们可以通过边框颜色来轻易找到有性能问题的组件，并对它做针对性的优化 。
why-did-you-render
推荐几个 React 性能优化工具

文章插图
 
https://github.com/welldone-software/why-did-you-render,这个工具是由 Welldone Software 开发的，用来对组件重复渲染给出反馈 。
它会对组件的 props 做 diff，如果组件重新渲染了，但是 props 并没改变，它会在命令行提醒你 props 并没有变化 。
重复渲染在小型应用中影响可能不大，但是在大型项目中将肯定会有影响 。
这个工具嵌入到了 React 组件的生命周期中，所以他能在组件重新渲染时比对 props 是否变化 。
使用方法很简单，先安装
npm install @welldone-software/why-did-you-render --save然后注册一次：
whyDidYouRender(React, {  trackAllPureComponents: true});然后对 class component：
class Counter extends React.Component {  static whyDidYouRender = true;  render() {   //...  }}对函数组件：
function Counter() {  return(   // ...  )}Counter.whyDidYouRender = true;


推荐阅读


上一篇：推荐常用的5款代码比较工具「值得收藏」

下一篇：服务器海量TCP连接如何高效保活？