第
React?组件性能最佳优化实践分享
目录React组件性能优化最佳实践组件卸载前进行清理操作类组件使用纯组件PureComponent什么是纯组件什么是浅层比较shouldComponentUpdate纯函数组件使用React.memo优化性能memo基本使用memo传递比较逻辑使用组件懒加载路由组件懒加载根据条件进行组件懒加载（适用于组件不会随条件频繁切换）使用Fragment避免额外标记不要使用内联函数定义在构造函数中进行函数this绑定类组件中的箭头函数优化条件渲染避免使用内联样式属性避免重复无限渲染避免数据结构突变
React组件性能优化最佳实践
React组件性能优化的核心是减少渲染真实DOM节点的频率，减少VirtualDOM比对的频率。如果子组件未发生数据改变不渲染子组件。
组件卸载前进行清理操作
以下代码在组件挂载时会创建一个interval组件销毁后清除定时器，间隔1秒会触发渲染count+1，组件销毁后如果不清除定时器它会一直消耗资源
importReact,{useState,useEffect}fromreact
importReactDOMfromreact-dom
constApp=()={
let[index,setIndex]=useState(0)
useEffect(()={
lettimer=setInterval(()={
setIndex(prev=prev+1)
console.log(timerisrunning...)
},1000)
return()=clearInterval(timer)
},[])
return(
button()=ReactDOM.unmountComponentAtNode(document.getElementById(root))}
{index}
/button
exportdefaultApp
每次数据更新都会触发组件重新渲染，这里的优化为：组件销毁清理定时器
类组件使用纯组件PureComponent
什么是纯组件
纯组件会对组件输入数据进行浅层比较，如果当前输入数据和上次输入数据相同，组件不会重新渲染
什么是浅层比较
比较引用数据类型在内存中的引用地址是否相同，比较基本数据类型的值是否相同。
为什么不直接进行diff操作,而是要先进行浅层比较，浅层比较难道没有性能消耗吗
和进行diff比较操作相比，浅层比较将消耗更少的性能。diff操作会重新遍历整颗virtualDOM树,而浅层比较只操作当前组件的state和props。
importReactfromreact
exportdefaultclassAppextendsReact.Component{
constructor(){
super()
this.state={name:张三}
updateName(){
setInterval(()=this.setState({name:张三}),1000)
componentDidMount(){
this.updateName()
render(){
return(
div
RegularComponentname={}/
PureChildComponentname={}/
/div
classRegularComponentextendsReact.Component{
render(){
console.log(RegularComponent)
returndiv{}/div
classPureChildComponentextendsReact.PureComponent{
render(){
console.log(PureChildComponent)
returndiv{}/div
}
组件挂载以后会有一个定时器间隔1秒设置一次name，我们可以看到RegularComponent一直在渲染，即使数据没有发生变化也会渲染。PureChildComponent只有一次渲染，因此使用纯组件会对propsstate进行进行比较，数据相同不会重新渲染。
shouldComponentU