useMemo
const cacheSomething = useMemo(create,deps)
create：第一个参数为一个函数，函数的返回值作为缓存值。deps： 第二个参数为一个数组，存放当前 useMemo 的依赖项，在函数组件下一次执行的时候，会对比 deps 依赖项里面的状态，是否有改变，如果有改变重新执行 create ，得到新的缓存值。cacheSomething：返回值，执行 create 的返回值。如果 deps 中有依赖项改变，返回的重新执行 create 产生的值，否则取上一次缓存值。
原理
useMemo 会记录上一次执行 create 的返回值，并把它绑定在函数组件对应的 fiber 对象上，只要组件不销毁，缓存值就一直存在，但是 deps 中如果有一项改变，就会重新执行 create ，返回值作为新的值记录到 fiber 对象上。
应用场景
- 可以缓存 element 对象，从而达到按条件渲染组件，优化性能的作用。
{ useMemo(()=> <Children number={numberA} />,[ numberA ]) } - 如果组件中不期望每次 render 都重新计算一些值,可以利用 useMemo 把它缓存起来。
- 可以把函数和属性缓存起来，作为 PureComponent 的绑定方法，或者配合其他Hooks一起使用。
useCallback 和 useMemo 有什么区别？
useCallback 接受二个参数，第一个参数就是需要缓存的函数，第二个参数为deps, deps 中依赖项改变返回新的函数。
useCallback 第一个参数就是缓存的内容，useMemo 需要执行第一个函数，返回值为缓存的内容，比起 useCallback ， useMemo 更像是缓存了一段逻辑，或者说执行这段逻辑获取的结果。那么对于缓存 element 用 useCallback 可以吗，答案是当然可以了。
shouldComponentUpdate
用法:
shouldComponentUpdate(nextProps, nextState)
返回值： 默认情况下，它返回true，如果返回false，则不会调用render()，componentWillUpdate()和componentDidUpdate()方法。
React 控制渲染，优化渲染的方式
- 缓存React.element对象
- PureComponent
- shouldComponentUpdate
- React.memo
React.memo(Component,compare)
对于渲染节流的注意点
在正常情况下，无须过分在乎 React 没有必要的渲染，但是以下几点需要特别注意，最好采用一些渲染节流的手段控制渲染：
- 第一种情况数据可视化的模块组件（展示了大量的数据），这种情况比较小心因为一次更新，可能伴随大量的 diff ，数据量越大也就越浪费性能，所以对于数据展示模块组件，有必要采取 memo ， shouldComponentUpdate 等方案控制自身组件渲染。
- 第二种情况含有大量表单的页面，React 一般会采用受控组件的模式去管理表单数据层，表单数据层完全托管于 props 或是 state ，而用户操作表单往往是频繁的，需要频繁改变数据层，所以很有可能让整个页面组件高频率 render 。
- 第三种情况就是越是靠近 app root 根组件越值得注意，根组件渲染会波及到整个组件树重新 render ，子组件 render ，一是浪费性能，二是可能执行 useEffect ，componentWillReceiveProps 等钩子，造成意想不到的情况发生。
