基本用法
- useMemo
const memorizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
useMemo() 返回的是一个 memoized 值，只有当依赖项（比如上面的 a,b 发生变化的时候，才会重新计算这个 memoized 值）
- useCallback
const memorizedfn = useCallback(()=>{return fn}, [a])
useCallback 跟 useMemo 比较类似，但它返回的是缓存的函数。
- memo
function MyComponent(props) {
/* render using props */
}
function isEqual(prevProps, nextProps) {
/*
return true，相等，不进行render
return false,不相等，进行render
*/
}
export default React.memo(MyComponent, isEqual);
React.memo() 包装组件。
第二个参数不传递，默认进行props属性的浅比较。
第二个参数传递isEqual方法，来判断两次 props 有什么不同，返回true不render，false进行render。
总结
-
在子组件不需要父组件的值和函数的情况下，只需要使用
memo函数包裹子组件即可。保证不进行多余render。 -
如果有函数传递给子组件，使用
useCallback -
如果有值传递给子组件，使用
useMemo -
useEffect、useMemo、useCallback都是自带闭包的。也就是说，每一次组件的渲染，其都会捕获当前组件函数上下文中的状态(state,props)，所以每一次这三种hooks的执行，反映的也都是当前的状态，你无法使用它们来捕获上一次的状态。如果需要捕获上一次状态，我们应该使用ref来访问。
