React 组件性能优化

目录

扩展学习资料

React组件性能探寻【性能分析工具】

React Profiler API

React Devtools

React组件性能优化

PureComponent

memo

自定义事件销毁

Web Workers API


扩展学习资料

React Profiler 博客

https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html

英文

理解火焰图

Flame Graphs

React Profiler API

https://reactjs.org/docs/profiler.html#gatsby-focus-wrapper

React 优化手段

https://www.codementor.io/blog/react-optimization-5wiwjnf9hj

React组件性能探寻【性能分析工具】

web性能整体分析工具

Reacr Devtools

依赖条件(最低要求)

  • React v16.5.0+(开发者模式)
  • React Developer Tools v3.3.2+

React Profiler API

不推荐,因为会产生额外的开销

 

// 1.Profiler在'react'包中。
// onRender回调函数返回一系列信息。
export default function App(): ReactElement {
    const OnRender: (...params: any)=>void=(...params)=>{
        console.log(params)    
        params = {
            id, // 发生提交的 Profiler 树的 “id”
            phase, // "mount" (如果组件树刚加载) 或者 "update" (如果它重渲染了)之一
            actualDuration, // 本次更新 committed 花费的渲染时间
            baseDuration, // 估计不使用 memoization 的情况下渲染整棵子树需要的时间
            startTime, // 本次更新中 React 开始渲染的时间
            commitTime, // 本次更新中 React committed 的时间
            interactions // 属于本次更新的 interactions 的集合
        }
    }
    function onRenderCallback(
      
    ) {
      // 合计或记录渲染时间。。。
    }
    return (
        
        	
         		
        	
            
    )
}

React Devtools

React 组件性能优化_第1张图片

// 追踪用户行为
// 安装schedule包,yarn add schedule
// 在需要追踪的地方嵌入代码
import { unstable_track as track } from "schedule/track"
export default class Home extends Component {
    handleSubmit = e => {
        const text = e.target.value.trim()
        if (e.which === 13) {
            track("Add Tode", performance.now(), () => {
            	this.props.onSave(text)
             	if(this.props.newTode) {
                  this.setState({text:})              
              }                
            })        
        }    
    }
}

 React 组件性能优化_第2张图片

React组件性能优化

PureComponent

  • Class组件优化工具;
  • 实质是在shouldComponentUpdate方法中进行浅比较

memo

  • 函数组件优化的工具;
  • 是一个高阶函数,在其内部进行类似shouldComponentUpdate的比较;
  • 可以指定比较函数。

自定义事件销毁

  • 原生事件销毁->通常在ComponentDidMount中注册一些原生事件(如scroll,resize)
  • 定时器类销毁->开发中常见的定时器类操作

需在合适的位置(componentWillUnmount)进行销毁,否则易造成内存溢出

Web Workers API

  • Web Workers 使用后,Web应用程序可以:
    • 在独立于主线程的后台线程中运行一个脚本;
    • 在独立线程中执行费时的处理任务,避免一些耗时的任务阻断用户体验。
  • 通信机制 Web Workers执行完耗时任务后与主线程的通信--postMessage

不能操作DOM

 

你可能感兴趣的:(React相关,react.js,前端,前端框架)