• 【React 源码】（十五）React Context 原理

    简单来讲, Context提供了一种直接访问祖先节点上的状态的方法, 避免了多级组件层层传递props.

    有关Context的用法, 请直接查看官方文档, 本文将从fiber树构造的视角, 分析Context的实现原理.

    创建 Context

    根据官网示例, 通过React.createContext这个 api 来创建context对象. 在createContext中, 可以看到context对象的数据结构:

     

    1. export function createContext(
    2.  
    3. defaultValue: T,
    4.  
    5. calculateChangedBits: ?(a: T, b: T) => number,
    6.  
    7. ): ReactContext {
    8.  
    9. if (calculateChangedBits === undefined) {
    10.  
    11. calculateChangedBits = null;
    12.  
    13. }
    14.  
    15. const context: ReactContext = {
    16.  
    17. $$typeof: REACT_CONTEXT_TYPE,
    18.  
    19. _calculateChangedBits: calculateChangedBits,
    20.  
    21. // As a workaround to support multiple concurrent renderers, we categorize
    22.  
    23. // some renderers as primary and others as secondary. We only expect
    24.  
    25. // there to be two concurrent renderers at most: React Native (primary) and
    26.  
    27. // Fabric (secondary); React DOM (primary) and React ART (secondary).
    28.  
    29. // Secondary renderers store their context values on separate fields.
    30.  
    31. _currentValue: defaultValue,
    32.  
    33. _currentValue2: defaultValue,
    34.  
    35. _threadCount: 0,
    36.  
    37. Provider: (null: any),
    38.  
    39. Consumer: (null: any),
    40.  
    41. };
    42.  
    43. context.Provider = {
    44.  
    45. $$typeof: REACT_PROVIDER_TYPE,
    46.  
    47. _context: context,
    48.  
    49. };
    50.  
    51. context.Consumer = context;
    52.  
    53. return context;
    54.  
    55. }
     

    createContext核心逻辑:
     

    • 其初始值保存在context._currentValue(同时保存到context._currentValue2. 英文注释已经解释, 保存 2 个 value 是为了支持多个渲染器并发渲染)
    • 同时创建了context.Provider, context.Consumer2 个reactElement对象.
     

    比如, 创建const MyContext = React.createContext(defaultValue);, 之后使用声明一个ContextProvider类型的组件.
     

    在fiber树渲染时, 在beginWork中ContextProvider类型的节点对应的处理函数是updateContextProvider:
     

     

    1. function beginWork(
    3. current: Fiber | null,
    5. workInProgress: Fiber,
    7. renderLanes: Lanes,
    9. ): Fiber | null {
    10.  
    11. const updateLanes = workInProgress.lanes;
    12.  
    13. workInProgress.lanes = NoLanes;
    14.  
    15. // ...省略无关代码
    16.  
    17. switch (workInProgress.tag) {
    18.  
    19. case ContextProvider:
    20.  
    21. return updateContextProvider(current, workInProgress, renderLanes);
    22.  
    23. case ContextConsumer:
    24.  
    25. return updateContextConsumer(current, workInProgress, renderLanes);
    26.  
    27. }
    28.  
    29. }
    30.  
    31. function updateContextProvider(
    33. current: Fiber | null,
    35. workInProgress: Fiber,
    37. renderLanes: Lanes,
    39. ) {
    40.  
    41. // ...省略无关代码
    42.  
    43. const providerType: ReactProviderType = workInProgress.type;
    44.  
    45. const context: ReactContext = providerType._context;
    46.  
    47. const newProps = workInProgress.pendingProps;
    48.  
    49. const oldProps = workInProgress.memoizedProps;
    50.  
    51. // 接收新value
    52.  
    53. const newValue = newProps.value;
    54.  
    55. // 更新 ContextProvider._currentValue
    56.  
    57. pushProvider(workInProgress, newValue);
    58.  
    59. if (oldProps !== null) {
    60.  
    61. // ... 省略更新context的逻辑, 下文讨论
    62.  
    63. }
    64.  
    65. const newChildren = newProps.children;
    66.  
    67. reconcileChildren(current, workInProgress, newChildren, renderLanes);
    68.  
    69. return workInProgress.child;
    70.  
    71. }
     

    updateContextProvider()在fiber初次创建时十分简单, 仅仅就是保存了pendingProps.value做为context的最新值, 之后这个最新的值用于供给消费.
     

    context._currentValue 存储
     

    注意updateContextProvider -> pushProvider中的pushProvider(workInProgress, newValue):
     

     

    1. // ...省略无关代码
    2.  
    3. export function pushProvider(providerFiber: Fiber, nextValue: T): void {
    4.  
    5. const context: ReactContext = providerFiber.type._context;
    6.  
    7. push(valueCursor, context._currentValue, providerFiber);
    8.  
    9. context._currentValue = nextValue;
    10.  
    11. }
     

    pushProvider实际上是一个存储函数, 利用栈的特性, 先把context._currentValue压栈, 之后更新context._currentValue = nextValue.
     

    与pushProvider对应的还有popProvider, 同样利用栈的特性, 把栈中的值弹出, 还原到context._currentValue中.
     

    本节重点分析Context Api在fiber树构造过程中的作用. 有关pushProvider/popProvider的具体实现过程(栈存储), 在React 算法之栈操作中有详细图解.
     

    消费 Context
     

    使用了MyContext.Provider组件之后, 在fiber树构造过程中, context 的值会被ContextProvider类型的fiber节点所更新. 在后续的过程中, 如何读取context._currentValue?
     

    在react中, 共提供了 3 种方式可以消费Context:
     

    1.  
      使用MyContext.Consumer组件: 用于JSX. 如, (value)=>{}
       
  
       
      1. function updateContextConsumer(
      3. current: Fiber | null,
      5. workInProgress: Fiber,
      7. renderLanes: Lanes,
      9. ) {
      10.  
      11. let context: ReactContext = workInProgress.type;
      12.  
      13. const newProps = workInProgress.pendingProps;
      14.  
      15. const render = newProps.children;
      16.  
      17. // 读取context
      18.  
      19. prepareToReadContext(workInProgress, renderLanes);
      20.  
      21. const newValue = readContext(context, newProps.unstable_observedBits);
      22.  
      23. let newChildren;
      24.  
      25. // ...省略无关代码
      26.  
      27. }
       
       
    2.  
      使用useContext: 用于function中. 如, const value = useContext(MyContext)
       
  
      • 进入updateFunctionComponent后, 会调用prepareToReadContext
      • 无论是初次创建阶段, 还是更新阶段, useContext都直接调用了readContext
    3.  
      class组件中, 使用一个静态属性contextType: 用于class组件中获取context. 如, MyClass.contextType = MyContext;
       
  
     

    所以这 3 种方式只是react根据不同使用场景封装的api, 内部都会调用prepareToReadContext和readContext(contextType).
     

     

    1. // ... 省略无关代码
    2.  
    3. export function prepareToReadContext(
    5. workInProgress: Fiber,
    7. renderLanes: Lanes,
    9. ): void {
    10.  
    11. // 1. 设置全局变量, 为readContext做准备
    12.  
    13. currentlyRenderingFiber = workInProgress;
    14.  
    15. lastContextDependency = null;
    16.  
    17. lastContextWithAllBitsObserved = null;
    18.  
    19. const dependencies = workInProgress.dependencies;
    20.  
    21. if (dependencies !== null) {
    22.  
    23. const firstContext = dependencies.firstContext;
    24.  
    25. if (firstContext !== null) {
    26.  
    27. if (includesSomeLane(dependencies.lanes, renderLanes)) {
    28.  
    29. // Context list has a pending update. Mark that this fiber performed work.
    30.  
    31. markWorkInProgressReceivedUpdate();
    32.  
    33. }
    34.  
    35. // Reset the work-in-progress list
    36.  
    37. dependencies.firstContext = null;
    38.  
    39. }
    40.  
    41. }
    42.  
    43. }
    44.  
    45. // ... 省略无关代码
    46.  
    47. export function readContext(
    48.  
    49. context: ReactContext,
    50.  
    51. observedBits: void | number | boolean,
    52.  
    53. ): T {
    54.  
    55. const contextItem = {
    56.  
    57. context: ((context: any): ReactContext),
    58.  
    59. observedBits: resolvedObservedBits,
    60.  
    61. next: null,
    62.  
    63. };
    64.  
    65. // 1. 构造一个contextItem, 加入到 workInProgress.dependencies链表之后
    66.  
    67. if (lastContextDependency === null) {
    68.  
    69. lastContextDependency = contextItem;
    70.  
    71. currentlyRenderingFiber.dependencies = {
    72.  
    73. lanes: NoLanes,
    74.  
    75. firstContext: contextItem,
    76.  
    77. responders: null,
    78.  
    79. };
    80.  
    81. } else {
    82.  
    83. lastContextDependency = lastContextDependency.next = contextItem;
    84.  
    85. }
    86.  
    87. // 2. 返回 currentValue
    88.  
    89. return isPrimaryRenderer ? context._currentValue : context._currentValue2;
    90.  
    91. }
     

    核心逻辑:
     

    1. prepareToReadContext: 设置currentlyRenderingFiber = workInProgress, 并重置lastContextDependency等全局变量.
    2. readContext: 返回context._currentValue, 并构造一个contextItem添加到workInProgress.dependencies链表之后.
     

    注意: 这个readContext并不是纯函数, 它还有一些副作用, 会更改workInProgress.dependencies, 其中contextItem.context保存了当前context的引用. 这个dependencies属性会在更新时使用, 用于判定是否依赖了ContextProvider中的值.
     

    返回context._currentValue之后, 之后继续进行fiber树构造直到全部完成即可.
     

    更新 Context
     

    来到更新阶段, 同样进入updateContextConsumer
     

     

    1. function updateContextProvider(
    3. current: Fiber | null,
    5. workInProgress: Fiber,
    7. renderLanes: Lanes,
    9. ) {
    10.  
    11. const providerType: ReactProviderType = workInProgress.type;
    12.  
    13. const context: ReactContext = providerType._context;
    14.  
    15. const newProps = workInProgress.pendingProps;
    16.  
    17. const oldProps = workInProgress.memoizedProps;
    18.  
    19. const newValue = newProps.value;
    20.  
    21. pushProvider(workInProgress, newValue);
    22.  
    23. if (oldProps !== null) {
    24.  
    25. // 更新阶段进入
    26.  
    27. const oldValue = oldProps.value;
    28.  
    29. // 对比 newValue 和 oldValue
    30.  
    31. const changedBits = calculateChangedBits(context, newValue, oldValue);
    32.  
    33. if (changedBits === 0) {
    34.  
    35. // value没有变动, 进入 Bailout 逻辑
    36.  
    37. if (
    38.  
    39. oldProps.children === newProps.children &&
    40.  
    41. !hasLegacyContextChanged()
    42.  
    43. ) {
    44.  
    45. return bailoutOnAlreadyFinishedWork(
    46.  
    47. current,
    48.  
    49. workInProgress,
    50.  
    51. renderLanes,
    52.  
    53. );
    54.  
    55. }
    56.  
    57. } else {
    58.  
    59. // value变动, 查找对应的consumers, 并使其能够被更新
    60.  
    61. propagateContextChange(workInProgress, context, changedBits, renderLanes);
    62.  
    63. }
    64.  
    65. }
    66.  
    67. // ... 省略无关代码
    68.  
    69. }
     

    核心逻辑:
     

    1. value没有改变, 直接进入Bailout(可以回顾fiber 树构造(对比更新)中对bailout的解释).
    2. value改变, 调用propagateContextChange
     

    propagateContextChange:
     

     

    1. export function propagateContextChange(
    3. workInProgress: Fiber,
    5. context: ReactContext,
    7. changedBits: number,
    9. renderLanes: Lanes,
    11. ): void {
    12.  
    13. let fiber = workInProgress.child;
    14.  
    15. if (fiber !== null) {
    16.  
    17. // Set the return pointer of the child to the work-in-progress fiber.
    18.  
    19. fiber.return = workInProgress;
    20.  
    21. }
    22.  
    23. while (fiber !== null) {
    24.  
    25. let nextFiber;
    26.  
    27. const list = fiber.dependencies;
    28.  
    29. if (list !== null) {
    30.  
    31. nextFiber = fiber.child;
    32.  
    33. let dependency = list.firstContext;
    34.  
    35. while (dependency !== null) {
    36.  
    37. // 检查 dependency中依赖的context
    38.  
    39. if (
    40.  
    41. dependency.context === context &&
    42.  
    43. (dependency.observedBits & changedBits) !== 0
    44.  
    45. ) {
    46.  
    47. // 符合条件, 安排调度
    48.  
    49. if (fiber.tag === ClassComponent) {
    50.  
    51. // class 组件需要创建一个update对象, 添加到updateQueue队列
    52.  
    53. const update = createUpdate(
    54.  
    55. NoTimestamp,
    56.  
    57. pickArbitraryLane(renderLanes),
    58.  
    59. );
    60.  
    61. update.tag = ForceUpdate; // 注意ForceUpdate, 保证class组件一定执行render
    62.  
    63. enqueueUpdate(fiber, update);
    64.  
    65. }
    66.  
    67. fiber.lanes = mergeLanes(fiber.lanes, renderLanes);
    68.  
    69. const alternate = fiber.alternate;
    70.  
    71. if (alternate !== null) {
    72.  
    73. alternate.lanes = mergeLanes(alternate.lanes, renderLanes);
    74.  
    75. }
    76.  
    77. // 向上
    78.  
    79. scheduleWorkOnParentPath(fiber.return, renderLanes);
    80.  
    81. // 标记优先级
    82.  
    83. list.lanes = mergeLanes(list.lanes, renderLanes);
    84.  
    85. // 退出查找
    86.  
    87. break;
    88.  
    89. }
    90.  
    91. dependency = dependency.next;
    92.  
    93. }
    94.  
    95. }
    96.  
    97. // ...省略无关代码
    98.  
    99. // ...省略无关代码
    100.  
    101. fiber = nextFiber;
    102.  
    103. }
    104.  
    105. }
     

    propagateContextChange源码比较长, 核心逻辑如下:
     

    1. 向下遍历: 从ContextProvider类型的节点开始, 向下查找所有fiber.dependencies依赖该context的节点(假设叫做consumer).
    2. 向上遍历: 从consumer节点开始, 向上遍历, 修改父路径上所有节点的fiber.childLanes属性, 表明其子节点有改动, 子节点会进入更新逻辑. 
  
      • 这一步通过调用scheduleWorkOnParentPath(fiber.return, renderLanes)实现. 
         
        1. export function scheduleWorkOnParentPath(
        3. parent: Fiber | null,
        5. renderLanes: Lanes,
        7. ) {
        8.  
        9. // Update the child lanes of all the ancestors, including the alternates.
        10.  
        11. let node = parent;
        12.  
        13. while (node !== null) {
        14.  
        15. const alternate = node.alternate;
        16.  
        17. if (!isSubsetOfLanes(node.childLanes, renderLanes)) {
        18.  
        19. node.childLanes = mergeLanes(node.childLanes, renderLanes);
        20.  
        21. if (alternate !== null) {
        22.  
        23. alternate.childLanes = mergeLanes(
        24.  
        25. alternate.childLanes,
        26.  
        27. renderLanes,
        28.  
        29. );
        30.  
        31. }
        32.  
        33. } else if (
        34.  
        35. alternate !== null &&
        36.  
        37. !isSubsetOfLanes(alternate.childLanes, renderLanes)
        38.  
        39. ) {
        40.  
        41. alternate.childLanes = mergeLanes(alternate.childLanes, renderLanes);
        42.  
        43. } else {
        44.  
        45. // Neither alternate was updated, which means the rest of the
        46.  
        47. // ancestor path already has sufficient priority.
        48.  
        49. break;
        50.  
        51. }
        52.  
        53. node = node.return;
        54.  
        55. }
        56.  
        57. }
         
         
      • scheduleWorkOnParentPath与markUpdateLaneFromFiberToRoot的作用相似, 具体可以回顾fiber 树构造(对比更新)
     

    通过以上 2 个步骤, 保证了所有消费该context的子节点都会被重新构造, 进而保证了状态的一致性, 实现了context更新.
     

    总结
     

    Context的实现思路还是比较清晰, 总体分为 2 步.
     

    1. 在消费状态时,ContextConsumer节点调用readContext(MyContext)获取最新状态.
    2. 在更新状态时, 由ContextProvider节点负责查找所有ContextConsumer节点, 并设置消费节点的父路径上所有节点的fiber.childLanes, 保证消费节点可以得到更新.
     

     
 
     
  
     
  
     
   
     
    
     
    
     
     
     
     
     
    
     
   
     
  
     
 
     

    
                
    
                    
    
                
    • 

                
  • 

                    相关阅读:
    
                    
python爬取酷我音乐 根据歌名进行爬取                            
    
爬手机app接口数据，手机不能上网问题及解决，                            
    
lssvm聚类研究（Matlab代码实现）                            
    
深入理解线程安全                            
    
UWB系统的定位精度影响因素（一）                            
    
etcd备份恢复原理详解及踩坑实录                            
    
友元 C++进修之路系列                            
    
初识集合框架 -Java                            
    
老卫带你学---leetcode刷题(406. 根据身高重建队列)                            
    
这10款文案神器帮你速码，做自媒体还担心写不出文案吗？                            
    
                        
                
    • 
                
  • 
                    原文地址：https://blog.csdn.net/weixin_44828588/article/details/126545869
                
    •