React 组件性能优化最佳实践
React 组件性能优化的核心是减少渲染真实 DOM 节点的频率,减少 Virtual DOM 比对的频率。如果子组件未发生数据改变不渲染子组件。
组件卸载前进行清理操作
以下代码在组件挂载时会创建一个interval组件销毁后清除定时器,间隔1秒会触发渲染count+1
,组件销毁后如果不清除定时器它会一直消耗资源
import React, {
useState, useEffect } from "react"
import ReactDOM from "react-dom"
const App = () => {
let [index, setIndex] = useState(0)
useEffect(() => {
let timer = setInterval(() => {
setIndex(prev => prev + 1)
console.log('timer is running...')
}, 1000)
return () => clearInterval(timer)
}, [])
return (
<button onClick={
() => ReactDOM.unmountComponentAtNode(document.getElementById("root"))}> {
index} </button>
)
}
export default App
每次数据更新都会触发组件重新渲染,这里的优化为:组件销毁清理定时器
类组件使用纯组件PureComponent
什么是纯组件
纯组件会对组件输入数据进行浅层比较,如果当前输入数据和上次输入数据相同,组件不会重新渲染
什么是浅层比较
比较引用数据类型在内存中的引用地址是否相同,比较基本数据类型的值是否相同。
为什么不直接进行 diff 操作, 而是要先进行浅层比较,浅层比较难道没有性能消耗吗
和进行 diff 比较操作相比,浅层比较将消耗更少的性能。diff 操作会重新遍历整颗 virtualDOM 树, 而浅层比较只操作当前组件的 state 和 props。
import React from "react"
export default class App extends React.Component {
constructor() {
super()
this.state = {
name: "张三"}
}
updateName() {
setInterval(() => this.setState({
name: "张三"}), 1000)
}
componentDidMount() {
this.updateName()
}
render() {
return (
<div>
<RegularComponent name={
this.state.name} />
<PureChildComponent name={
this.state.name} />
</div>
)
}
}
class RegularComponent extends React.Component {
render() {
console.log("RegularComponent")
return <div>{
this.props.name}</div>
}
}
class PureChildComponent extends React.PureComponent {
render() {
console.log("PureChildComponent")
return <div>{
this.props.name}</div>
}
}
组件挂载以后会有一个定时器间隔1秒设置一次name
,我们可以看到RegularComponent
一直在渲染,即使数据没有发生变化也会渲染。PureChildComponent
只有一次渲染,因此使用纯组件会对props
state
进行进行比较,数据相同不会重新渲染。
shouldComponentUpdate
纯组件只能进行浅层比较,要进行深层比较,使用 shouldComponentUpdate,它用于编写自定义比较逻辑。
返回 true 重新渲染组件,返回 false 阻止重新渲染。
函数的第一个参数为 nextProps, 第二个参数为 nextState。
import React from "react"
export default class App extends React.