从React源码角度看useCallback，useMemo，useContext

ZSACH

 关注

阅读 255

2022-09-30

热身准备

useCallback和useMemo是一样的东西，只是入参有所不同。

useCallback缓存的是回调函数，如果依赖项没有更新，就会使用缓存的回调函数；

useMemo缓存的是回调函数的return，如果依赖项没有更新，就会使用缓存的return；

官网有这样一段描述useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。

所以这里，只以useCallback为例进行分析。

初始化 mount

mountCallback

如果各位看官是系列文章第一篇开始看的，看到这里估计就无压力，mountCallback就这几行代码，笔者没有做精简。

function mountCallback(callback, deps) {
  // 初始化hook结构
  var hook = mountWorkInProgressHook();
  // 使用者传进来的依赖数组
  var nextDeps = deps === undefined ? null : deps;
  // 以数组的形式将回调和依赖数组存储到对应fiber.memoizedState.hook.moeoizedState
  hook.memoizedState = [callback, nextDeps];
  return callback;
}

更新 update

function updateCallback(callback, deps) {
  var hook = updateWorkInProgressHook();
  var nextDeps = deps === undefined ? null : deps;
  var prevState = hook.memoizedState;

  if (prevState !== null) {
    if (nextDeps !== null) {
      var prevDeps = prevState[1];

      if (areHookInputsEqual(nextDeps, prevDeps)) {
        return prevState[0];
      }
    }
  }

  hook.memoizedState = [callback, nextDeps];
  return callback;
}

updateCallback就这几行代码，没有删减，代码意图也很简单，如果依赖数组deps没有变化，或者deps=[]的情况下，会返回之前缓存的回调函数，否则就更新对应fiber.memoizedState.hook.memoizedState并返回新的回调函数。

使用场景

就笔者的所见所闻，存在两种极端情况，一种开发者在开发时，不管什么函数，什么数据都喜欢使用useCallback，useMemo进行一层包裹。还有一种开发者不管什么情况都不会考虑使用useCallback，useMemo。

不用说，这两种做法都是有问题的。第一种做法，还不知道是之所以会出现这样的问题，根本原因还是很多开发者并不明白这两个hook的原理和使用场景。

首先，我们要明确函数组件在每一次更新时，都会执行函数组件，函数组件内部的所有方法，所有值都会重新声明，重新计算。这两个hook的出现就是为了优化这种情况，避免不必要的浪费。而这两个hook的做法就是通过将函数或者值存储在对应的fiber.memoizedState.hook.memoizedState上，在下次更新时，根据依赖项是否变化来决定是否要用缓存值，还是新的传进来的值。

这时候可能有人疑惑既然都会更新，那我全部包裹起来有什么不好？笔者认为都进行包裹主要的问题是，如果一个函数足够简单，从新声明可能性能消耗会比包裹后存储在hook.memoizedState的消耗更小。

这里，笔者根据自己看源码的心得，列举下这两个hook的使用场景：

  1. 如果子组件比较复杂，可以考虑使用useCallback进行包裹；
  2. 如果函数组件中某个值需要大量的计算才能得出，可以考虑使用useMemo进行包裹；
  3. 如果某个函数是子组件的props，可以考虑使用useCallback进行包裹（配合React.memo使用）；
  4. 自定义hooks中复杂逻辑可以考虑使用useCallback和useMemo进行包裹；

总结

这两个hook原理还是很简单的，因为是系列文章，很多内容和前面文章都重复了，所以导致这篇都没啥能写的了。总结下原理：

这两个hook的做法就是通过将函数或者值存储在对应的fiber.memoizedState.hook.memoizedState上，在下次更新时，根据依赖项是否变化来决定是要用缓存值，还是新的传进来的值。

虽然useCallback和useMemo是为了优化性能出现的，但是各位看官也不要盲目使用，毕竟这两个hook本身也会带来开销。

看完这篇文章， 我们可以弄明白下面这几个问题：

  1. useCallback和useMemo的区别？
  2. useCallback和useMemo的使用场景有哪些？
  3. useCallback和useMemo是做什么的？
  4. useCallback和useMemo是怎么实现优化性能的？

热身准备

useContext可以帮助我们跨越组件层级直接传递变量，避免了在每一个层级手动的传递 props 属性，实现共享，要配合createContext使用。

createContext

createContext主要功能是创建一个context，提供Provider和Consumer。Provider主要将context内容暴露出来，Consumer可以拿到对应context的Provider暴露的内容使用。

示例代码：

export const Context = createContext(null)

<Context.Provider value='initialValue'>
  <Context.Consumer>
    {(v) => {      return <h2>{v}</h2>
    }}  </Context.Consumer>
</Context.Provider>

Provider

<Context.Provider>在渲染时，beginWork阶段，会执行

pushProvider(workInProgress, newValue);

它会将Provider的prop上的value字段存到context._currentValue中。

Consumer

<Context.Consumer>在渲染时，beginWork阶段，会执行

prepareToReadContext(workInProgress, renderLanes);
var newValue = readContext(context, newProps.unstable_observedBits);

通过上面代码可以拿到Provider的prop上的value。

值得注意的是， Consumer标签下包裹的必须是一个函数，如果不是函数会报错。 Consumer会将拿到的value作为函数的参数传入函数中去使用。如同上面示例代码中获取到的v。

useContext

useContext需要将createContext创建的Context作为参数进行调用。

值得一提的是，前面讲的hook在初始化和更新时会有两套不同函数执行。但是在useContext只有一个，也就是useContext在初始化和更新时执行的是一套代码。

初始化 mount & 更新 update

useContext在mount时主要会调用readContext函数：

function readContext(context, observedBits) {

  var contextItem = {
    context: context,  // 传入的context
    observedBits: resolvedObservedBits,  // 观察范围（默认全部update)
    next: null
  };

  lastContextDependency = contextItem;
  currentlyRenderingFiber.dependencies = {
    lanes: NoLanes,
    firstContext: contextItem,
    responders: null
  };
  } else {
    // Append a new context item.    lastContextDependency = lastContextDependency.next = contextItem;
  }

  return  context._currentValue ;
}

精简了下代码，可以看到，readContext会创建一个contextItem并以链表的结构记录在对应fiber.dependencies上，最后将Provider的prop上的value返回。

总结

useContext的原理类似于观察者模式。Provider是被观察者， Consumer和useContext是观察者。当Provider上的值发生变化， 观察者是可以观察到的，从而同步信息给到组件。

主要使用场景就是多层级组件值的传递，如果值较多可以考虑配合useReducer使用。

看完这篇文章， 我们可以弄明白下面这几个问题：

  1. useContext的原理是什么？

useCallback和useMemo是一样的东西，只是入参有所不同。

useCallback缓存的是回调函数，如果依赖项没有更新，就会使用缓存的回调函数；

useMemo缓存的是回调函数的return，如果依赖项没有更新，就会使用缓存的return；

官网有这样一段描述useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。

所以这里，只以useCallback为例进行分析。

初始化 mount

mountCallback

如果各位看官是系列文章第一篇开始看的，看到这里估计就无压力，mountCallback就这几行代码，笔者没有做精简。

function mountCallback(callback, deps) {
  // 初始化hook结构
  var hook = mountWorkInProgressHook();
  // 使用者传进来的依赖数组
  var nextDeps = deps === undefined ? null : deps;
  // 以数组的形式将回调和依赖数组存储到对应fiber.memoizedState.hook.moeoizedState
  hook.memoizedState = [callback, nextDeps];
  return callback;
}

更新 update

function updateCallback(callback, deps) {
  var hook = updateWorkInProgressHook();
  var nextDeps = deps === undefined ? null : deps;
  var prevState = hook.memoizedState;

  if (prevState !== null) {
    if (nextDeps !== null) {
      var prevDeps = prevState[1];

      if (areHookInputsEqual(nextDeps, prevDeps)) {
        return prevState[0];
      }
    }
  }

  hook.memoizedState = [callback, nextDeps];
  return callback;
}

updateCallback就这几行代码，没有删减，代码意图也很简单，如果依赖数组deps没有变化，或者deps=[]的情况下，会返回之前缓存的回调函数，否则就更新对应fiber.memoizedState.hook.memoizedState并返回新的回调函数。

相关参考视频讲解：进入学习

使用场景

就笔者的所见所闻，存在两种极端情况，一种开发者在开发时，不管什么函数，什么数据都喜欢使用useCallback，useMemo进行一层包裹。还有一种开发者不管什么情况都不会考虑使用useCallback，useMemo。

不用说，这两种做法都是有问题的。第一种做法，还不知道是之所以会出现这样的问题，根本原因还是很多开发者并不明白这两个hook的原理和使用场景。

首先，我们要明确函数组件在每一次更新时，都会执行函数组件，函数组件内部的所有方法，所有值都会重新声明，重新计算。这两个hook的出现就是为了优化这种情况，避免不必要的浪费。而这两个hook的做法就是通过将函数或者值存储在对应的fiber.memoizedState.hook.memoizedState上，在下次更新时，根据依赖项是否变化来决定是否要用缓存值，还是新的传进来的值。

这时候可能有人疑惑既然都会更新，那我全部包裹起来有什么不好？笔者认为都进行包裹主要的问题是，如果一个函数足够简单，从新声明可能性能消耗会比包裹后存储在hook.memoizedState的消耗更小。

这里，笔者根据自己看源码的心得，列举下这两个hook的使用场景：

  1. 如果子组件比较复杂，可以考虑使用useCallback进行包裹；
  2. 如果函数组件中某个值需要大量的计算才能得出，可以考虑使用useMemo进行包裹；
  3. 如果某个函数是子组件的props，可以考虑使用useCallback进行包裹（配合React.memo使用）；
  4. 自定义hooks中复杂逻辑可以考虑使用useCallback和useMemo进行包裹；

总结

这两个hook原理还是很简单的，因为是系列文章，很多内容和前面文章都重复了，所以导致这篇都没啥能写的了。总结下原理：

这两个hook的做法就是通过将函数或者值存储在对应的fiber.memoizedState.hook.memoizedState上，在下次更新时，根据依赖项是否变化来决定是要用缓存值，还是新的传进来的值。

虽然useCallback和useMemo是为了优化性能出现的，但是各位看官也不要盲目使用，毕竟这两个hook本身也会带来开销。

看完这篇文章， 我们可以弄明白下面这几个问题：

  1. useCallback和useMemo的区别？
  2. useCallback和useMemo的使用场景有哪些？
  3. useCallback和useMemo是做什么的？
  4. useCallback和useMemo是怎么实现优化性能的？

热身准备

useContext可以帮助我们跨越组件层级直接传递变量，避免了在每一个层级手动的传递 props 属性，实现共享，要配合createContext使用。

createContext

createContext主要功能是创建一个context，提供Provider和Consumer。Provider主要将context内容暴露出来，Consumer可以拿到对应context的Provider暴露的内容使用。

示例代码：

export const Context = createContext(null)

<Context.Provider value='initialValue'>
  <Context.Consumer>
    {(v) => {      return <h2>{v}</h2>
    }}  </Context.Consumer>
</Context.Provider>

Provider

<Context.Provider>在渲染时，beginWork阶段，会执行

pushProvider(workInProgress, newValue);

它会将Provider的prop上的value字段存到context._currentValue中。

Consumer

<Context.Consumer>在渲染时，beginWork阶段，会执行

prepareToReadContext(workInProgress, renderLanes);
var newValue = readContext(context, newProps.unstable_observedBits);

通过上面代码可以拿到Provider的prop上的value。

值得注意的是， Consumer标签下包裹的必须是一个函数，如果不是函数会报错。 Consumer会将拿到的value作为函数的参数传入函数中去使用。如同上面示例代码中获取到的v。

useContext

useContext需要将createContext创建的Context作为参数进行调用。

值得一提的是，前面讲的hook在初始化和更新时会有两套不同函数执行。但是在useContext只有一个，也就是useContext在初始化和更新时执行的是一套代码。

初始化 mount & 更新 update

useContext在mount时主要会调用readContext函数：

function readContext(context, observedBits) {

  var contextItem = {
    context: context,  // 传入的context
    observedBits: resolvedObservedBits,  // 观察范围（默认全部update)
    next: null
  };

  lastContextDependency = contextItem;
  currentlyRenderingFiber.dependencies = {
    lanes: NoLanes,
    firstContext: contextItem,
    responders: null
  };
  } else {
    // Append a new context item.    lastContextDependency = lastContextDependency.next = contextItem;
  }

  return  context._currentValue ;
}

精简了下代码，可以看到，readContext会创建一个contextItem并以链表的结构记录在对应fiber.dependencies上，最后将Provider的prop上的value返回。

总结

useContext的原理类似于观察者模式。Provider是被观察者， Consumer和useContext是观察者。当Provider上的值发生变化， 观察者是可以观察到的，从而同步信息给到组件。

主要使用场景就是多层级组件值的传递，如果值较多可以考虑配合useReducer使用。

看完这篇文章， 我们可以弄明白下面这几个问题：

  1. useContext的原理是什么？

useCallback和useMemo是一样的东西，只是入参有所不同。

useCallback缓存的是回调函数，如果依赖项没有更新，就会使用缓存的回调函数；

useMemo缓存的是回调函数的return，如果依赖项没有更新，就会使用缓存的return；

官网有这样一段描述useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。

所以这里，只以useCallback为例进行分析。

初始化 mount

mountCallback

如果各位看官是系列文章第一篇开始看的，看到这里估计就无压力，mountCallback就这几行代码，笔者没有做精简。

function mountCallback(callback, deps) {
  // 初始化hook结构
  var hook = mountWorkInProgressHook();
  // 使用者传进来的依赖数组
  var nextDeps = deps === undefined ? null : deps;
  // 以数组的形式将回调和依赖数组存储到对应fiber.memoizedState.hook.moeoizedState
  hook.memoizedState = [callback, nextDeps];
  return callback;
}

更新 update

function updateCallback(callback, deps) {
  var hook = updateWorkInProgressHook();
  var nextDeps = deps === undefined ? null : deps;
  var prevState = hook.memoizedState;

  if (prevState !== null) {
    if (nextDeps !== null) {
      var prevDeps = prevState[1];

      if (areHookInputsEqual(nextDeps, prevDeps)) {
        return prevState[0];
      }
    }
  }

  hook.memoizedState = [callback, nextDeps];
  return callback;
}

updateCallback就这几行代码，没有删减，代码意图也很简单，如果依赖数组deps没有变化，或者deps=[]的情况下，会返回之前缓存的回调函数，否则就更新对应fiber.memoizedState.hook.memoizedState并返回新的回调函数。

相关参考视频讲解：进入学习

使用场景

就笔者的所见所闻，存在两种极端情况，一种开发者在开发时，不管什么函数，什么数据都喜欢使用useCallback，useMemo进行一层包裹。还有一种开发者不管什么情况都不会考虑使用useCallback，useMemo。

不用说，这两种做法都是有问题的。第一种做法，还不知道是之所以会出现这样的问题，根本原因还是很多开发者并不明白这两个hook的原理和使用场景。

首先，我们要明确函数组件在每一次更新时，都会执行函数组件，函数组件内部的所有方法，所有值都会重新声明，重新计算。这两个hook的出现就是为了优化这种情况，避免不必要的浪费。而这两个hook的做法就是通过将函数或者值存储在对应的fiber.memoizedState.hook.memoizedState上，在下次更新时，根据依赖项是否变化来决定是否要用缓存值，还是新的传进来的值。

这时候可能有人疑惑既然都会更新，那我全部包裹起来有什么不好？笔者认为都进行包裹主要的问题是，如果一个函数足够简单，从新声明可能性能消耗会比包裹后存储在hook.memoizedState的消耗更小。

这里，笔者根据自己看源码的心得，列举下这两个hook的使用场景：

  1. 如果子组件比较复杂，可以考虑使用useCallback进行包裹；
  2. 如果函数组件中某个值需要大量的计算才能得出，可以考虑使用useMemo进行包裹；
  3. 如果某个函数是子组件的props，可以考虑使用useCallback进行包裹（配合React.memo使用）；
  4. 自定义hooks中复杂逻辑可以考虑使用useCallback和useMemo进行包裹；

总结

这两个hook原理还是很简单的，因为是系列文章，很多内容和前面文章都重复了，所以导致这篇都没啥能写的了。总结下原理：

这两个hook的做法就是通过将函数或者值存储在对应的fiber.memoizedState.hook.memoizedState上，在下次更新时，根据依赖项是否变化来决定是要用缓存值，还是新的传进来的值。

虽然useCallback和useMemo是为了优化性能出现的，但是各位看官也不要盲目使用，毕竟这两个hook本身也会带来开销。

看完这篇文章， 我们可以弄明白下面这几个问题：

  1. useCallback和useMemo的区别？
  2. useCallback和useMemo的使用场景有哪些？
  3. useCallback和useMemo是做什么的？
  4. useCallback和useMemo是怎么实现优化性能的？

热身准备

useContext可以帮助我们跨越组件层级直接传递变量，避免了在每一个层级手动的传递 props 属性，实现共享，要配合createContext使用。

createContext

createContext主要功能是创建一个context，提供Provider和Consumer。Provider主要将context内容暴露出来，Consumer可以拿到对应context的Provider暴露的内容使用。

示例代码：

export const Context = createContext(null)

<Context.Provider value='initialValue'>
  <Context.Consumer>
    {(v) => {      return <h2>{v}</h2>
    }}  </Context.Consumer>
</Context.Provider>

Provider

<Context.Provider>在渲染时，beginWork阶段，会执行

pushProvider(workInProgress, newValue);

它会将Provider的prop上的value字段存到context._currentValue中。

Consumer

<Context.Consumer>在渲染时，beginWork阶段，会执行

prepareToReadContext(workInProgress, renderLanes);
var newValue = readContext(context, newProps.unstable_observedBits);

通过上面代码可以拿到Provider的prop上的value。

值得注意的是， Consumer标签下包裹的必须是一个函数，如果不是函数会报错。 Consumer会将拿到的value作为函数的参数传入函数中去使用。如同上面示例代码中获取到的v。

useContext

useContext需要将createContext创建的Context作为参数进行调用。

值得一提的是，前面讲的hook在初始化和更新时会有两套不同函数执行。但是在useContext只有一个，也就是useContext在初始化和更新时执行的是一套代码。

初始化 mount & 更新 update

useContext在mount时主要会调用readContext函数：

function readContext(context, observedBits) {

  var contextItem = {
    context: context,  // 传入的context
    observedBits: resolvedObservedBits,  // 观察范围（默认全部update)
    next: null
  };

  lastContextDependency = contextItem;
  currentlyRenderingFiber.dependencies = {
    lanes: NoLanes,
    firstContext: contextItem,
    responders: null
  };
  } else {
    // Append a new context item.    lastContextDependency = lastContextDependency.next = contextItem;
  }

  return  context._currentValue ;
}

精简了下代码，可以看到，readContext会创建一个contextItem并以链表的结构记录在对应fiber.dependencies上，最后将Provider的prop上的value返回。

总结

useContext的原理类似于观察者模式。Provider是被观察者， Consumer和useContext是观察者。当Provider上的值发生变化， 观察者是可以观察到的，从而同步信息给到组件。

主要使用场景就是多层级组件值的传递，如果值较多可以考虑配合useReducer使用。

看完这篇文章， 我们可以弄明白下面这几个问题：

  1. useContext的原理是什么？

useCallback和useMemo是一样的东西，只是入参有所不同。

useCallback缓存的是回调函数，如果依赖项没有更新，就会使用缓存的回调函数；

useMemo缓存的是回调函数的return，如果依赖项没有更新，就会使用缓存的return；

官网有这样一段描述useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。

所以这里，只以useCallback为例进行分析。

初始化 mount

mountCallback

如果各位看官是系列文章第一篇开始看的，看到这里估计就无压力，mountCallback就这几行代码，笔者没有做精简。

function mountCallback(callback, deps) {
  // 初始化hook结构
  var hook = mountWorkInProgressHook();
  // 使用者传进来的依赖数组
  var nextDeps = deps === undefined ? null : deps;
  // 以数组的形式将回调和依赖数组存储到对应fiber.memoizedState.hook.moeoizedState
  hook.memoizedState = [callback, nextDeps];
  return callback;
}
相关参考视频讲解：进入学习

更新 update

function updateCallback(callback, deps) {
  var hook = updateWorkInProgressHook();
  var nextDeps = deps === undefined ? null : deps;
  var prevState = hook.memoizedState;

  if (prevState !== null) {
    if (nextDeps !== null) {
      var prevDeps = prevState[1];

      if (areHookInputsEqual(nextDeps, prevDeps)) {
        return prevState[0];
      }
    }
  }

  hook.memoizedState = [callback, nextDeps];
  return callback;
}

updateCallback就这几行代码，没有删减，代码意图也很简单，如果依赖数组deps没有变化，或者deps=[]的情况下，会返回之前缓存的回调函数，否则就更新对应fiber.memoizedState.hook.memoizedState并返回新的回调函数。

使用场景

就笔者的所见所闻，存在两种极端情况，一种开发者在开发时，不管什么函数，什么数据都喜欢使用useCallback，useMemo进行一层包裹。还有一种开发者不管什么情况都不会考虑使用useCallback，useMemo。

不用说，这两种做法都是有问题的。第一种做法，还不知道是之所以会出现这样的问题，根本原因还是很多开发者并不明白这两个hook的原理和使用场景。

首先，我们要明确函数组件在每一次更新时，都会执行函数组件，函数组件内部的所有方法，所有值都会重新声明，重新计算。这两个hook的出现就是为了优化这种情况，避免不必要的浪费。而这两个hook的做法就是通过将函数或者值存储在对应的fiber.memoizedState.hook.memoizedState上，在下次更新时，根据依赖项是否变化来决定是否要用缓存值，还是新的传进来的值。

这时候可能有人疑惑既然都会更新，那我全部包裹起来有什么不好？笔者认为都进行包裹主要的问题是，如果一个函数足够简单，从新声明可能性能消耗会比包裹后存储在hook.memoizedState的消耗更小。

这里，笔者根据自己看源码的心得，列举下这两个hook的使用场景：

  1. 如果子组件比较复杂，可以考虑使用useCallback进行包裹；
  2. 如果函数组件中某个值需要大量的计算才能得出，可以考虑使用useMemo进行包裹；
  3. 如果某个函数是子组件的props，可以考虑使用useCallback进行包裹（配合React.memo使用）；
  4. 自定义hooks中复杂逻辑可以考虑使用useCallback和useMemo进行包裹；

总结

这两个hook原理还是很简单的，因为是系列文章，很多内容和前面文章都重复了，所以导致这篇都没啥能写的了。总结下原理：

这两个hook的做法就是通过将函数或者值存储在对应的fiber.memoizedState.hook.memoizedState上，在下次更新时，根据依赖项是否变化来决定是要用缓存值，还是新的传进来的值。

虽然useCallback和useMemo是为了优化性能出现的，但是各位看官也不要盲目使用，毕竟这两个hook本身也会带来开销。

看完这篇文章， 我们可以弄明白下面这几个问题：

  1. useCallback和useMemo的区别？
  2. useCallback和useMemo的使用场景有哪些？
  3. useCallback和useMemo是做什么的？
  4. useCallback和useMemo是怎么实现优化性能的？

热身准备

useContext可以帮助我们跨越组件层级直接传递变量，避免了在每一个层级手动的传递 props 属性，实现共享，要配合createContext使用。

createContext

createContext主要功能是创建一个context，提供Provider和Consumer。Provider主要将context内容暴露出来，Consumer可以拿到对应context的Provider暴露的内容使用。

示例代码：

export const Context = createContext(null)

<Context.Provider value='initialValue'>
  <Context.Consumer>
    {(v) => {      return <h2>{v}</h2>
    }}  </Context.Consumer>
</Context.Provider>

Provider

<Context.Provider>在渲染时，beginWork阶段，会执行

pushProvider(workInProgress, newValue);

它会将Provider的prop上的value字段存到context._currentValue中。

Consumer

<Context.Consumer>在渲染时，beginWork阶段，会执行

prepareToReadContext(workInProgress, renderLanes);
var newValue = readContext(context, newProps.unstable_observedBits);

通过上面代码可以拿到Provider的prop上的value。

值得注意的是， Consumer标签下包裹的必须是一个函数，如果不是函数会报错。 Consumer会将拿到的value作为函数的参数传入函数中去使用。如同上面示例代码中获取到的v。

useContext

useContext需要将createContext创建的Context作为参数进行调用。

值得一提的是，前面讲的hook在初始化和更新时会有两套不同函数执行。但是在useContext只有一个，也就是useContext在初始化和更新时执行的是一套代码。

初始化 mount & 更新 update

useContext在mount时主要会调用readContext函数：

function readContext(context, observedBits) {

  var contextItem = {
    context: context,  // 传入的context
    observedBits: resolvedObservedBits,  // 观察范围（默认全部update)
    next: null
  };

  lastContextDependency = contextItem;
  currentlyRenderingFiber.dependencies = {
    lanes: NoLanes,
    firstContext: contextItem,
    responders: null
  };
  } else {
    // Append a new context item.    lastContextDependency = lastContextDependency.next = contextItem;
  }

  return  context._currentValue ;
}

精简了下代码，可以看到，readContext会创建一个contextItem并以链表的结构记录在对应fiber.dependencies上，最后将Provider的prop上的value返回。

总结

useContext的原理类似于观察者模式。Provider是被观察者， Consumer和useContext是观察者。当Provider上的值发生变化， 观察者是可以观察到的，从而同步信息给到组件。

主要使用场景就是多层级组件值的传递，如果值较多可以考虑配合useReducer使用。

看完这篇文章， 我们可以弄明白下面这几个问题：

  1. useContext的原理是什么？

这里不再讲useLayoutEffect，它和useEffect的代码是一样的，区别主要是：

  • 执行时机不同；
  • useEffect是异步， useLayoutEffect是同步，会阻塞渲染；

初始化 mount

mountEffect

在所有hook初始化时都会通过下面这行代码实现hook结构的初始化和存储，这里不再讲mountWorkInProgressHook方法

var hook = mountWorkInProgressHook();

在mountEffect方法中，只有这几行代码。先来解读下几个参数：

  • fiberFlags：有副作用的更新标记，用来标记hook所在的fiber；
  • hookFlags：副作用标记；
  • create：使用者传入的回调函数；
  • deps：使用者传入的数组依赖；
function mountEffectImpl(fiberFlags, hookFlags, create, deps) {
  // hook初始化
  var hook = mountWorkInProgressHook();
  // 判断是否有传入deps，如果有会作为下次更新的deps
  var nextDeps = deps === undefined ? null : deps;
  // 给hook所在的fiber打上有副作用的更新的标记
  currentlyRenderingFiber$1.flags |= fiberFlags;
  // 将副作用操作存放到fiber.memoizedState.hook.memoizedState中
  hook.memoizedState = pushEffect(HasEffect | hookFlags, create, undefined, nextDeps);
}

上面代码中都有注释，接下来我们看看React是如何存放副作用更新操作的，主要就是pushEffect方法

function pushEffect(tag, create, destroy, deps) {
  // 初始化副作用结构，
  var effect = {
    tag: tag,
    create: create,   // 回调函数
    destroy: destroy,  // 回调函数里的return（mount时是undefined）
    deps: deps,    // 依赖数组
    // 闭环链表
    next: null
  };
  // 下面的一大段代码看着复杂，但是有没有很熟悉的感觉？
  var componentUpdateQueue = currentlyRenderingFiber$1.updateQueue;

  if (componentUpdateQueue === null) {
    componentUpdateQueue = createFunctionComponentUpdateQueue();
    currentlyRenderingFiber$1.updateQueue = componentUpdateQueue;
    // effect.next = effect形成环形链表
    componentUpdateQueue.lastEffect = effect.next = effect;   
  } else {
    var lastEffect = componentUpdateQueue.lastEffect;

    if (lastEffect === null) {
      componentUpdateQueue.lastEffect = effect.next = effect;
    } else {
      var firstEffect = lastEffect.next;
      lastEffect.next = effect;
      effect.next = firstEffect;
      componentUpdateQueue.lastEffect = effect;
    }
  }

  return effect;
}

上面这段代码除了初始化副作用的结构代码外，都是我们前面讲过的操作闭环链表，向链表末尾添加新的effect，该effect.next指向fisrtEffect，并且链表当前的指针指向最新添加的effect。

useEffect的初始化就这么简单，简单总结一下：给hook所在的fiber打上副作用更新标记，并且fiber.memoizedState.hook.memoizedState和fiber.updateQueue存储了相关的副作用，这些副作用通过闭环链表的结构存储。

相关参考视频讲解：进入学习

更新 update

updateEffect

updateWorkInProgressHook在上篇文章也已讲过，不再详述，主要功能就是创建一个带有回调函数的newHook去覆盖之前的hook。

function updateEffectImpl(fiberFlags, hookFlags, create, deps) {
  var hook = updateWorkInProgressHook();
  var nextDeps = deps === undefined ? null : deps;
  var destroy = undefined;

  if (currentHook !== null) {
    var prevEffect = currentHook.memoizedState;
    destroy = prevEffect.destroy;

    if (nextDeps !== null) {
      var prevDeps = prevEffect.deps;
      // 比较两次依赖数组中的值是否有变化
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        // 和之前初始化时一样
        pushEffect(hookFlags, create, destroy, nextDeps);
        return;
      }
    }
  }
  // 和之前初始化时一样
  currentlyRenderingFiber$1.flags |= fiberFlags;
  hook.memoizedState = pushEffect(HasEffect | hookFlags, create, destroy, nextDeps);
}

相信眼眼尖的看官已经注意到上面代码中有两个pushEffect，一个没有赋值给hook.memoizedState，一个赋值了，这两者有什么区别呢？

先保留着这个疑问，先来了解下下面这行代码都做了些什么，因为它造就了两个pushEffect。

if (areHookInputsEqual(nextDeps, prevDeps)){...}

function areHookInputsEqual(nextDeps, prevDeps) {
  // 没有传deps的情况返回false
  if (prevDeps === null) {
    return false;
  }
  // deps不是[]，且其中的值有变动才会返回false
  for (var i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
    if (objectIs(nextDeps[i], prevDeps[i])) {
      continue;
    }
    return false;
  }
  // deps = []，或者deps里面的值没有变化会返回true
  return true;
}

它会判断两次依赖数组中的值是否有变化以及deps是否是空数组来决定返回true和false，返回true表明这次不需要调用回调函数。

现在我们明白了两次pushEffect的异同，if内部的pushEffect是不需要调用的回调函数， 外面的pushEffect是需要调用的。再来仔细看下这两行代码：

// if内部的，第一个参数是hookFlags = 4
pushEffect(hookFlags, create, destroy, nextDeps);
// if外部的，第一个参数是HasEffect | hookFlags = 5
hook.memoizedState = pushEffect(HasEffect | hookFlags, create, destroy, nextDeps);

这两行代码的区别是传入的第一个参数不同，而第一个参数就是effect.tag的值，effect.tag = 4不会添加到副作用执行队列，而effect.tag = 5可以。没有添加到副作用执行队列的effect就不会执行。这样就巧妙的实现了useEffect基于deps来判断是否需要执行回调函数。

到这里， 我们搞明白了，不管useEffect里的deps有没有变化都会为回调函数创建effect并添加到effect链表和fiber.updateQueue中，但是React会根据effect.tag来决定该effect是否要添加到副作用执行队列中去执行。

执行副作用

我们现在知道了，useEffect是异步执行的。那么这个回调函数副作用会在什么时候执行呢？useEffect回调函数会在layout阶段之后执行。现在我们来了解下具体调用执行的流程。

image.png

我画了一个简单的流程图，大致描述了下调用流程。首先在mutation之前阶段，基于副作用创建任务并放到taskQueue中，同时会执行requestHostCallback，这个方法就涉及到了异步了，它首先考虑使用MessageChannel实现异步，其次会考虑使用setTimeout实现。使用MessageChannel时，requestHostCallback会马上执行port.postMessage(null);，这样就可以在异步的第一时间执行workLoop，workLoop会遍历taskQueue，执行任务，如果是useEffect的effect任务，会调用flusnPassiveEffects。

Q：可能有人会疑惑为什么优先考虑MessageChannel？

A： 首先我们要明白React调度更新的目的是为了时间分片，意思是每隔一段时间就把主线程还给浏览器，避免长时间占用主线程导致页面卡顿。使用MessageChannel和SetTimeout的目的都是为了创建宏任务，因为宏任务会在当前微任务都执行完后，等到浏览器主线程空闲后才会执行。不优先考虑setTimeout的原因是，setTimeout执行时间不准确，会造成时间浪费，即使是setTimeout(fn, 0)，感兴趣的可以去自己了解下，本文不做赘述了。

在schedulePassiveEffects中，会决定是否执行effect链表中的effect，判断的依据就是每个effect上的effect.tag:

function schedulePassiveEffects(finishedWork) {
  var updateQueue = finishedWork.updateQueue;
  var lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;

  if (lastEffect !== null) {
    var firstEffect = lastEffect.next;
    var effect = firstEffect;
    // 遍历effect链表
    do {
      var _effect = effect,
          next = _effect.next,
          tag = _effect.tag;
      // 基于effect.tag决定是否添加到副作用执行队列
      if ((tag & Passive$1) !== NoFlags$1 && (tag & HasEffect) !== NoFlags$1) {
        enqueuePendingPassiveHookEffectUnmount(finishedWork, effect);
        enqueuePendingPassiveHookEffectMount(finishedWork, effect);
      }

      effect = next;
    } while (effect !== firstEffect);
  }
}

在flushPassiveEffects中，会先执行上次更新动作的销毁函数，然后再执行本次更新动作的回调函数，并且会把回调函数的return作为下次更新动作的销毁函数。

function flushPassiveEffectsImpl() {
  // 执行上次更新动作的销毁函数
  var unmountEffects = pendingPassiveHookEffectsUnmount;
  pendingPassiveHookEffectsUnmount = [];
  for (var i = 0; i < unmountEffects.length; i += 2) {
    ...destroy()
  }
  // 执行本次更新动作的回调函数
  var mountEffects = pendingPassiveHookEffectsMount;
  pendingPassiveHookEffectsMount = [];
  for (var _i = 0; _i < mountEffects.length; _i += 2) {
    ...create()
  }
}

上面代码中的这两行就是来自副作用执行队列，已经过滤掉了不需要执行的effect，只执行该队列上的副作用函数

var unmountEffects = pendingPassiveHookEffectsUnmount;

var mountEffects = pendingPassiveHookEffectsMount;

总结

看完这篇文章， 我们可以弄明白下面这几个问题：

  1. useEffect和useLayoutEffect的区别？
  2. useEffect是怎么判断回调函数是否需要执行的？
  3. useEffect是同步还是异步？
  4. useEffect是通过什么实现异步的？
  5. useEffect为什么要要优先选用MessageChannel实现异步？

相关推荐

React Hooks的使用（二）——useContext、useReducer、useCallback、useMemo解析

DT_M 114 0 0

React-Hook（3）：useContext、useReducer、useRef、useMemo、useCallback

RJ_Hwang 54 0 0

React 中 memo()、useCallback()、useMemo() 理解

全栈学习笔记 190 0 0

React（四）memo、useCallback、useMemo Hook

陌岛 16 0 0

React性能优化memo+useMemo+useCallback

爱上流星雨 150 0 0

react中useEffect useCallback useMemo的区别

dsysama 44 0 0

【React篇】useMemo和useCallback的区别

weipeng2k 39 0 0

react钩子函数用法（useCallback、useMemo）

color_小浣熊 46 0 0

React.memo()、useCallback()、useMemo() 区别及基本使用

拾光的Shelly 75 0 0

React 组件跨层级数据共享：createContext、useContext、useMemo

静守幸福 21 0 0

精彩评论（0）

0 0 举报