关于React源码-2

发表于 | 分类于
本文字数： 18k | 阅读时长 ≈ 32 分钟

'React 中的更新'

关于React源码-1 - 顶层API

参考和引用/使用的链接 ↓

源码概览

参考源码解析博客

编撰的时候 ReactJS 的版本已经来到了 v16.9

但是辅学的教程用的是 v16.6 所以会以 v16.6 为主的基础上参考 v16.9 的代码。

react-dom-render

用 create-react-app 创建的项目的项目入口 index.js 里都会有下面这个代码

1
ReactDOM.render(<App />, document.getElementById('root'))

也都清楚是调用了 ReactDOM 的 render 方法把 App 这个组件挂在 id 为 root 的节点上。

源码

在 packages/react-dom/src/client/ReactDOM.js 里
因为 v16.6 和 v16.9 的代码差异较大，采用的源码都是 v16.9 的。
尤其在 legacyRenderSubtreeIntoContainer() 里开始体现出来，不过其实就算看起来有差异，真正比较起来思路并没有变化，就连 TODO 注释都一样。。。

ReactDOM.render()
1
2
3
4
5
6
7
8
9
10
11
const ReactDOM: Object = {
  ...
  render(
    element: React$Element<any>,
    container: DOMContainer,
    callback: ?Function,
  ) {
    return legacyRenderSubtreeIntoContainer(null, element, container, false, callback);
  },
  ...
}

可以看到 render 函数接收三个参数，分别为 React 元素、DOM 容器以及一个 callback 。
返回值是调用了 legacyRenderSubtreeIntoContainer 函数，除了把 render 的参数都传入之外，第一个和第四个参数分别为 null 和 false 。

legacyRenderSubtreeIntoContainer()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// 有做一些删减 
function legacyRenderSubtreeIntoContainer(
  parentComponent: ?React$Component<any, any>,
  children: ReactNodeList,
  container: DOMContainer,
  forceHydrate: boolean,
  callback: ?Function,
) {
  if (__DEV__) {
    ... 
  }
  // TODO: Without `any` type, Flow says "Property cannot be accessed on any
  // member of intersection type." Whyyyyyy.
  let root: _ReactSyncRoot = (container._reactRootContainer: any);
  let fiberRoot;
  if (!root) {
    // Initial mount
    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
      container,
      forceHydrate,
    );
    fiberRoot = root._internalRoot;
    if (typeof callback === 'function') {
      const originalCallback = callback;
      callback = function() {
        const instance = getPublicRootInstance(fiberRoot);
        originalCallback.call(instance);
      };
    }
    // Initial mount should not be batched. 
    // 这里不使用 batchedUpdate 原因是因为第一次渲染需要快
    unbatchedUpdates(() => {
      updateContainer(children, fiberRoot, parentComponent, callback);
    });
  } else {
    fiberRoot = root._internalRoot;
    if (typeof callback === 'function') {
      const originalCallback = callback;
      callback = function() {
        const instance = getPublicRootInstance(fiberRoot);
        originalCallback.call(instance);
      };
    }
    // Update
    updateContainer(children, fiberRoot, parentComponent, callback);
  }
  return getPublicRootInstance(fiberRoot);
}

调用函数之后，因为传入的 DOMContainer 是一个普通的 DOM 节点，所以 !root 会是 true 所以 16 行会进入 if 语句块，给 root 参数和 container 的 _reactRootContainer 属性进行了赋值。赋值操作引用了 legacyCreateRootFromDOMContainer() 函数，

legacyCreateRootFromDOMContainer()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function legacyCreateRootFromDOMContainer(
  container: DOMContainer,
  forceHydrate: boolean,
): _ReactSyncRoot {
  const shouldHydrate =
    forceHydrate || shouldHydrateDueToLegacyHeuristic(container);
  // First clear any existing content.
  // 如上面的原注释所说，这里的操作就是删除了所有的子节点。
  if (!shouldHydrate) {
    let warned = false;
    let rootSibling;
    while ((rootSibling = container.lastChild)) {
      if (__DEV__) {
        ...
      }
      container.removeChild(rootSibling);
    }
  }
  if (__DEV__) {
    ...
  }
  // Legacy roots are not batched.
  return new ReactSyncRoot(container, LegacyRoot, shouldHydrate);
}

函数里又声明了一个变量 shouldHydrate ,如果传入的 forceHydrate 不为 true 的话就会调用 shouldHydrateDueToLegacyHeuristic(container)，

shouldHydrateDueToLegacyHeuristic()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function shouldHydrateDueToLegacyHeuristic(container) {
  //这个函数又引用了 getReactRootElementInContainer() ，函数源码就在下面
  const rootElement = getReactRootElementInContainer(container);
  return !!(
    rootElement &&
    // 这里的 ELEMENT_NODE 的值是 1 就是判断是否是普通节点。
    rootElement.nodeType === ELEMENT_NODE &&
    // 这里的 ROOT_ATTRIBUTE_NAME 是 'data-reactroot'
    rootElement.hasAttribute(ROOT_ATTRIBUTE_NAME)
  );
}

function getReactRootElementInContainer(container: any) {
  // 首先判断一下容器是不是 null
  if (!container) {
    return null;
  }
  // 再判断一下容器是不是 document ，这里的 DOUCMENT_NODE 值是 9
  // 就是 document ，或者说是 window.document
  if (container.nodeType === DOCUMENT_NODE) {
    // 如果 container 是 document ，则返回文档对象。
    return container.documentElement;
  } else {
    // 如果不是 （一般来说不是的 ，div 这种节点的 nodeType 是 1
    // 则返回容器的 firstChild 。但是一般来说容器是 <div id="root"></div>
    // 所以返回值会是 null。
    return container.firstChild;
  }
}

其实看完了这个函数，也清楚的知道每一步在做什么，甚至都知道如果容器是这个 < div id=”root” >< div/ > （这里为了不让md识别到标签，在标签里添加了空格，所以看起来会有点奇怪），shouldHydrateDueToLegacyHeuristic() 返回的就是 false ，也还是不清楚这里的意义是什么。

↑ 解决的 参考资料

其实这一步的意义在于 React 虽然知道调用的 ReactDOM.render() ，但是还是会通过这一步进行检测是否可以 hydrate 。如果这一步返回的是 true, 则会在 if (__DEV__) 里进行提醒，提醒你说这里建议使用 hydrate 。

最后移除了所有的子节点之后，返回了一个 ReactSyncRoot 实例。

ReactSyncRoot
1
2
3
4
5
6
7
8
9
function ReactSyncRoot(
  container: DOMContainer,
  tag: RootTag,
  hydrate: boolean,
) {
  // Tag is either LegacyRoot or Concurrent Root
  const root = createContainer(container, tag, hydrate);
  this._internalRoot = root;
}

createContainer 是 react-reconciler 包里的一个函数，react-reconciler 是进行与平台无关的节点操作的包。
传入的参数是分别是 container, LegacyRoot 以及 shouldHydrate 。
第 1、3 个没什么好说的 ，第二个 LegacyRoot 在 packages/shared/ReactRootTags.js 中定义 ，值为 0

createContainer()
1
2
3
4
5
6
7
8
9
// 位置： packages/react-reconciler/ReactFiberReconciler.js
export function createContainer(
  containerInfo: Container,
  tag: RootTag,
  hydrate: boolean,
): OpaqueRoot {
  // 可以看到返回了一个 FiberRoot
  return createFiberRoot(containerInfo, tag, hydrate);
}

再再再回过头，回到 legacyRenderSubtreeIntoContainer() , 给 fiberRoot 赋值

1
fiberRoot = root._internalRoot;

在之后对传入的 callback 函数进行了一些封装。
最后立即执行了 updateContainer() 函数。

updateContainer()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
export function updateContainer(
  element: ReactNodeList, // ReactDOM.render() 的第一个参数
  container: OpaqueRoot, // fiberRoot
  parentComponent: ?React$Component<any, any>, // null
  callback: ?Function,  // 封装好的 callback
): ExpirationTime {
  const current = container.current;
  const currentTime = requestCurrentTime();
  if (__DEV__) {
    ...
  }
  const suspenseConfig = requestCurrentSuspenseConfig();
  const expirationTime = computeExpirationForFiber(
    currentTime,
    current,
    suspenseConfig,
  );
  return updateContainerAtExpirationTime(
    element,
    container,
    parentComponent,
    expirationTime,
    suspenseConfig,
    callback,
  );
}

然后返回值调用了 updateContainerAtExpirationTime() 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
export function updateContainerAtExpirationTime(
  element: ReactNodeList,
  container: OpaqueRoot,
  parentComponent: ?React$Component<any, any>,
  expirationTime: ExpirationTime,
  suspenseConfig: null | SuspenseConfig,
  callback: ?Function,
) {
  // TODO: If this is a nested container, this won't be the root.
  const current = container.current;
  if (__DEV__) {
    ...
  }
  const context = getContextForSubtree(parentComponent);
  if (container.context === null) {
    container.context = context;
  } else {
    container.pendingContext = context;
  }
  return scheduleRootUpdate(
    current,
    element,
    expirationTime,
    suspenseConfig,
    callback,
  );
}

然后返回值又调用了 scheduleRootUpdate()

scheduleRootUpdate()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function scheduleRootUpdate(
  current: Fiber,
  element: ReactNodeList,
  expirationTime: ExpirationTime,
  suspenseConfig: null | SuspenseConfig,
  callback: ?Function,
) {
  if (__DEV__) {
    ...
  }
  const update = createUpdate(expirationTime, suspenseConfig);
  // Caution: React DevTools currently depends on this property
  // being called "element".
  update.payload = {element};
  callback = callback === undefined ? null : callback;
  if (callback !== null) {
    warningWithoutStack(
      typeof callback === 'function',
      'render(...): Expected the last optional `callback` argument to be a ' +
        'function. Instead received: %s.',
      callback,
    );
    update.callback = callback;
  }
  if (revertPassiveEffectsChange) {
    flushPassiveEffects();
  }
  enqueueUpdate(current, update);
  scheduleWork(current, expirationTime);
  return expirationTime;
}

这里就完成了整个 ReactDOM.render()，虽然很多步骤里很多调用、定义都没搞清楚（调用分支树也太大了），但是已经把整个流程大致看了一遍了，最后在 scheduleRootUpdate() 创建了一个 update ，来实现更新。

fiberRoot

ReactDOM.render() 创建的一个对象。

  1. 包含了应用挂载的目标节点的信息（dom container）
  2. 记录整个应用更新过程的各种信息
2019-08-12 更新

在上面提到的 legacyRenderSubtreeIntoContainer() 通过好几层函数的引用，最后一层是 createContainer() ，生成了一个 fiberRoot。

createFiberRoot() 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// 删除了 flow 的类型代码和注释
export function createFiberRoot(containerInfo, tag, hydrate) {
  const root = new FiberRootNode(containerInfo, tag, hydrate);
  const uninitializedFiber = createHostRootFiber(tag);
  root.current = uninitializedFiber;
  uninitializedFiber.stateNode = root;
  return root;
}
function FiberRootNode(containerInfo, tag, hydrate) {
  // The type of root (legacy, batched, concurrent, etc.)
  this.tag = tag;
  // 在上面 createFiberRoot() 里可以看到这么一个语句
  // root.current  = uninitializedFiber, 就是 Root 节点的 Fiber
  // The currently active root fiber. This is the mutable root of the tree.
  this.current = null;
  // dom 节点 ReactDOM.render 的第二个参数
  this.containerInfo = containerInfo;
  // 在 react-dom 中不会被使用到
  // Used only by persistent updates.
  this.pendingChildren = null;
  this.pingCache = null;
  this.finishedExpirationTime = NoWork;
  // 每次更新会更新优先级最高的，而 finishedWord 
  // 用于标记更新完的上一个任务
  this.finishedWork = null;
  // 这个和 Suspense 有关
  this.timeoutHandle = noTimeout;
  // 顶层 context 对象
  // 只有在主动调用 renderSubtreeIntoContainer 时才会有
  // Top context object, used by renderSubtreeIntoContainer
  this.context = null;
  this.pendingContext = null;
  // 是否需要和 dom 原来就存在的节点合并的标志
  this.hydrate = hydrate;
  this.firstBatch = null;
  // Node returned by Scheduler.scheduleCallback
  this.callbackNode = null;
  // Expiration of the callback associated with this root
  this.callbackExpirationTime = NoWork;
  // The earliest pending expiration time that exists in the tree
  this.firstPendingTime = NoWork;
  // The latest pending expiration time that exists in the tree
  this.lastPendingTime = NoWork;
  // The time at which a suspended component pinged the root to render again
  this.pingTime = NoWork;

  if (enableSchedulerTracing) {
    this.interactionThreadID = unstable_getThreadID();
    this.memoizedInteractions = new Set();
    this.pendingInteractionMap = new Map();
  }
}

FiberRootNode 的 current 也是一个 fiber ，React 的节点结构是树状的，而每一个节点都会有一个对应的 fiber ,这里的 container 是节点的容器，也是节点树的 root ，所以这个 current 也就是 fiber 树的根（root）。

Fiber

每一个 ReactElement 都会有一个对应的 Fiber 对象。
Fiber 对象会记录节点的各种状态，比如说 class component 的 props 、state 会先在 Fiber 上，等节点更新了才会把 props 、state 放在节点的 this.state 、this.props 上。
还有就是因为每一个 ReactElement 都有对应的 Fiber ，Fiber 会串联整个应用形成节点树。

来看一下 Fiber 的源码

Fiber
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
function FiberNode(
  tag: WorkTag,
  pendingProps: mixed,
  key: null | string,
  mode: TypeOfMode,
) {
  // Instance
  // Tag identifying the type of fiber.
  this.tag = tag;
  // ReactElement 里的 key
  this.key = key;
  // ReactElement.type ，就是调用
  this.elementType = null;
  // 用于标记 Lazy 组件 resolved 之后
  // 组件是 class component 还是 function component
  this.type = null;
  // 节点实例，function component 没有 stateNode
  // The local state associated with this fiber.
  this.stateNode = null;

  // Fiber
  //指向他在Fiber节点树中的`parent`，用来在处理完这个节点之后向上返回
  this.return = null;
  // 指向自己的第一个子节点
  this.child = null;
  // 指向自己的兄弟结构
  // 兄弟节点的return指向同一个父节点
  this.sibling = null;
  this.index = 0;
  // 组件的 key
  this.ref = null;

  // 新的变动带来的新的 props
  this.pendingProps = pendingProps;
  // 上一次渲染完成之后的 props
  this.memoizedProps = null;
  // 该Fiber对应的组件产生的 Update 会存放在这个队列里面
  this.updateQueue = null;
  // 上一次渲染的时候的state
  this.memoizedState = null;
  // 如果有的话 就是这个 Fiber 依赖的 context 或者 events
  this.dependencies = null;

  this.mode = mode;

  // Effects
  this.effectTag = NoEffect;
  // Singly linked list fast path to the next fiber with side-effects.
  this.nextEffect = null;

  // 字面意思 第一个副作用，最后一个副作用
  this.firstEffect = null;
  this.lastEffect = null;

  // Represents a time in the future by which this work should be completed.
  // Does not include work found in its subtree.
  this.expirationTime = NoWork;
  // This is used to quickly determine if a subtree has no pending changes.
  // 快速确定子树中是否有不在等待的变化
  this.childExpirationTime = NoWork;

  // 在Fiber树更新的过程中，每个Fiber都会有一个跟其对应的Fiber
  // 我们称他为`current <==> workInProgress`
  // 在渲染完成之后他们会交换位置
  this.alternate = null;

  if (enableProfilerTimer) {
    // Note: The following is done to avoid a v8 performance cliff.
    //
    // Initializing the fields below to smis and later updating them with
    // double values will cause Fibers to end up having separate shapes.
    // This behavior/bug has something to do with Object.preventExtension().
    // Fortunately this only impacts DEV builds.
    // Unfortunately it makes React unusably slow for some applications.
    // To work around this, initialize the fields below with doubles.
    //
    // Learn more about this here:
    // https://github.com/facebook/react/issues/14365
    // https://bugs.chromium.org/p/v8/issues/detail?id=8538
    this.actualDuration = Number.NaN;
    this.actualStartTime = Number.NaN;
    this.selfBaseDuration = Number.NaN;
    this.treeBaseDuration = Number.NaN;

    // It's okay to replace the initial doubles with smis after initialization.
    // This won't trigger the performance cliff mentioned above,
    // and it simplifies other profiler code (including DevTools).
    this.actualDuration = 0;
    this.actualStartTime = -1;
    this.selfBaseDuration = 0;
    this.treeBaseDuration = 0;
  }
  if (__DEV__) {
    ...
  }
}

关于 fiber 的 child / sibling / return , 看图。

child / sibling / return

那么已经大概的浏览了一下 FiberRoot 和 Fiber 这两个东西。
既然是 v16 最亮眼的地方，应用起来也肯定很亮眼啦~

2019-08-19 更新

Update

Fiber 对象里有一个属性叫 updateQueue ，里面存放的东西，就是 update 。

update 用于记录组件状态的改变。
update 可以有多个同时存在，比如说有三个 setState() 则会有三个 update 存在 updateQueue 里，而不会说出现一个 update 就进行一次更新。

update 和 updateQueue 的数据结构

update v16.9
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
export function createUpdate(expirationTime, suspenseConfig) {
  let update = {
    // 更新过期的时间
    expirationTime, 
    suspenseConfig,

    // tag 的值可以为 0-3 ，分别对应以下情况
    // export const UpdateState = 0;
    // export const ReplaceState = 1;
    // export const ForceUpdate = 2;
    // export const CaptureUpdate = 3;
    tag: UpdateState,
    // 更新内容，比如`setState`接收的第一个参数
    payload: null,
    // 对应的回调，`setState`，`render`都有
    callback: null,
    // 指向下一个更新
    next: null,
    // 指向下一个`side effect`
    nextEffect: null,
  };
  if (__DEV__) {
    update.priority = getCurrentPriorityLevel();
  }
  return update;
}
UpdateQueue v16.9
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export function createUpdateQueue(baseState){
  const queue = {
    baseState,
    // 第一个 update
    firstUpdate: null, 
    // 最后一个 update
    lastUpdate: null,
    // 第一个因为渲染错误而被捕获的 update
    firstCapturedUpdate: null,
    // 最后一个因为渲染错误而被捕获的 update
    lastCapturedUpdate: null,
    // 第一/最后一个 side effect
    firstEffect: null,
    lastEffect: null,
    // 第一个和最后一个捕获产生的`side effect`
    firstCapturedEffect: null,
    lastCapturedEffect: null,
  };
  return queue;
}

update 和 updateQueue 的数据结构

在生成了一个 update 之后，调用了 enqueueUpdate(current, update)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
export function enqueueUpdate(fiber, update) {
  // Update queues are created lazily.
  const alternate = fiber.alternate;
  let queue1;
  let queue2;
  // alternate 的作用相当于 fiber 的替身，进行更新之后会和 fiber 互换。
  if (alternate === null) {
    // There's only one fiber.
    // alternate 不存在说明 fiber 刚创建，还没有过更新，只有单纯的一个 fiber
    queue1 = fiber.updateQueue;
    queue2 = null;
    if (queue1 === null) {
      // 如果 fiber.updateQueue 不存在，就新建一个 queue
      queue1 = fiber.updateQueue = createUpdateQueue(fiber.memoizedState);
    }
  } else {
    // There are two owners.
    // 接下来就是确保如果存在 alternate 
    // 则 fiber 和 alternate 都要有自己的 updateQueue
    queue1 = fiber.updateQueue;
    queue2 = alternate.updateQueue;
    if (queue1 === null) {
      if (queue2 === null) {
        // Neither fiber has an update queue. Create new ones.
        queue1 = fiber.updateQueue = createUpdateQueue(fiber.memoizedState);
        queue2 = alternate.updateQueue = createUpdateQueue(
          alternate.memoizedState,
        );
      } else {
        // Only one fiber has an update queue. Clone to create a new one.
        queue1 = fiber.updateQueue = cloneUpdateQueue(queue2);
      }
    } else {
      if (queue2 === null) {
        // Only one fiber has an update queue. Clone to create a new one.
        queue2 = alternate.updateQueue = cloneUpdateQueue(queue1);
      } else {
        // Both owners have an update queue.
      }
    }
  }
  if (queue2 === null || queue1 === queue2) {
    // There's only a single queue.
    // 只有一个 queue 时，把 update 挂在 queue1 的最后面
    appendUpdateToQueue(queue1, update);
  } else {
    // There are two queues. We need to append the update to both queues,
    // while accounting for the persistent structure of the list — we don't
    // want the same update to be added multiple times.
    if (queue1.lastUpdate === null || queue2.lastUpdate === null) {
      // One of the queues is not empty. We must add the update to both queues.
      appendUpdateToQueue(queue1, update);
      appendUpdateToQueue(queue2, update);
    } else {
      // Both queues are non-empty. The last update is the same in both lists,
      // because of structural sharing. So, only append to one of the lists.
      appendUpdateToQueue(queue1, update);
      // But we still need to update the `lastUpdate` pointer of queue2.
      queue2.lastUpdate = update;
    }
  }

  if (__DEV__) {
    ...
  }
}
appendUpdateToQueue
1
2
3
4
5
6
7
8
9
10
11
function appendUpdateToQueue(queue, update) {
  // Append the update to the end of the list.
  if (queue.lastUpdate === null) {
    // Queue is empty
    // 如果队列是空的，则把队列的第一个/最后一个 update指向统一个 update
    queue.firstUpdate = queue.lastUpdate = update;
  } else {
    queue.lastUpdate.next = update;
    queue.lastUpdate = update;
  }
}
0%