阅读 137

React项目性能优化

优化目标:减少组件不必要的diff和重渲染


  • 使用mobx observer 组件状态发生改变,以该组件为根节点的组件树上的所有子孙组件都会进入diff,使用了oberser的组件只有在状态改变时才会diff,否则跳过diff
 @observer Component or observer(Component)
复制代码
  • 函数组件内联函数props使用useCallback, 要合理使用 参考文章
<div>
    <ClickBtn
        onClick={useCallback(() => {
            console.log("parent");
            setCount((val) => val + 1);
        }, [])}
    />
</div>
复制代码
  • 函数组件使用React.memo(Component, areEqual)并设置props比较方法来减少不必要的渲染
  • useMemo 细粒度优化,对于某些高开销的计算,设置缓存,只有在依赖发生变化时才会重新计算,比如项目中多层级树的数据初始化
  • pureComponent
  • shouldComponentUpdate()

通用优化 参考文章

  • 懒加载(组件内懒加载Suspense, 路由懒加载)
  • 懒渲染
  • 虚拟列表(长列表优化)
  • 缓存优化
  • deBounce, throttle(使用社区钩子 useDebounce useThrottle) 阿里开源的hooks库
文章分类
前端
文章标签