React实现的应用中如果出现卡顿有哪些可以考虑的优化方案
1、增加shouldComponentUpdate
钩子对新旧 props进行比较,如果值相同则阻止更新避免不必要的渲染,或者使用 PureComponent
替代 Component,其内部已经封装了 shouldComponentUpdate的浅比较逻辑。
2、对于列表或其他结构相同的节点为其每一项增加唯一的key属性
,以方便 React的diff算法中对该节点的复用,减少节点的创建和删除操作
3、render函数中减少类似写法
render(){
return (
<div>
<button onclick={
() =>{
doSomething() }}>Button</button>
</div>
)
}
因为,每次调用 render函数重新渲染时均会创建一个新的函数,即使内容没有发生任何变化,也会导致节点没必要的重渲染。
建议将函数保存到组件的成员对象中,这样只会创建一次