React实现的应用中如果出现卡顿有哪些可以考虑的优化方案

React实现的应用中如果出现卡顿有哪些可以考虑的优化方案

1、增加shouldComponentUpdate钩子对新旧 props进行比较,如果值相同则阻止更新避免不必要的渲染,或者使用 PureComponent替代 Component,其内部已经封装了 shouldComponentUpdate的浅比较逻辑。

2、对于列表或其他结构相同的节点为其每一项增加唯一的key属性,以方便 React的diff算法中对该节点的复用,减少节点的创建和删除操作

3、render函数中减少类似写法

render(){
    
    
   return (
      <div>
          <button onclick={
    
     () =>{
    
     doSomething() }}>Button</button>
      </div>
      
   )
}

因为,每次调用 render函数重新渲染时均会创建一个新的函数,即使内容没有发生任何变化,也会导致节点没必要的重渲染。
建议将函数保存到组件的成员对象中,这样只会创建一次

4、组件的props如果需要经过一系列运算后才能拿到最终结果,则可以考虑使用 reselect 库对结果进行缓存,如果 props值未发生变化则结果直接从缓存中拿,避免高昂的运算代价

5、webpack-bundle-analyzer 分析当前页面的依赖包是否存在不合理性,如果存在找到不合理点并进行优化

猜你喜欢

转载自blog.csdn.net/yiyueqinghui/article/details/121373467