账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    React16.8源码expirationTime大小与优先级的问题
    42
    0

    updateContainer里的expirationTime

    updateContainer里计算了expirationTime,这里网上说的是越大任务优先级越高,但后面为什么unstable_scheduleCallback里又去算了一遍,且算法完全不同

    export function updateContainer(
      element: ReactNodeList,
      container: OpaqueRoot,
      parentComponent: ?React$Component<any, any>,
      callback: ?Function,
    ): ExpirationTime {
      // 取出容器的 fiber 对象,也就是 fiber root
      const current = container.current;
      // 计算时间
      const currentTime = requestCurrentTime();
      // expirationTime 代表优先级,数字越大优先级越高
      // sync 的数字是最大的,所以优先级也是最高的
      const expirationTime = computeExpirationForFiber(currentTime, current);
      return updateContainerAtExpirationTime(
        element,
        container,
        parentComponent,
        expirationTime,
        callback,
      );
    }
    //computeExpirationForFiber部分代码
      let expirationTime;
      const priorityLevel = getCurrentPriorityLevel();
      switch (priorityLevel) {
        case ImmediatePriority:
          expirationTime = Sync;//MAX_SIGNED_31_BIT_INT:1073741823
          break;
        case UserBlockingPriority:
          // TODO: Rename this to computeUserBlockingExpiration
          expirationTime = computeInteractiveExpiration(currentTime);
          break;
        case NormalPriority:
        case LowPriority: // TODO: Handle LowPriority
          // TODO: Rename this to... something better.
          expirationTime = computeAsyncExpiration(currentTime);
          break;
        case IdlePriority:
          expirationTime = Never;
          break;
        default:
          invariant(false, 'Expected a valid priority level');
      }

    unstable_scheduleCallback中的expirationTime

    这里ImmediatePriority对应的IMMEDIATE_PRIORITY_TIMEOUT是-1,IdlePriority(Never times out)才是最大的整数,那算出来的expirationTime就变成了越小优先级越高了

    switch (priorityLevel) {
          case ImmediatePriority:
            expirationTime = startTime + IMMEDIATE_PRIORITY_TIMEOUT;
            break;
          case UserBlockingPriority:
            expirationTime = startTime + USER_BLOCKING_PRIORITY;
            break;
          case IdlePriority:
            expirationTime = startTime + IDLE_PRIORITY;//maxSigned31BitInt:1073741823
            break;
          case LowPriority:
            expirationTime = startTime + LOW_PRIORITY_TIMEOUT;
            break;
          case NormalPriority:
          default:
            expirationTime = startTime + NORMAL_PRIORITY_TIMEOUT;
        }

    疑问

    1.查了下资料updateContainer中的expirationTime经过一个算法有将趋于相同的两个到期时间的更新任务计算成同一个expirationTime,以达到合并update队列批量更新的功能,但是源码里我也没看到哪里做了特别的处理啊,有没有人知道是在哪里合并的。。。
    2.为什么两个地方分别用两种不同的方式来计算expirationTime,且代表的优先级关系是向反的,updateContainer里到期时间越大说的是优先级越高好难理解,为什么React这么处理啊
    3.大家有没有专门介绍expirationTime的文章推荐,我看了很多篇都没把这里说清楚只是在介绍fiber执行的流程

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • の爲尔╭倾鈊 普通会员 1楼

      在React中,expirationTime参数用于设置组件的过期时间。这个时间是秒数,而不是毫秒数。例如,如果你有一个像这样设置的组件:

      ```jsx import React from 'react';

      const MyComponent = ({ expirationTime }) => { // ... }; ```

      expirationTime的默认值是0,这意味着组件将在第一个生命周期钩子(componentDidMount)后立即过期。

      如果你想设置优先级,你可以使用priority参数。这个参数是一个整数,表示组件应该被处理的顺序。例如:

      ```jsx import React from 'react';

      const MyComponent = ({ expirationTime, priority }) => { // ... }; ```

      在这个例子中,MyComponent的优先级是1,这意味着它应该被添加到组件的渲染顺序的前面。

      注意,expirationTimepriority是React 16.8中引入的新特性,所以你需要使用import { useEffect } from 'react'来导入它们。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部