useCallback与useMemo使用场景

疑问:为什么需要useCallback和useMemo

答: 父组件变化，会引起子组件的 re-render，为了阻止子组件不必要的 re-render，需要满足两个条件：

1、子组件用 react.memo包裹

2、子组件的属性没有发生变化。useCallback和useMemo就是为了实现函数或者对象数据重复声名导致新旧函数或者对象判定为不同属性的情况。

Code Pen示例: 

　　子组件的props是函数和obj数据的时候： codepen案例

　　子组件被react.memo包裹的时候：codepen案例

　　子组件被react.memo包裹的时候并且函数props和对象props使用useCallback和useMemo: codepen案例

大家查看案例的时候一定要看输出的日志，观察到底何时child component会re-render

疑问：父组件变化是指什么情况

答：父组件的props变化或者state变化。

 

疑问：父组件变化一定会引起子组件的re-render吗

答：从子组件不做特殊处理，父组件变化一定会影响子组件的re-render，注意这里的re-render不一定会引起浏览器的重新渲染。这里有一个示意案例: https://codepen.io/dog/pen/mdKzXrY?editors=1111

 

疑问：子组件re-render是什么意思，会引起页面重新渲染吗 

 答：re-render是指子组件会进行新旧dom比较。如果是函数是组件可以在 return之前打印日志，这时候日志会输出的，也就是函数组件会执行一次，但是页面不一定会重新渲染

 

 疑问：只要是函数或者对象数据做为props的时候就需要用useCallback和useMemo吗

 答：并非。因为useCallback和useMemo创建和保存也是有成本的。并且普通的函数与对象创建几乎不会有太多的性能影响。

这是官网的介绍：https://zh-hans.reactjs.org/docs/hooks-faq.html#are-hooks-slow-because-of-creating-functions-in-render

 

疑问：什么场景适合使用 useCallback和useMemo

1、子组件中有hooks把props传过来的函数或者object当做依赖的时候

使用场景案例：注意子组件useEffect的依赖

使用场景案例：注意点击按钮的时候比较一下与上一个案例输出日志的区别。这个案例不会重复输出日志。

2、子组件re-render十分昂贵的时候