react的性能优化

1.shoudcomponentupdate 规避繁琐的更新逻辑，默认返回true 如果父元素数据更新，子元素B不需要更新则在b组件中调用shoudcomponentupdate让它返回false即可阻止render的渲染。

2.pureComponent+Immutable.js减少render的渲染，pureComponent是更新前后的props和state进行浅比较，结果决定是否组件需要渲染。这个只是比较浅层比较，只比较简单数据的值，不能比较引用地址，所以复杂数据比较需要用的Immutable.js去判断。

3.React.memo与usememo，通过缓函数式组件的性优化，React.memo控制是否需要重新渲染一个组件，而usememo是控制组件里面是否重新执行某一段逻辑

• 代码分割
• React.memo()、shouldComponentUpdate()等防止不必要的渲染
• Fragments 避免额外标记
• 错误边界避免组件在出错时破坏整个应用
• 避免不必要的渲染，shouldComponentUpdate、React.memo、React.useMemo、React.useCallback。
• 代码分割，React.lazy 动态加载组件
• 使用 react-query，对请求响应进行缓存、重发等，避免多次请求，减少网络 IO 消耗及优化渲染次数
• 使用 useDebounce，对值及事件处理函数进行防抖，避免状态频繁变动，优化渲染次数
• 使用 useImmer