让我们爱上React Fiber (Let’s fall in love with React Fiber)

TLDR, React Fiber is an internal engine change that allows React to break the limits of the call stack. It’s creation enables React to pause/start rendering work at will. Eventually, React users will be able to hint at the “priority” of work.

TLDR， React Fiber是一个内部引擎更改，允许React打破调用堆栈的限制。它的创建使React可以随意暂停/开始渲染工作。最终，React用户将能够暗示工作的“优先级”。

Currently, we can’t directly interface with it, so why should we care about it? Because it’s really freaking cool!

当前，我们不能直接与它交互，那么为什么我们要关心它呢？因为这真是太酷了！

在Fiber像没有git的快节奏公司工作之前做出React。 (React before Fiber was like working at a fast paced company without git.)

Imagine being in the middle of a huge feature, and your boss needs a hotfix, pronto. You can’t stop working though because all your changes are in one file, you’re committed to finishing this work.

想象一下，在一项巨大功能的中间，而您的老板需要一个修补程序，即pronto。但是，由于所有更改都在一个文件中，因此您无法停止工作，您将致力于完成这项工作。

If we were using git, we would be able to commit our work to a branch, and switch to a quick hotfix branch.

如果使用的是git，则可以将工作提交到分支，然后切换到快速修补程序分支。

With Fiber, React can pause and resume work at will to get working on what matters as soon as possible! ?

有了Fiber，React可以随意暂停和恢复工作，以便尽快处理重要的事情！ ？

简而言之React内部构件？ (React Internals in a nutshell ?)

You create a tree of components. React takes this tree, walks through it, and creates a virtual model of the end result. Perhaps you are rendering to the DOM, perhaps you are targeting native. At this point, that doesn’t matter to React.

您将创建一个组件树。 React拿起这棵树，遍历它，并创建最终结果的虚拟模型。也许您正在渲染到DOM，也许您正在针对本机。在这一点上，这对React无关紧要。

Now, as your app updates, React will do that process of creating the virtual result over and over again. Each time, it compares the previous virtual tree to the next one.

现在，随着您的应用程序更新，React将反复执行创建虚拟结果的过程。每次，它都会将前一个虚拟树与下一个虚拟树进行比较。

At this point, we get platform-dependent. If you are rendering to the DOM, it could be that only one class on one element changed. React will walk through the virtual tree, find what’s changed, and update as little as it can.

至此，我们得到了平台相关的信息。如果要渲染到DOM，则可能是一个元素上只有一个类被更改。 React将遍历虚拟树，查找已更改的内容，并尽可能少地进行更新。

This could mean updating one class attribute, or it could mean tearing down the whole DOM. This is .

这可能意味着更新一个类属性，或者可能意味着拆除整个DOM。这就是。

Before Fiber, this was it. The work was laid out, and the renderer of choice got to work. Even if the browser was lagging, the user was typing, or the planet was about to explode, the render train wouldn’t stop. ?

在出现Fibre之前就是这样。工作已经完成，选择的渲染器开始工作。即使浏览器滞后，用户正在键入或星球即将爆炸，渲染火车也不会停止。？

它是如何工作的(高水平)？ (How does it work (at a high level)?)

With Fiber, there are now varying levels of priority for updates. Updating an input a user is typing into has higher priority than a list with thousands of components.

使用光纤，现在有不同的更新优先级。与具有数千个组件的列表相比，更新用户输入的输入具有更高的优先级。

Fiber breaks tree computation into units of work that it can “commit” at any time. So what is a unit of work? It’s simply a node in your component tree!

Fibre将树计算分解为可以随时“提交”的工作单元。 那么什么是工作单元？ 它只是组件树中的一个节点！

React can now pause, resume, and restart work on a component. This means certain lifecycle hooks may fire more than once.
现在，React可以暂停，继续和重新启动组件上的工作。这意味着某些生命周期挂钩可能会触发多次。

React can have a priority-based update system. This allows the React Team to fine tune the renderer so that React is fastest during the most common use cases.
React可以有一个基于优先级的更新系统。这使React团队可以微调渲染器，以便在最常见的用例中React最快。

I want to focus on that first point a bit, though. React is going to be moving away from (but still supporting!) some old lifecycle hooks, and adding some new ones! ?

不过，我想重点谈一下第一点。 React将远离(但仍在支持！)一些旧的生命周期挂钩，并添加一些新的挂钩！？

componentWillMount, componentWillUpdate, componentWillReceiveProps, can now fire multiple times. You shouldn't trigger side effects here.

现在， componentWillMount ， componentWillUpdate ， componentWillReceiveProps可以触发多次。您不应该在这里触发副作用。

Now, you want to fire side effects in the lifecycle hooks that will only fire once: componentDidMount and componentDidUpdate

现在，您要在仅触发一次的生命周期挂钩中触发副作用： componentDidMount和componentDidUpdate

To make up for a lot of the use cases that componentWillReceiveProps covered, we will be receiving two new hooks.

为了弥补componentWillReceiveProps涵盖的许多用例，我们将收到两个新的钩子。

getDerivedStateFromProps which doesn't have access to previous props or the component instance, but allows you to sync state with your props.
getDerivedStateFromProps ，它无权访问以前的道具或组件实例，但允许您将状态与道具同步。

getSnapshotBeforeUpdate gives you access to the DOM before it gets updated. The value you return is usable in componentDidUpdate.
getSnapshotBeforeUpdate使您可以在更新DOM之前对其进行访问。您返回的值可在componentDidUpdate 。

As of React 16.4, getDerivedStateFromProps now always fires before the render method. Not just when props update!

从React 16.4开始，getDerivedStateFromProps现在总是在render方法之前触发。不只是道具更新时！

In summary, Fiber allows React to fine tune rendering to make sure the most important updates happen as soon as possible, all for the light cost of some lifecycle hooks, and gallons of Facebook dev blood. ?

总而言之， Fiber允许React进行微调渲染，以确保最重要的更新尽快发生，而这一切都是为了节省生命周期的钩子以及Facebook开发人员的加仑成本。？

If you have any questions or are looking for one-on-one React mentorship, feel free to tweet me @yurkaninryan any time!

如果您有任何疑问或正在寻找一对一的React指导，请随时在@yurkaninryan上发消息给我！

If you like my writing style, here are some other articles that I’ve done.

如果您喜欢我的写作风格，这是我做过的其他文章。

Good luck and happy coding! ??

祝您好运，编码愉快！ ??