react进阶第七讲：渲染控制
render阶段做了什么
通过React.CreateElement，生成新的state和props，得到新的element对象。接下来，会对比这一次和上一次渲染的Virtual DOM，只在真正的DOM树中修改差别的部分。
控制render的方法
主要通过两种方式：
- 从自身控制是否render。如shouldComponent和PureComponent。
- 从父组件直接隔断子组件的渲染。如通过memo，缓存element对象。
方式一：自身控制
shouldComponentUpdate(nextProps, nextState)
shouldComponentUpdate返回一个布尔值，告诉组件需不需要继续这次更新。shouldComponentUpdate返回true，则继续更新，调用render函数；返回false，则停止更新，不调用render函数。
PureComponent
当开发类组件选择了继承 PureComponent，会通过内部的shouldComponentUpdate浅比较 state 和 props 是否相等。
React.memo(Component,compare)
参数说明：
- Component是组件本身
- 第二个参数 返回 true 组件不渲染 ， 返回 false 组件重新渲染。和 shouldComponentUpdate 相反。
- 当二个参数 compare 不存在时，会用浅比较处理 props ，相当于仅比较 props 版本的 pureComponent 。
- 同样适合类组件和函数组件。
方式二：隔断自组件渲染，缓存对象
useMemo(create,deps)
- 返回一个 memoized 值。
- 第一个参数为一个函数，函数的返回值作为缓存值.
- 第二个参数为一个数组，存放当前 useMemo 的依赖项。
useMemo 会记录上一次执行 create 的返回值，并把它绑定在函数组件对应的 fiber 对象上，只要组件不销毁，缓存值就一直存在，但是 deps 中如果有一项改变，就会重新执行 create ，返回值作为新的值记录到 fiber 对象上。
useMemo应用场景
- 可以缓存 element 对象，从而达到按条件渲染组件，优化性能的作用。
- 如果组件中不期望每次 render 都重新计算一些值,可以利用 useMemo 把它缓存起来。
- 把函数和属性缓存起来, 配合hooks使用。
