记忆函数 在开发实践中，有一种优化手段叫做记忆函数。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 function summation (target ) { let sum = 0 ; for (let i = 1 ; i <= target; i++) { sum += i; } console .log ('sum: ' , sum); return sum; } summation (10 );summation (100 );summation (100 );summation (100 );summation (100 );
这是一个求和函数，每次执行函数都会重新计算结果。当我们重复调用summation(100)时，内部的循环计算是不是有点冗余？因为传入相同的参数，必定得到相同的结果，因此如果传入参数一样，是不是可以不再重复计算直接使用上次的计算结果呢？
是的，利用闭包能够实现我们的目的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 let preTarget = -1 ;let memoSum = 0 ;export function memoSummation (target ) { if (prevTarget > 0 && prevTarget === target) { return memoSum; } prevTarget = target; let sum = 0 ; console .log ('我出现，表示又重新计算了一次' ); for (let i = 1 ; i <= target; i++) { sum += i; } memoSum = sum; return sum; }
1 2 3 4 5 6 7 8 9 10 11 import { memoSummation } from './memoFn' ;memoSummation (10 );memoSummation (50 );memoSummation (100 );memoSummation (50 );memoSummation (100 );memoSummation (100 );memoSummation (100 );memoSummation (100 );memoSummation (100 );
'我出现，表示又重新计算了一次'只打印了 5 次。
将memoFn.jsx模块用伪代码表示，如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 const memoFn = (function ( let prevTarget = -1 ; let memoSum = 0 ; return function memoFn (target ) { if (prevTarget > 0 && prevTarget === target) { return memoSum; } prevTarget = target; let sum = 0 ; console .log ('我出现，表示又重新计算了一次' ); for (let i = 1 ; i <= target; i++) { sum += i; } memoSum = sum; return sum; }; })(); const memoSummation = memoFn;
hooks 中的记忆函数
useState
useEffect
useCallback
useMemo
useLayoutEffect
useReducer
useRef
这里主要讲useCallback和useMemo。
useMemo useMemo 缓存计算结果 。它接收两个参数，第一个参数是回调函数（返回计算结果），第二个参数是依赖项（数组），当依赖项中某一项发生变化时，结果将会重新计算。const memorizedValue = useMemo(() => {}, deps)
useCallback useCallback 缓存函数。 他的使用跟useMemo几乎一样，当依赖项中的某一个发生变化时，返回一个新函数。const memorizedFn = useCallback(() => {}, deps)
伪代码实现 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 let memoizedState = [];let hookIndex = 0 ;function useCallbacks (callback, nextDeps ) { const prevState = memoizedState[hookIndex]; if (prevState) { let [prevCallback, prevDeps] = prevState; let same = nextDeps.every ((item, index ) => item === prevDeps[index]); if (same) { console .log ('返回旧函数' ); return prevCallback; } } memoizedState[hookIndex] = [callback, nextDeps]; console .log ('返回新函数' ); return callback; } export default useCallbacks;
useCallback 和 useMemo 的区别
useCallback 缓存的是callback函数本身，useMemo 缓存的是callback函数的计算结果，也可以是一个函数
都是利用闭包缓存计算结果。只有在函数或计算的过程非常复杂时才考虑使用
useCallback/useMemo 可以用来优化子组件和当前组件。优化子组件时，可以防止子组件没必要的重复渲染，useCallback 需要配合 React.memo 一起使用，useMemo 不需要；优化当前组件时，useCallback 主要用于某个会多次 re-render 组件中的没有依赖项的函数，useMome 主要用于缓存复杂的计算逻辑。
useCallback(fn, deps) 相等于 useMemo(() => fn, deps)
是否需要优化 通过记忆函数的原理，我们应该知道，创建记忆函数并不是没有代价的，我们需要创建闭包，占用更多的内存，用以解决计算上的冗余 。
对于一个函数组件来说，我们在内部会创建许多函数，是否都有必要使用 useCallback 呢？思考下面代码
useCallback 是否有必要包裹 setCount 函数？
1 2 3 const memoAdd = useCallback (() => { setCount (count++); }, [count]);
存在依赖项时 ，如果 memoFn 不作为 props 传给子组件，仅做一个缓存函数的作用，这样是不是也有达到优化效果？
答案是没必要 。创建函数的消耗很小，依赖项的对比反而有一定的性能开销。
当一个函数执行完毕，就会从函数调用栈被弹出，里面的内存也会被回收。对于函数组件来说也一样，当内部函数执行完毕后也会被释放掉。所以函数式组件的性能是非常快的。
那么，什么时候使用 useCallback 比较合适呢？
适用场景 当函数或计算的过程非常复杂时 ，才优先考虑使用useCallback/useMemo。
当函数（或子组件）非常复杂时 默认情况下，父组件的重新渲染会导致子组件也重新渲染。如果子组件的 props 未发生变化时，子组件就没有重新渲染的必要。
所以当函数非常复杂时，我们可以将 useCallbak 的返回值”缓存函数”传给子组件，然后配合子组件使用 React.memo 解决子组件不必要的渲染问题。
案例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 import React , { useState, useCallback, useMemo } from 'react' ;import Button from './Button' ;export default function UseCallback ( const [count1, setCount1] = useState (0 ); const [count2, setCount2] = useState (0 ); const [count3, setCount3] = useState (0 ); const handleClickButton1 = ( setCount1 (count1 + 1 ); }; const handleClickButton2 = useCallback (() => { setCount2 (count2 + 1 ); }, [count2]); return ( <div > <h1 > 未使用useCallback</h1 > <div > <Button onClickButton ={handleClickButton1} > Button1</Button > </div > <div > <Button onClickButton ={handleClickButton2} > Button2</Button > <p > Button2 上的on函数使用了useCallback</p > </div > <div > <Button onClickButton ={() => { setCount3(count3 + 1); }} > Button3 </Button > </div > </div > ); }
子组件要配合 React.memo 一起使用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 import React from 'react' ;const Button = ({ onClickButton, children, count } ) => { return ( <> <button onClick ={onClickButton} > {children}</button > <span > {Math.random()}</span > {count && <span > count: {count}</span > } </> ); }; export default React .memo (Button );
会多次re-render的组件中，且函数没有任何依赖时 如果某组件一定会多次re-render，且函数没有任何依赖，可以考虑使用 useCallback 降低多次执行带来的重复创建同样方法的负担。
1 2 3 4 5 <input type="text" onChange={inputChange} />; const inputChange = useCallback ((e ) => { setValue (e.target .value ); }, []);
同样的场景，如果函数只会渲染一次，那么使用 useCallback 就完全没必要。
闭包带来的问题 通过前面的例子可以知道，handleClickButton2缓存函数仅在 count不变时保持稳定。保持 handleClickButton2引用一直稳定 ，要把依赖项移除，用空数组作为参数，这会导致访问到的 count总是初始值 ，逻辑上引发了更大的问题，也就是闭包问题。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 import React , { useState, useCallback, useMemo } from 'react' ;import Button from './Button' ;export default function UseCallback ( const [count4, setCount4] = useState (0 ); const stableClickFn = useCallback (() => { console .log (count4); setCount4 (count4 + 1 ); }, []); return ( <div > <h1 > 缓存函数引用保持稳定时状态不更新问题</h1 > <Button onClickButton ={stableClickFn} > stable button4</Button > <div > count 只会更新一次</div > <div > count4: {count4}</div > </div > ); }
想要解决这个问题，可以看hooks 闭包陷阱
react 团队为了解决这个问题，准备引入useEvent，它具备以下属性：
每次重新渲染时都不会重新创建该函数
该函数将可以访问 props/state 的最新值
总结 useCallback/useMemo的作用在于利用记忆函数减少无效的re-render，来达到性能优化的作用。记忆函数的原理，是创建闭包，但创建闭包是有代价的，会占用更多的内存，用以解决计算上的冗余。所以我们需要根据场景来权衡是否有必要使用useCallback/useMemo。
参考：https://zhuanlan.zhihu.com/p/56975681 https://mp.weixin.qq.com/s/MnkycB8D9kCRrsXaLBfgXg
