【react】最基础的性能优化方法

引言

从React组件的方向去做最基本的新能优化，组件允许我们将UI拆分为独立可复用的代码片段并对每个片段进行构思

一 、使用shouldComponentUpdate生命周期函数 来规避子组件冗余的render更新

react 组件会根据shouldComponentUpdate 的返回值来决定是否来进行组件的更新，默认值为true
每当数据更新的时候 父组件中的子组件都会无条件的re-render
我们利用shouldComponentUpdate 生命周期函数内第一个参数和当前值进行判断，如果一样返回false取消子组件的更新。

二、PureComponentUpdate +immutable.js的方法

为什么要用这个组合：
1.shouldComponentUpdate 的缺点是一个父组件中含有许多子组件，每个都写一遍就很麻烦。所以PureComponentUpdate 解决了这一问题。它是 react 15.3 新增的一个类，它会在组件更新前自动对shouldComponentUpdate 中的新旧数据进行浅比较，从而决定是否更新组件。
2.数据类型为引用类型，如果数据类型没变，但引用变了，那么浅比较仍然会发起一次不必要的更新
3.如果 数据类型变了但是引用没变，那么浅比较会省略一次更新，造成不渲染的问题。
因为浅比较不够精准，所以我们利用immutable”持久性数据“来弥补这一缺陷。

三、函数式组件中的React.memo和usememo

React.memo是函数版的Pure/shouldComponentUpdate

usememo ：更精细化的控制某一段逻辑是否执行。