推荐几款React性能优化工具

ProfilerCodeSandBox可以去https://codesandbox.io/s/react-profiler-example-o75nc?fontsize=14&hidenavigation=1&theme=dark在线编辑效果。Profiler是React中的一个组件，由B.Vaughn开发，可以衡量React应用程序渲染的频率和资源渲染所花费的时间。Profiler提供了一个函数属性onRender。当组件被挂载或更新时，这个函数会收到一些时间指示器。使用这些计时指标，您可以发现低效代码。importReact,{Profiler}from'react';...id用于标识对应的Profiler组件，onRenderfunction会在组件挂载或更新时执行，其参数结构如下：,startTime,commitTime,})}id组件id;阶段执行阶段，挂载或更新；actualDurationProfiler和子组件渲染当前更新所花费的时间，该值大于第一次挂载时更新阶段的值；baseDuration子组件lastrendered持续时间startTime开始渲染当前更新的时间戳commitTimeReact提交当前更新的时间戳这些数据可以帮助我们分析组件运行的效率，找到性能瓶颈。ReactDevelopertoolsReactDevelopertools是React官方团队发布的一款浏览器插件，功能非常强大。我要介绍的是亮点更新的功能。该工具对于检测组件的重复渲染非常有效。他可以用不同的颜色来标识组件的边框。颜色越黄，组件被重复渲染的次数越多。如果你有一个像下面这样的组件树：如果Main组件被重新渲染，那么封装Counter和Count组件的边界周围会出现一个边框，以指示重新渲染。我们激活这个功能后，打开和关闭ReactJS官网右侧的菜单，会出现一个边框提示：Howtoactivatethisfeature?找到调试工具的Components栏，点击右上角的小齿轮，然后在弹出的窗口中勾选Highlightupdateswhencomponentsrender。边框的类型取决于重复渲染的程度，重复渲染越多，颜色越深。|绿色-低频更新|蓝色-正常频率更新vRed-高频更新通过使用这个工具，我们可以很容易地通过边框颜色找到存在性能问题的组件，并进行相应的优化。why-did-you-renderhttps://github.com/welldone-software/why-did-you-render，这个工具是由WelldoneSoftware开发的，用于反馈组件的重复渲染。它将区分组件的道具。如果组件重新渲染，但是props没有变化，它会在命令行提示你props没有变化。重复渲染在小型应用中可能影响不大，但在较大的项目中肯定会有影响。该工具嵌入在React组件的生命周期中，因此它可以在组件重新渲染时比较props是否发生了变化。使用方法很简单，先安装npminstall@welldone-software/why-did-you-render--save然后注册一次：whyDidYouRender(React,{trackAllPureComponents:true});然后是类组件：classCounterextendsReact.Component{staticwhyDidYouRender=true;render(){//...}}对于函数组件：functionCounter(){return(//...)}Counter.whyDidYouRender=true;下面是一个完整的例子，每次setState,style={{width:"100%"}}都是一个新的值，所以会触发比较。从“反应”导入反应；import"./styles.css";constwhyDidYouRender=require("@welldone-software/why-did-you-render");whyDidYouRender(React,{trackAllPureComponents:true});exportdefaultclassAppextendsReact.Component{constructor(){super();this.state={count:1};}render(){return(this.setState({count:this.state.count+1})}>添加

{this.state.count}