React 源码讲解第 5 节- Update 对象和 UpdateQueue 对象

本是古典何须时尚 2022-12-11 04:29 146阅读 0赞

### React 源码讲解第 5 节- Update 对象 ###

*   *   *  源码
         *  Update 数据结构
         *  Update 的四种类型
         *  UpdateQueue 数据结构

根据第三节和第四节的内容，创建了 RootFiber 对象和 FiberRoot 对象之后，接下来就是处理更新。

### 源码 ###

function updateContainer(element, container, parentComponent, callback) { 
      { 
        onScheduleRoot(container, element);
      }
    
      var current$1 = container.current;
      var currentTime = requestCurrentTimeForUpdate();
    
      { 
        // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
        if ('undefined' !== typeof jest) { 
          warnIfUnmockedScheduler(current$1);
          warnIfNotScopedWithMatchingAct(current$1);
        }
      }
    
      var suspenseConfig = requestCurrentSuspenseConfig();
      var expirationTime = computeExpirationForFiber(currentTime, current$1, suspenseConfig);
      var context = getContextForSubtree(parentComponent);
    
      if (container.context === null) { 
        container.context = context;
      } else { 
        container.pendingContext = context;
      }
    
      { 
        if (isRendering && current !== null && !didWarnAboutNestedUpdates) { 
          didWarnAboutNestedUpdates = true;
    
          error('Render methods should be a pure function of props and state; ' + 'triggering nested component updates from render is not allowed. ' + 'If necessary, trigger nested updates in componentDidUpdate.\n\n' + 'Check the render method of %s.', getComponentName(current.type) || 'Unknown');
        }
      }
    
      var update = createUpdate(expirationTime, suspenseConfig); // Caution: React DevTools currently depends on this property
      // being called "element".
    
      update.payload = { 
        element: element
      };
      callback = callback === undefined ? null : callback;
    
      if (callback !== null) { 
        { 
          if (typeof callback !== 'function') { 
            error('render(...): Expected the last optional `callback` argument to be a ' + 'function. Instead received: %s.', callback);
          }
        }
    
        update.callback = callback;
      }
    
      enqueueUpdate(current$1, update);
      scheduleWork(current$1, expirationTime);
      return expirationTime;
    }

在 `updateContainer` 中 `var update = createUpdate(expirationTime, suspenseConfig)` 提炼出 update 对象。

### Update 数据结构 ###

fiber reconciler 将 fiber 的状态更新抽象为 Update 单向链表。

function createUpdate(expirationTime, suspenseConfig) { 
      var update = { 
        // 更新的过期时间
        expirationTime: expirationTime,
        // suspense 配置
        suspenseConfig: suspenseConfig,
        // 更新类型，见如下Update 的四种类型
        tag: UpdateState,
        // 更新内容，比如`setState`接收的第一个参数
        payload: null,
        // 对应的回调，`setState`，`render`都有
        callback: null,
        // 指向下一个更新
        next: null
      };
      update.next = update;
    
      { 
        update.priority = getCurrentPriorityLevel();//获取优先级等级
      }
    
      return update;
    }

### Update 的四种类型 ###

export const UpdateState = 0;//基于 prevState 以及 payload 增量更新
    export const ReplaceState = 1;//基于 payload 全量更新
    export const ForceUpdate = 2;//强制更新，state 值依旧取 prevState，同时 hasForceUpdate 会被置为 true。
    export const CaptureUpdate = 3;//将 fiber.effectTag 置为捕获更新

### UpdateQueue 数据结构 ###

在 `updateContainer` 中 `enqueueUpdate(current$1, update)` 提炼出 UpdateQueue 对象。

fiber reconciler 使用 UpdateQueue 存储 Update 更新队列。更新队列有两条，baseQueue 执行中的更新队列，pendingQueue（即 shared.pending）待执行的更新队列。因为 Update 表现为环状单向链表，baseQueue、pendingQueue 均存储单向链表的尾节点。丢弃更新作业的实现在于，将 pendingQueue 复制给 baseQueue，丢弃之前的 baseQueue（current fiber 和 work-in-progress fiber 均会重置 baseQueue）。

function enqueueUpdate(fiber, update) { 
      //存储执行中的更新任务 Update 队列，尾节点存储形式
      var updateQueue = fiber.updateQueue;
    
      if (updateQueue === null) { 
        // Only occurs if the fiber has been unmounted.
        return;
      }
      //以 pending 属性存储待执行的更新任务 Update 队列，尾节点存储形式
      var sharedQueue = updateQueue.shared;
      var pending = sharedQueue.pending;
    
      if (pending === null) { 
        // 第一次更新，创建一个循环列表
        update.next = update;
      } else { 
        update.next = pending.next;
        pending.next = update;
      }
    
      sharedQueue.pending = update;
    
      { 
        if (currentlyProcessingQueue === sharedQueue && !didWarnUpdateInsideUpdate) { 
          error('An update (setState, replaceState, or forceUpdate) was scheduled ' + 'from inside an update function. Update functions should be pure, ' + 'with zero side-effects. Consider using componentDidUpdate or a ' + 'callback.');
    
          didWarnUpdateInsideUpdate = true;
        }
      }
    }

fiber reconciler 会在挂载组件时调用 initializeUpdateQueue 函数初始化 fiber 节点的 updateQueue 队列。只有挂载的组件才会有有效的状态更新，卸载的组件没必要使用 updateQueue 属性。enqueueUpdate 函数将 update 添加到 pendingQueue 队列中，典型如类组件在 setState 方法调用期间将 update 添加到 pendingQueue 中。

发表评论取消回复

表情：

评论列表（有 0 条评论，146人围观）

还没有评论，来说两句吧...

相关阅读

相关 React 源码讲解第 6 节- expirationTime 公式

React 源码讲解第 6 节- expirationTime 公式入口 currentTime 源码 c

我不是女神ヾ/ 2022年12月11日 07:28/ 0 赞/ 147 阅读

相关 React 源码讲解第 5 节- Update 对象和 UpdateQueue 对象

React 源码讲解第 5 节- Update 对象源码 Update 数据结构 Update 的四种类型

本是古典何须时尚/ 2022年12月11日 04:29/ 0 赞/ 147 阅读

相关 React 源码讲解第 4 节- Fiber 对象

React 源码讲解第 4 节- Fiber 对象 Fiber 的三层含义 Fiber 的八种类型 Fibe

客官°小女子只卖身不卖艺/ 2022年12月09日 05:12/ 0 赞/ 166 阅读

相关 React 源码讲解第 3 节- FiberRoot 对象

React 源码讲解第 3 节- FiberRoot 对象 FiberRoot 作用 FiberRoot 与 RootFiber

末蓝、/ 2022年12月09日 04:52/ 0 赞/ 172 阅读

相关 React 源码讲解第 2 节-入口 API 之 ReactDOM.render

React 源码讲解第 2 节-入口 API 之 ReactDOM.render 前言源码分析

ゝ一世哀愁。/ 2022年12月06日 15:48/ 0 赞/ 174 阅读

相关 React 源码讲解第 1 节-准备工作

React 源码讲解第 1 节-准备工作 1. 先按住 shift ，同时右击选择【在此处打开PowerShell 窗口】。 2. 在打开的窗口中执行 `create

迈不过友情╰/ 2022年12月06日 15:16/ 0 赞/ 178 阅读

相关 React学习-- React源码（5）diff算法

diff作为VirtualDOM的加速器，其算法上的改进优化是React整个界面渲染的基础和性能的保障。 diff会帮助我们就散出VirtualDOM中真正变化的部分，并只针

客官°小女子只卖身不卖艺/ 2022年06月13日 20:19/ 0 赞/ 185 阅读

相关事件对象和事件源对象

事件对象 <body> <div style="width: 300px;height: 300px;background: red;">

港控/mmm°/ 2022年05月26日 11:08/ 0 赞/ 201 阅读

相关第31节：Java基础-类与对象

![标题图][1240] 前言 Java基础-类与对象，方法的重载，构造方法的重载，static关键字，main()方法，this关键字，包，访问权限，类的继承，继承性

深碍√TFBOYSˉ_/ 2021年09月16日 03:32/ 0 赞/ 379 阅读

相关第四节：详细讲解Java中的类和面向对象思想

前言大家好，我是 `Vic`，今天给大家带来`详细讲解Java中的类和面向对象思想`的概述，希望你们喜欢类和面向对象在Java中怎样理解对象，创建对象和引用

古城微笑少年丶/ 2021年09月15日 03:10/ 0 赞/ 299 阅读