【译】React及React Fiber基础的设想理念

2024年1月20日 196次阅读来源: ne_smalltown

媒介

本文主假如对收集到的一些官方或许其他平台的文章举行翻译，中心能够交叉一些个人的邃晓，若有毛病疏漏的处所，还望批评指正。笔者并未研讨过源码，只是愿望本文成为那些inspire你的东西的一部份，从而在今后一同去议论和研讨React Fiber。

注：绝大多数状况下，以下的第一人称不代表译者，而是对应文章的作者，请注重辨别。

React basic

基础的理论观点

这篇文章是我的一次尝试，愿望能够形式化的引见关于react自身的一些理念模子。目的在于基于归纳推理的体式格局，形貌那些给我们灵感让我们举行如许的设想的源泉。

固然，这里的一些设想是具有争议的，实际的设想或许也会有bug或许疏漏。然则，这也是一个好的最先让我们去形式化地议论这些。同时，假如你有更好的主意，也迎接pr。以下让我们沿着这个思绪，从简朴到庞杂的去思索这一系列题目，没必要忧郁，这里没有太多详细的框架细节。

实际的关于React的完成是充溢务虚主义的，渐进式的，算法优化的，新老代码交替的，种种调试东西以及任何你能想到的让他变成越发有效的东西。固然，这些东西也像版本迭代一样，它们的存在是短暂的，假如它们充足有效，我们就会不停的更新他们。再次声明，实际的完成是异常异常庞杂的。

转换

React最中心的前提是，UI仅仅是数据->数据的映照。雷同的输入意味着雷同输出。异常简朴的纯函数。

function NameBox(name) {
  return { fontWeight: 'bold', labelContent: name };
}

'Sebastian Markbåge' ->
{ fontWeight: 'bold', labelContent: 'Sebastian Markbåge' };

笼统

然则，并不是一切的UI都能如许做，因为，有些UI是异常庞杂的。所以，很重要的一点是，UI能够被笼统成许许多多可复用的小块，同时不暴露这些小块的内部完成细节。就像在一个函数中挪用另一个函数一样。

function FancyUserBox(user) {
  return {
    borderStyle: '1px solid blue',
    childContent: [
      'Name: ',
      NameBox(user.firstName + ' ' + user.lastName)
    ]
  };
}

{ firstName: 'Sebastian', lastName: 'Markbåge' } ->
{
  borderStyle: '1px solid blue',
  childContent: [
    'Name: ',
    { fontWeight: 'bold', labelContent: 'Sebastian Markbåge' }
  ]
};

组合

为了完成可复用这一特征，仅仅只是简朴复用恭弘=叶恭弘子节点，每次都为它们竖立一个新的容器是远远不够的。同时我们须要在容器（container）这一层面构建笼统，而且组合别的笼统。在我看来，组合就是将两个以至多个笼统变成一个新的笼统。

function FancyBox(children) {
  return {
    borderStyle: '1px solid blue',
    children: children
  };
}

function UserBox(user) {
  return FancyBox([
    'Name: ',
    NameBox(user.firstName + ' ' + user.lastName)
  ]);
}

状况

UI并不仅仅是简朴的效劳或许说营业中的逻辑状况。事实上，关于一个特定的投影而言，许多状况是详细的，然则关于其他投影，能够不是如许。比方，假如你正在文本框中输入，这些输入的字符能够被复制到别的的tab或许挪动装备上（固然你不想复制也没题目，主假如为了和下一句的例子举行辨别）。然则，诸如滚动条的位置如许的数据，你险些历来不会想把它在多个投影中复制（因为在这台装备上比方滚动条位置是200，然则在其他装备上滚动到200的内容一般来说肯定是差别的）。

我们更趋向于将我们的数据模子变成不可变的。我们在最顶端将一切能更新状况的函数串起来，把它们看成一个原子（说成事件能够更轻易邃晓）来看待。

function FancyNameBox(user, likes, onClick) {
  return FancyBox([
    'Name: ', NameBox(user.firstName + ' ' + user.lastName),
    'Likes: ', LikeBox(likes),
    LikeButton(onClick)
  ]);
}

// Implementation Details

var likes = 0;
function addOneMoreLike() {
  likes++;
  rerender();
}

// Init

FancyNameBox(
  { firstName: 'Sebastian', lastName: 'Markbåge' },
  likes,
  addOneMoreLike
);

注重：这个例子经由历程副作用去更新状况。我关于此实际的理念模子是在每次的更新历程当中返回下一个阶段的状况。固然，不如许做看起来要更简朴一点，然则在今后我们终究照样会挑选转变这个例子采纳的体式格局（因为副作用的瑕玷太多了）。

缓存

我们晓得，关于纯函数而言，一次又一次雷同的挪用是异常糟蹋时候和空间的。我们能够对这些函数竖立缓存的版本，追踪近来一次挪用的输入和输出。下一次就可以够直接返回效果，不必再次盘算。

function memoize(fn) {
  var cachedArg;
  var cachedResult;
  return function(arg) {
    if (cachedArg === arg) {
      return cachedResult;
    }
    cachedArg = arg;
    cachedResult = fn(arg);
    return cachedResult;
  };
}

var MemoizedNameBox = memoize(NameBox);

function NameAndAgeBox(user, currentTime) {
  return FancyBox([
    'Name: ',
    MemoizedNameBox(user.firstName + ' ' + user.lastName),
    'Age in milliseconds: ',
    currentTime - user.dateOfBirth
  ]);
}

列表/鸠合

大多数UI都是经由历程许多个列表构成，经由历程列表中的每一个元素发生差别的值（比方data.map(item => <Item ... />)）。如许就发生了一种自然的条理构造。

为了治理每一个列表元素的状况，我们能够竖立一个Map来治理每一个特定的列表元素。

function UserList(users, likesPerUser, updateUserLikes) {
  return users.map(user => FancyNameBox(
    user,
    likesPerUser.get(user.id),
    () => updateUserLikes(user.id, likesPerUser.get(user.id) + 1)
  ));
}

var likesPerUser = new Map();
function updateUserLikes(id, likeCount) {
  likesPerUser.set(id, likeCount);
  rerender();
}

UserList(data.users, likesPerUser, updateUserLikes);

注重：如今我们有多个差别的输入通报给FancyNameBox。那会损坏我们上一节提到的缓存战略，因为我们一次只能影象一个值。（因为上面的memoize函数的形参只要一个）

续延

不幸的是，在UI中有太多的list互相嵌套，我们不得不必大批的模板代码去显式的治理它们。

我们能够经由历程耽误执行将一部份的模板代码移到我们的重要逻辑以外。比方，经由历程运用currying（能够经由历程bind完成）（固然我们晓得如许bind并没有完整的完成currying）。然后我们经由历程在中心函数以外的处所通报状况，如许，我们就可以挣脱对模板的依靠。

这并没有削减模板代码，然则最少将它们挪动到了中心逻辑以外。

function FancyUserList(users) {
  return FancyBox(
    UserList.bind(null, users)
  );
}

const box = FancyUserList(data.users);
const resolvedChildren = box.children(likesPerUser, updateUserLikes);
const resolvedBox = {
  ...box,
  children: resolvedChildren
};

译注：这里固然能够采纳

function FancyUserList(users) {
  return FancyBox(
    UserList(users, likesPerUser, updateUserLikes)
  );
}

然则如许扩大起来就很贫苦，想增添，删除我们都须要去改FancyUserList里的代码。最重要的是，假如我们想将likesPerUser和updateUserLikes换成其他的鸠合和函数的话，我们必需再竖立一个函数，如：

function FancyUserList2(users) {
  return FancyBox(
    UserList(users, likesPerUser2, updateUserLikes2)
  );
}

固然，你肯定会想到，直接给FancyUserList设置成吸收多个参数不就好了。然则如许依旧存在一个题目，那就是每次你须要用到FancyUserList的时刻，都须要带上一切的参数。要处置惩罚也是能够的，比方const foo = FancyUserList.bind(null, data.users)，背面须要用的话，直接foo(bar1, func1), foo(bar2, func2)就好了。也完成了设想形式中我们常谈到的星散顺序中变与稳固的部份。然则如许的完成将bind操纵交给了挪用者，这一点上能够革新，就像示例中提到的那样。

状况映照

我们很早就晓得，一旦我们瞥见雷同的部份，我们能够运用组合去防止一次又一次反复的去完成雷同的部份。我们能够将提取出来那部份逻辑挪动并通报给更低品级或许说更低层级的函数，这些函数就是我们常常复用的那些函数。

function FancyBoxWithState(
  children,
  stateMap,
  updateState
) {
  return FancyBox(
    children.map(child => child.continuation(
      stateMap.get(child.key),
      updateState
    ))
  );
}

function UserList(users) {
  return users.map(user => {
    continuation: FancyNameBox.bind(null, user),
    key: user.id
  });
}

function FancyUserList(users) {
  return FancyBoxWithState.bind(null,
    UserList(users)
  );
}

const continuation = FancyUserList(data.users);
continuation(likesPerUser, updateUserLikes);

缓存映照

想在缓存列表中缓存多个元素是比较难题的，你必需弄清晰一些在均衡缓存与频次之间做得很好的缓存算法，但是这些算法是异常庞杂的。

荣幸的是，在统一地区的UI一般是比较稳固的，不会变化的。

在这里我们依旧能够采纳像方才那种缓存state的技能，经由历程组合的体式格局通报memoizationCache

function memoize(fn) {
  return function(arg, memoizationCache) {
    if (memoizationCache.arg === arg) {
      return memoizationCache.result;
    }
    const result = fn(arg);
    memoizationCache.arg = arg;
    memoizationCache.result = result;
    return result;
  };
}

function FancyBoxWithState(
  children,
  stateMap,
  updateState,
  memoizationCache
) {
  return FancyBox(
    children.map(child => child.continuation(
      stateMap.get(child.key),
      updateState,
      memoizationCache.get(child.key)
    ))
  );
}

const MemoizedFancyNameBox = memoize(FancyNameBox);

代数哲学

你会发明，这有点像PITA（一种相似肉夹馍的食品），经由历程几个差别条理的笼统，将你须要的东西（值/参数）一点一点的加进去。偶然这也供应了一种快速的体式格局，能在不借助第三方的前提下在两个笼统之间通报数据。在React内里，我们把这叫做context.

偶然刻数据之间的依靠并不像笼统树那样整洁一致。比方，在规划算法中，在完整的肯定一切字节点的位置之前，你须要晓得各个子节点矩形地区的大小。

Now, this example is a bit “out there”. I’ll use Algebraic Effects as proposed for ECMAScript. If you’re familiar with functional programming, they’re avoiding the intermediate ceremony imposed by monads.

译注：FP邃晓不深，所以上面段就不翻译了，以避免误导

function ThemeBorderColorRequest() { }

function FancyBox(children) {
  const color = raise new ThemeBorderColorRequest();
  return {
    borderWidth: '1px',
    borderColor: color,
    children: children
  };
}

function BlueTheme(children) {
  return try {
    children();
  } catch effect ThemeBorderColorRequest -> [, continuation] {
    continuation('blue');
  }
}

function App(data) {
  return BlueTheme(
    FancyUserList.bind(null, data.users)
  );
}

React Fiber体系构造

译注：为了比较抽象的阐释，故这里将React Stack vs Fiber的视频贴在这，而不是放在浏览更多内里。因为在youtube上，为了轻易检察，这里录制了一张gif（有点大，18M，下载时请耐烦守候）。

简介

React Fiber是一个正在举行中的对React中心算法的重写。它是过去两年React团队研讨成果的一个巅峰。

React Fiber的目的是提拔对在动画，规划以及手势方面的友好度。它最重要的特征叫做”增量式/渐进式”衬着：即，将衬着事情分割为多个小块举行，并在各个帧之间流传。

别的症结的特征包含，1.具有了停息，中缀以及当有更新降临的时刻从新恢复事情的才能。2.差别的才能关于差别范例的更新分派差别的优先级。3.新的并发原语。

关于本文档

在Fiber中引入了几个新的观点，这些观点仅仅只看代码是很难真的体味的。本文档最初只是我在React项目组时的收集，收集一些我整顿Fiber的完成的时刻的笔记。跟着笔记的增加，我意想到这能够对其他人来说也是一个有益的资本。（译注：本文档的作者acdlite是Facebook开辟组的一位成员，并不属于React框架的开辟组（这里指实际事情中，而不是gh上的team）。React团队的leader，旧的中心算法及新的中心算法的提出者是sebmarkbage）

我将尝试尽能够用简朴的言语来形貌，防止一些没必要要的术语。在必要时也会给出一些资本的链接。

请注重我并不是React团队的一员，也不具有充足的威望。所以这并不是一份官方文档。我已邀请了React团队的成员来对本文档的准确性举行review。

Fiber是一项还在举行中的事情，在它完成前都极能够举行重改。所以本文档也是云云，跟着时候极能够发生变化。迎接任何的发起。

我的目的是，在浏览本文档后，在Fiber完成的时刻，顺着它的完成你能更好的邃晓它。以至终究回馈React（译注：意义是fix bug，pr新特征，处置惩罚issue等等）。

预备

在继承浏览前，我强烈发起你确保本身对以下内容已异常熟习：

React Components, Elements, and Instances – “组件”一般来说是一个局限很大的术语。稳固的控制这些术语是至关重要的。

Reconciliation – 对React的谐和/调理算法的一个高度归纳综合。

React基础理论观点 – 对React中的一些观点模子的笼统形貌，第一次读的时刻能够不太能体味。没紧要，今后终会邃晓的。

React设想准绳 – 请注重个中的scheduling这一小节，异常好的诠释了React Fiber。

回忆

假如你还没预备好的话，请从新浏览上面的”预备”一节。在我们探究之前，让我们来相识几个观点。

什么是谐和（reconciliation）

reconciliation：是一种算法，React运用它去辨别两棵树，从而决议究竟哪一部份须要转变。

update：数据的变化会致使衬着，一般这是setState的效果，终究会触发从新衬着。

React API的中心理念是思索/决议/调理怎样去update，就好像它会致使全部app从新衬着一样。它让开辟者能够声明式地去思索，而不必去忧郁怎样高效的将app从一个状况过渡到另一个状况（A到B，B到C，C再到A等等）。

事实上，每次变化都从新衬着全部app的体式格局只能事情在异常小的app上。在实际天下真正的app中，这在机能上消费的价值太大了。React已在这方面做了优化，在对峙好机能的前提下创造出app从新衬着以后的模样。绝大部份的优化都属于reconciliation这个历程的一部份。

Reconciliation是一个隐蔽在被广为熟知的称作”virtual DOM”的背地的算法。归纳综合起来就是：当你衬着一个React运用的时刻，就发生了一棵形貌这个运用的节点树，并存储在内存中。接下来这棵树会被革新，然后翻译到详细的某个环境中。比方，在浏览器环境，它被翻译成一系列的DOM操纵。当app有更新的时刻（一般是经由历程setState），一棵新的树就发生了。这棵新树会与之前的树举行diff，然后盘算出更新全部app须要哪些操纵。

虽然Fiber是一个对reconciler完整的重写，然则React文档中对中心算法的归纳综合形貌仍然是实用的。几个症结点为：

差别的组件范例被假定为会发生本质上差别范例的树。React不会尝试对它们举行diff，而是完整地替代旧的树。（译注：如<Button> ->> <Menu />）
对列表（list，译注：即组件元素构成的数组）的diff是采纳key来举行的。Key应当是稳固的，可展望的，且唯一的。

Reconciliation vs rendering

DOM只是React能够衬着的东西之一，除此以外，重要另有经由历程React Native发生的IOS和Android的原生控件。（这就是为何说”virtual DOM”属于用词不当）

React能支撑这么多的衬着目的的是因为React自身的设想所致使的，谐和（reconciliation）和衬着是两个差别的，星散的阶段。谐和器（reconciler）做的是盘算树的哪部份在变化的事情，而衬着器(renderer)做的则是运用谐和器发生的效果去更新我们的运用的事情。（译注：即差别平台/环境下去更新界面的手腕/体式格局是差别的，所以不能混为一谈，然则盘算树的差别的历程倒是通用的。）

这类星散意味着React DOM以及React Native既能同享统一个由React供应的谐和器的逻辑，又能够运用它们各自的衬着器去完成衬着。

Fiber重写了谐和器。它并不体贴衬着，只管衬着器须要响应作出一些转变（而且运用）这个新的算法的某些东西。

调理

调理（scheduling）：是一个决议什么时刻该做某个使命的历程。

使命（work）：任何须要实行的盘算都属于使命。使命一般是由一次更新所致使的。（如setState）

React的设想准绳这篇文档在这一点上阐释的异常不错，所以我在这援用一小段：

在当前版本的完成中，React在一个事情轮回中递归地遍历要更新的树而且挪用render函数。但是，在将来它或许会为了防止丢帧而耽误某些更新。

译注：将来即指Fiber，帧是Fiber里引入的一个观点，因为用到了requestAnimationFrame。Fiber栈就是用来谐和对帧的操纵（Fiber栈也是Fiber里的观点，是一个对函数挪用栈的模仿。）。耽误更新是相对递归遍历而言的，即临时中缀递归，转去遍历别的的节点。可参考演讲视频，或许视察一下这个gif(有点大，20M)以及将帧分别的图片

这在React的设想中是一个很罕见的课题。一些框架完成了”push”的体式格局，当新的数据可用的时刻实行盘算。但是，React对峙采纳”pull”的体式格局，将盘算耽误实行，直到有必要时才举行盘算。
React并不是一个通用的数据处置惩罚框架。它是一个用于构建用户接口的框架。我们以为它有本身奇特的定位，在一个运用中晓得哪些相干的盘算是现在所须要的，哪些是现在不须要的。
假如某些东西不可见（在屏幕外），我们能够耽误实行任何和这部份相干的逻辑。假如数据抵达的频次比帧革新的频次还要快，我们能够兼并以及批处置惩罚这些更新。比起那些优先级不太高的使命（比方衬着从收集获取来的数据），我们能够优先斟酌来自用户接口的使命（比方，点击一个按钮触发的动画），从而防止丢帧。

几个症结点在于:

在UI中，并不是每一个更新都有必要马上展现给用户。事实上，如许做将会是很糟蹋的，会形成丢帧以及下降用户体验。
差别范例的更新具有差别的优先级 – 动画过渡须要比更新数据更快。

译注：完整的优先级能够参考源码中的定义

基于push的体式格局须要app（顺序员）去决议怎样调理这些使命。基于pull的体式格局让框架（React）变得智能，从而协助我们做出这些选择。

React现在并没有异常好地运用调理，一次更新将会致使全部子树马上被从新衬着。革新React的中心算法从而更好的运用调理是隐蔽在Fiber背地的理念驱动。

如今我们要预备深切Fiber的完成了。下一节会比我们到现在为止议论的要更有专业性一点。在你继承浏览前请确保之前的内容你基础相识了。

Fiber是什么

我们行将议论React Fiber的中心体系构造。Fiber比起运用开辟者一般的认知而言，是一个越发的低很多的笼统条理。假如你发明本身很难去邃晓它，不要泄气。继承尝试，末了一定会扒开云雾见灼烁。（当你末了邃晓它的邃晓，请向我发起怎样革新这一小节）

我们最先吧～

我们对Fiber已建立的目的是，激活React，让它具有调理的才能。详细地来说，我们须要能够：

停息及恢复使命。
给予差别的使命差别的优先级。
重用之前已完成的使命。
中缀那些不再须要的使命。

要想做到个中的任何一条，我们起首须要一种体式格局，把事情/使命剖析成许许多多的小单元（units）。从某种意义上来说，那就是fiber。一个fiber代表了使命的单元。

为了进一步邃晓，让我们回到之前提到的把React组件看成数据的函数这一观点，一般示意为：

v = f(d)

因而可知，衬着一个React运用与在一个函数类挪用另一个函数是相似的（译注：一个组件的render函数内里会挪用另一个组件的render函数）。这个类比在思索fiber的时刻是很有效的。

一般，盘算机对一个顺序的实行/挪用状况的跟踪的体式格局是经由历程挪用栈（call stack）。当一个函数被实行的时刻，一个新的栈帧（stack frame）被压入栈中。谁人栈帧就代表了在谁人函数里被实行的使命。（译注：听着能够有点不顺畅，不过无论什么言语，调试的时刻视察过call stack的同砚应当都清晰）

当我们处置惩罚UI的时刻，题目在于假如一次有太多的使命要实行，将会致使动画丢帧以及卡顿。更重要的是，那些使命当中的一部份或许是没有必要实行的，假如新的一次更新对个中一部份举行了烧毁的话。这就是UI组件和函数剖析之间有区分的处所，因为一般组件比函数有更多详细的须要体贴的东西。

较新的浏览器（以及React Native）完成了协助处置惩罚这些详细题目的API:requestIdleCallback会让一个低优先级的函数在余暇期被挪用。而requestAnimationFrame会让一个高优先级的函数鄙人一个动画帧被挪用。题目在于，为了运用这些API，你须要将衬着事情分别为增量式的单元。假如你只依靠挪用栈的话，那末直到挪用栈为空之前它都邑一直在事情。

那末，假如我们能够自定义挪用栈的行动，对优化衬着UI来说是不是是就更好了呢？假如我们能恣意地中缀挪用栈而且手动操纵栈帧，是不是是也会更好呢？

这就是React Fiber的目的。Fiber是关于栈的重写，特别是关于React组件来说。你能够把一个单一的fiber设想成一个假造的栈帧。

重写栈的长处是，你能够在内存中保存栈帧（这个链接挺风趣的，值得一看），而且在任什么时候刻经由历程恣意体式格局实行。这对我们完成调理来说是至关重要的。

除了调理外，手动地处置惩罚栈帧，或许能够让我们具有一些潜伏的特征，比方并发以及毛病边境处置惩罚。我们会在背面的小节议论这些。

Fiber的构造

注重：跟着我们对完成的细节关注得越详细，或许会发明更多的能够性。假如你发明毛病或许太旧的信息，请给我们提pr。

在详细的术语中，一个fiber是一个js对象，它包含着一个组件，以及这个组件的输入及输出。

一个fiber与一个栈帧相对应，但同时也与一个组件的实例相对应。

这里列出一些属于fiber的重要的属性（注重并没有完整的枚举全）：

type和key

fiber的type属性和key属性对React元素来说供应的是雷同的功用。（事实上，当一个fiber从一个元素中被竖立的时刻，这两个属性都是复制过来的（译注：可参考源码））

一个fiber的type形貌了与它相对应的组件，关于函数或许类组件而言，type就是函数或许类组件自身（译注：源码中对type的形貌为”与这个fiber相对应的函数/组件/模块”）。关于宿主组件而言（div，span等等），type就是字符串（”div”，”span”）。（译注：这一点实在和之前的React是一样的，没有区分，假如你用react-devtools调试过的话应当会注重到）

从观点上来说，type是一个函数（就像 v = f(d)），这个函数的实行被栈帧所追踪。

和type一同的key，被用在谐和（reconciliation）历程当中，决议这个fiber是不是能被重用。（译注：源码中的形貌为”这个child唯一的标识符”）

child和sibling

这两个属性指向别的的fiber，形貌一个fiber的递归树构造。（译注：源码中的形貌为“单向链表树构造”）

child属性对应的fiber是与一个组件的render要领的返回值相对应的。所以，鄙人面的例子中：

  function Parent() {
    return <Child />
  }

Parent的child属性就与Child相对应。

sibling属性诠释了如许的案例，即在render要领中返回多个子节点（一个在Fiber中的新特征）。（译注：而且也能够返回一个字符串。置信都是人人期盼已久的，再也不必套一个div了。别的一个大的特征是error boundaries）

  function Parent() {
    return [<Child1 />, <Child2 />]
  }

子fiber形成了一个单链表，单链表的头节点是数组中的第一个元素。所以在上面的例子中，Parent的child属性是Child1，Child1的sibling属性是Child2。

回到我们与函数的类比上，你能够把一个子fiber设想成一个尾挪用函数。

return

return属性的值也是一个fiber，指向处置惩罚完当前fiber以后的返回值。在观点上与栈帧的返回地点相似。

假如一个fiber有多个子fiber，每一个子fiber的return属性都实行父fiber。所以在我们上一节的例子中，Child1和Child2的return属性的值都是Parent。

pendingProps和memoizedProps

从观点上来说，props就是一个函数的arguments。一个fiber的pendingProps在它最初被挪用的时刻就被设置了。memoizedProps在实行的末端被设置。（译注：应当就相似与对纯函数举行cache）

当将要到来的pendingProps和memoizedProps相称的时刻，就标志着这个fiber之前的输出能够被重用了，如许就可以防止没必要要的使命实行。

pendingWorkPriority

pendingWorkPriority的值代表了这个使命的优先级。ReactPriorityLevel列出了差别的优先级以及它们代表的寄义。

NoWork优先级的值是0，优先级数字越大示意优先级越低（即0是最高的优先级）。比方，你能够运用下面的函数去搜检一个fiber的优先级是不是最少到达了某个指定的优先级。

  function matchesPriority(fiber, priority) {
    return fiber.pendingWorkPriority !== 0 &&
           fiber.pendingWorkPriority <= priority
  }

这个函数仅仅只是为了申明运用，并不是真正的React Fiber代码库中的一部份。

调理器运用priority属性去搜刮下一个要实行的使命单元。我们将在futrue一节议论这个算法。

alternate

flush：革新一个fiber就是将它的输出衬着到屏幕上。

work-in-progress：代表一个还未完成的fiber，从观点上来说，相似于一个还未return的栈帧。

在任什么时候刻，一个组件的实例最多有2个fiber与它相干联：当前的革新后的fiber以及正在运转中（work-in-progress）的fiber。

当前的fiber的备胎（alternate）就是正在运转的fiber，正在运转的fiber的备胎也是当前的fiber。（译注：可参考源码）

一个fiber的备胎是用一个叫做cloneFiber的函数惰式竖立的，而不是老是竖立一个新的对象。假如fiber的备胎存在的话，cloneFiber会尝试重用这个fiber的备胎，从而到达最小化分派内存的目的。

虽然你应当把alternate属性看成一种完成细节，然则在源码中你会常常看到它，所以放到这里议论它是有价值的。

output

host component：代表一个React运用顺序的恭弘=叶恭弘子节点。差别的衬着环境下是差别的（比方，在浏览器运用内里，它们是div，span等等）。在JSX中，它们用小写名来示意。（译注：完整的分类可参考源码）

从观点上来说，一个fiber的输出（output）是一个函数的返回值。

每一个fiber终究都有一个输出，然则只要在宿主环境的恭弘=叶恭弘子节点中才会竖立输出。然后输出被翻译/转移到真正的dom树中。

输出就是终究传给衬着器的东西，以便衬着器能够在衬着环境中革新，从而反映出那些变化。怎样竖立和更新输出是衬着器的职责。

将来的能够

到现在为止我们就谈这么多了。然则本文档还远远没有完成。将来我能够将形貌一些在更新的性命周期中频仍运用的算法。它们包含：

调理器是怎样晓得下一个要实行的单元是哪个的？
在fiber树中优先级是怎样被追踪和流传的？
调理器怎样晓得什么时候停息和恢复某个使命？
使命是怎样被革新以及被标记为已完成的？
副作用（如性命周期函数）是怎样事情的？
协程（coroutine）是什么？它是怎样被运用从而完成像context和layout如许的特征的？

算法网