react fiber

by Ryan Yurkanin

瑞安·尤卡寧(Ryan Yurkanin)

讓我們愛上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 Reconciliation.

這可能意味著更新一個類屬性，或者可能意味著拆除整個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將樹計算分解為可以隨時“提交”的工作單元。 那么什么是工作單元？ 它只是組件樹中的一個節點！

1. React can now pause, resume, and restart work on a component. This means certain lifecycle hooks may fire more than once.
   現在，React可以暫停，繼續和重新啟動組件上的工作。 這意味著某些生命周期掛鉤可能會觸發多次。
2. 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涵蓋的許多用例，我們將收到兩個新的鉤子。

1. getDerivedStateFromProps which doesn't have access to previous props or the component instance, but allows you to sync state with your props.

   getDerivedStateFromProps ，它無權訪問以前的道具或組件實例，但允許您將狀態與道具同步。

2. 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! ??

祝您好運，編碼愉快！ ??

翻譯自: https://www.freecodecamp.org/news/lets-fall-in-love-with-react-fiber-90f2e1f68ded/

react fiber