react16 使用hooks提高性能的优化 useMemo和useCallback的使用

useMemo 和 useCallback 接收的参数都是一样,第一个参数为要执行的回调函数 第二个参数为要依赖的状态，react会监听这些状态当这些状态被更新会重新调用回调函数

共同作用：
当组件第一次渲染，会首次执行传入的回调的函数，接下来如果我们的组件树发生重新渲染，不会重新执行该函数而是直接取缓存的结果，仅仅只有依赖的状态发生改变才会重新调用回调函数计算缓存的结果。
1.仅仅 依赖数据 发生变化, 才会重新计算结果，也就是起到缓存的作用。

两者区别：
1.useMemo 计算结果是 return 回来的值, 用于 缓存计算结果。
2.useCallback 计算结果是 函数, 用于 缓存函数 ，需要缓存的函数，因为函数式组件每次自身state变化就会引起自身和全部使用的子组件进行重新调用，此时缓存起来就可以避免子组件被重新渲染，提高性能，减少资源浪费。

总结：
使用原因： 子组件状态没有变化也会重复渲染，为了减少重复渲染组件因为减少渲染次数就能提高性能。
useMemo 缓存数据；
useCallback 缓存函数；

参考阅读：
https://www.digitalocean.com/community/tutorial_series/how-to-code-in-react-js
https://mp.weixin.qq.com/s/5L4FlnN8coR0WSH966V0EQ