React笔记-首次渲染

最新推荐文章于 2022-01-13 22:19:16 发布

weixin_34291004

最新推荐文章于 2022-01-13 22:19:16 发布

阅读量121

点赞数

原文链接：http://www.cnblogs.com/raion/p/10704050.html

版权

渲染机制

渲染机制主要分为两部分: 首次渲染和更新渲染。

首次渲染

首先通过一个小例子，来讲解首次渲染过程。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

import React from 'react';
import ReactDOM from 'react-dom';

class ClickCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  handleClick = () => {
    this.setState((state) => {
      return {count: state.count + 1};
    });
  }
  render() {
    return [
      <button key="1" onClick={this.handleClick}>Update counter</button>,
      <span key="2">{this.state.count}</span>,
    ]
  }
}
ReactDOM.hydrate(<ClickCounter />, document.getElementById('root'));

程序运行到ReactDOM.hydrate时，其中的<ClickCounter />已被babel转换为React.createElement(ClickCounter, null)，生成的element如下:

{
    $$typeof: Symbol(react.element),
    key: null,
    props: {},
    ref: null,
    type: ClickCounter
}

接下来执行hydrate函数，生成root节点。首先了解下fiber的部分数据结构。

alternate（对应的workInProgress或fiber）
stateNode（关联的fiber，组件实例或者DOM节点）
type（组件或HTML tag，如div，span等）
tag（类型，详见workTags）
effectTag（操作类型，详见sideEffectTag）
updateQueue（更新队列）
memoizedState（state）
memoizedProps（props）
pendingProps（VDOM）
return（父fiber）
sibling（兄弟fiber）
child（孩子fiber）
firstEffect（第一个待处理的effect fiber）
lastEffect（最后一个待处理的effect fiber）

首次渲染会以同步渲染的方式进行渲染，首先创建一个update，将element装载到其payload属性中，然后合并到root.current.updateQueue，如果没有updateQueue会创建一个。我们暂且将root.current看成HostRoot。

接着根据HostRoot克隆一棵workInProgress更新树。将HostRoot.alternate指向workInProgress，workInProgress.alternate指向HostRoot。然后进入workLoop进行更新树操作部分。workLoop的任务也很简单，就是将所有节点的更新挂载到更新树上。下面详细看看reconciliation阶段。

reconciliation阶段

reconciliation的核心在于workLoop。workLoop会以workInProgress为起点，即克隆的HostRoot，不断向下寻找。如果workInProgress.child不为空，会进行diff；如果为空会创建workInProgress.child`。

// 第一次循环nextUnitOfWork为workInProgress
function workLoop(isYieldy) {
  if (!isYieldy) {
    // Flush work without yielding
    while (nextUnitOfWork !== null) {
      nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
    }
  } else {
    // Flush asynchronous work until there's a higher priority event
    while (nextUnitOfWork !== null && !shouldYieldToRenderer()) {
      nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
    }
  }
}

因为只涉及首次渲染，所以这里将performUnitOfWork简单化。beginWork根据workInProgress.tag选择不同的处理方式。先暂且看看如何处理HostRoot。进入updateHostRoot方法，先进行workInProgress.updateQueue的更新，计算新的state，将update.baseState和workInProgress.memoizedState指向新的state。这里新的state装载的是element。

接下来调用createFiberFromElement创建fiber，将workInProgress.child指向该fiber，fiber.return指向workInProgress。

function performUnitOfWork(workInProgress) {
  let next = beginWork(workInProgress); // 创建workInProgress.child并返回
  if (next === null) { // 没有孩子，收集effect list，返回兄弟或者父fiber
      next = completeUnitOfWork(workInProgress);
  }
  return next;
}

function beginWork(workInProgress) {
  switch(workInProgress.tag) {
    case HostRoot:
      return updateHostRoot(current, workInProgress, renderExpirationTime);
    case ClassComponent: 
      ...
  }
}

用一张图体现更新树创建完成后的样子:

当workInProgress没有孩子时，即创建的孩子为空。说明已经到达底部，开始收集effect。

function completeUnitOfWork(workInProgress) {
  while (true) {
    let returnFiber = workInProgress.return;
    let siblingFiber = workInProgress.sibling;
    nextUnitOfWork = completeWork(workInProgress);
　　 ...// 省略收集effect list过程
    if (siblingFiber !== null) {
      // If there is a sibling, return it
      // to perform work for this sibling
      return siblingFiber;
    } else if (returnFiber !== null) {
      // If there's no more work in this returnFiber,
      // continue the loop to complete the parent.
      workInProgress = returnFiber;
      continue;
    } else {
      // We've reached the root.
      return null;
    }
  }
}
function completeWork(workInProgress) {
  //根据workInProgress.tag创建、更新或删除dom
  switch(workInProgress.tag) {
    case HostComponent: 
      ...
  }
  return null;
}

协调算法过程结束后，workInProgress更新树更新完毕，收集的effect list如下:

commit阶段

effect list(链表)是reconciliation阶段的结果，决定了哪些节点需要插入、更新和删除，以及哪些组件需要调用生命周期函数。firstEffect记录第一个更新操作，firstEffect.nextEffect（fiber）记录下一个，然后继续通过其nextEffect不断往下寻找直至为null。下面是commit阶段的主要流程:

// finishedWork为更新树
function commitRoot(root, finishedWork) {
    commitBeforeMutationLifecycles();
    commitAllHostEffects();
    root.current = finishedWork;
    commitAllLifeCycles();
}

变量nextEffect每次执行完上面一个函数会被重置为finishedWork。

commitBeforeMutationLifecycles

检查effect list中每个fiber是否有Snapshot effect，如果有则执行getSnapshotBeforeUpdate。

// 触发getSnapshotBeforeUpdate
function commitBeforeMutationLifecycles() {
  while (nextEffect !== null) {
    const effectTag = nextEffect.effectTag;
    if (effectTag & Snapshot) {
      const current = nextEffect.alternate;
      commitBeforeMutationLifeCycles(current, nextEffect);
    }
    nextEffect = nextEffect.nextEffect;
  }
}

commitAllHostEffects

提交所有effect，实现dom的替换、更新和删除。

function commitAllHostEffects() {
  while(nextEffect !== null) {
    var effectTag = nextEffect.effectTag;
    var primaryEffectTag = effectTag & (Placement | Update | Deletion);
    switch (primaryEffectTag) {
      case Placement: {
        commitPlacement(nextEffect);
        ...
      }
      case PlacementAndUpdate: {
        commitPlacement(nextEffect);
        var _current = nextEffect.alternate;
        commitWork(_current, nextEffect);
        ...
      }
      case Update: {
        var _current2 = nextEffect.alternate;
        commitWork(_current2, nextEffect); 
        ...
      }
      case Deletion: {// 触发componentWillUnmout
        commitDeletion(nextEffect);
        ...
      }
    }
    nextEffect = nextEffect.nextEffect;
  }
}

commitAllLifeCycles

触发componentDidMount或componentDidUpdate

function commitAllLifeCycles(finishedRoot, committedExpirationTime) {
  while (nextEffect !== null) {
    var effectTag = nextEffect.effectTag;

    if (effectTag & (Update | Callback)) {
      var current$$1 = nextEffect.alternate;
      commitLifeCycles(finishedRoot, current$$1, nextEffect, committedExpirationTime);
    }
    if (effectTag & Ref) {
      commitAttachRef(nextEffect);
    }
    if (effectTag & Passive) {
      rootWithPendingPassiveEffects = finishedRoot;
    }

    nextEffect = nextEffect.nextEffect;
  }
}

总结

这里并未逐一细说，不想读起来直犯困，更多讲述了大概流程。如果觉得有疑惑的地方，也知道该在什么地方找到对应的源码，解答疑惑。

更好的阅读体验在我的github，欢迎?提issue。

转载于:https://www.cnblogs.com/raion/p/10704050.html

weixin_34291004

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React笔记-首次渲染

渲染机制渲染机制主要分为两部分: 首次渲染和更新渲染。首次渲染首先通过一个小例子，来讲解首次渲染过程。<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>React App</title> </head...
复制链接

扫一扫