1.减少不必要的渲染
a.shouldComponentUpdate
shouldComponentUpdate
b.Pure Component
Pure Component 又被称为 纯组建
内置了 shouldComponentUpdate
这两种方法很类似原理从源码里面也可以找到
接受两个参数上一个状态的props和下一个状态的state
返回的结果只能是个boolean值 true可以继续，false不能继续
如果shouldUpdate是false的话
直接bailOut
后面的更新钩子和协调的逻辑都不会走
父组件调用changeNothing方法，完全没有改变name
子组件在render里面console来看看如果继承自Component的时候
不改变Props值会不会重新render
那是肯定的，那么让我们继承自PureComponent
pureComponent能够避免这个问题
c.React.memo
React.memo 相当于一个functional组建版本的纯组建
会比较prevProp（这里的preProps是上次存下来的从memoizedProps里面拿的）和nextProps
以及ref是否相等
如果都相等的话，直接bailOut
接下来的updateFunctionComponent不会走
使用方法十分简单：
React.memo()可接受2个参数
第一个参数为纯函数的组件
第二个参数用于对比props控制是否刷新
与shouldComponentUpdate()功能类似,flag相反
false会刷新 true不会刷新
2.数据缓存
useMemo 缓存参数
根据原码我们可以看出来接受两个参数一个是箭头函数nextCreate去返回一个函数
另外一个是deps是dependence的缩写，这个函数执行与否会拿上一个存在memeoizedState里面的preState和nextDeps进行比较
如果没有变化则不执行，我们把之前的代码改造成functional组件
父亲组件
子组件
我们可以试验出来即使点击setContext的时候changeName也是会被调用的，虽然这个方法不需要调用
接下来我们用useMemo这个钩子来优化一下,父组件不用动，子组建做一下更改
解决了该问题
useCallback 缓存函数
两者都是比较依赖项是否发生变化
发生变化存储到memoizedState里面
没发生变化直接返回上一次的参数值
不同点是useCallBack是返回函数
useMemo是返回值
3.函数尽量不要使用内联形式
源码里面会进行全等比较，object或者function肯定是不相等的
4.Router中内联函数使用render或者children，不要使用component
当你用component的时候Router会制定组件和React.createElement创建新的React element
每次执行路由的时候都会创造一个新的
不停的挂在卸载，非常影响性能
5.context不要滥用
context是高阶api，发生变化，所有跟它有关的子组建都要重新渲染
总结：减少计算，渲染和不必要的请求
