You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
29 lines
1.6 KiB
29 lines
1.6 KiB
3 years ago
|
# 简单的 React 思考: useCallback / useMemo
|
||
|
|
useCallback 和 useMemo 都是 React 里边比较简单的 Hook，先看看官网对于这两个 Hook 的介绍。
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
// useCallback
|
||
|
|
const memoizedCallback = useCallback(
|
||
|
|
() => { doSomething(a, b) },
|
||
|
|
[a, b]
|
||
|
|
);
|
||
|
|
|
||
|
|
// useMemo
|
||
|
|
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
|
||
|
|
```
|
||
|
|
|
||
|
|
useCallback 会返回一个 memoized 函数，而 useMemo 会返回一个 memoized 值
|
||
|
|
他们的第二个参数接受一个依赖项数组，回调函数只会在依赖项发生改变的时候才会更新，它的比较算法和 Object.is 的一致，即引用对比。
|
||
|
|
他们都是作为性能优化的一个方法提供，他们的不同之处在于，useCallback 返回一个函数，而useMemo 会返回一个值，这个值由传入 useMemo 的回调函数在渲染期间执行。
|
||
|
|
|
||
|
|
上 React 源码，结合[[简单的 React 思考 - Fiber 创建]]一起看
|
||
|
|
|
||
|
|
useCallback
|
||
|
|
![[useCallback.png]]
|
||
|
|
|
||
|
|
useCallback 在 mount 和 update 阶段都会对 deps 也就是依赖项做简单的 underfined 判断，在 update 的时候会用 areHookInputsEqual 对依赖项做对比，如果依赖项没有变就返回 memorizedState 中存储的回调函数
|
||
|
|
|
||
|
|
useMemo
|
||
|
|
![[useMemo.png]]
|
||
|
|
|
||
|
|
和 useCallback 相同，useMemo 也会在 mount 和 update 的时候对 deps 依赖项参数做简单的underfined 判断，但是与 useCallback 在 mounte 阶段直接将 函数和 deps 一起存入 memoizedState 不同，useMemo 会执行传入的回调函数，并将函数的返回值和 deps 一起存入memoizedState，在 update 阶段的处理和 useCallback 几乎是一样的。
|