前言
本次React源码参考版本为17.0.3。这是React源码系列第二篇，建议初看源码的同学从第一篇开始看起，这样更有连贯性，下面有源码系列链接。
热身准备
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使用。
看完这篇文章， 我们可以弄明白下面这几个问题：
useContext的原理是什么？
系列文章安排：
- React源码系列之一：Fiber；
- React源码系列之二：React的渲染机制；
- React源码系列之三：hooks之useState，useReducer；
- React源码系列之四：hooks之useEffect；
- React源码系列之五：hooks之useCallback，useMemo；
- React源码系列之六：hooks之useContext；
- React源码系列之七：React的合成事件；
- React源码系列之八：React的diff算法；
- React源码系列之九：React的更新机制；
- React源码系列之十：Concurrent Mode；
参考：
