优化目标:减少组件不必要的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库