React组件性能优化的核心是减少渲染真实DOM节点的频率，减少Virtual DOM对比频率。

当我们使用组件时候，一般为window下变量注册全局事件，以及定时器（副作用），在组件协作前要清理掉，防止组件卸载后继续执行影响应用性能。

比如当我们使用React的useEffect的hooks时候，里面创建了一个定时器，当组件消耗时候定时器是无法被关闭的。这时候可以利用useEffect的返回函数特点进行销毁定时器的监听。

代码如下：

app.js下引入一个组件Timer 和创建一个关闭它的按钮

const [falg, setFlag] = useState(true)
{ falg ? <Timer /> : null }
<button css={style} onClick={() => { setFlag((pms) => !pms ) }}>设置状态</button>

当按钮点击后关闭组件 Timer.js

import React, { useState, useEffect, useRef } from 'react'

function Timer() {
let refIndex = useRef(0)
console.log('Timer')
useEffect(() => {
console.log('Timer-useEffect')
let timer = setInterval(() => {
// setIndex(prev => prev + 1)
refIndex.current ++
console.log('定时器在运行', refIndex)
}, 1000)
return () => {
clearInterval(timer)
}
}, [])

return (
<div>Timer-children</div>
)
}

export default Timer

可以看到当点击停止后定时器不在运行了。

以上就是react性能优化之useEffect清理副作用全部内容,感谢大家支持自学php网。