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 (
        <Profiler id="router" onRender={onRenderCallback}>
        	<BrowserRouter>
         		<Route path="/" component={Home} />
        	</BrowserRouter>
        </Profiler>    
    )
}

React Devtools

// 追踪用户行为
// 安装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组件性能优化

PureComponent

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

memo

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

自定义事件销毁

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

需在合适的位置（componentWillUnmount）进行销毁，否则易造成内存溢出

Web Workers API

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

不能操作DOM