Practice
Fiber is the new reconciliation engine, or a reimplementation of the core algorithm in React v16. The goal of React Fiber is to make it more suitable for areas such as animation, layout and gestures, to make it possible to pause, abort or reuse work and to assign priorities to different types of updates; and to add new concurrency primitives.
The aim of Fiber is to improve performance for tasks such as animation, laying elements out on the page and moving elements around. Its headline feature is incremental rendering: the ability to split rendering work into units and spread them across multiple frames.
Other key features include the ability to pause, cancel or reuse incoming updates to the DOM tree, the ability to prioritise different types of updates, and reconciliation primitives.
Reconciliation is the algorithm React uses to tell one element tree from another in order to work out which parts need to be replaced.
An update is a change in the data used to render a React application. It is usually the result of calling setState; the end result is that the component is re-rendered.
A key idea of the React API is to think about updates as if they caused the entire application to re-render. This lets the developer work declaratively rather than worry about how efficiently the application moves from one state to another (from A to B, B to C, C to A and so on).
In general, re-rendering the whole application on every change only works for the most conventional applications. In the real world it has a negative impact on performance. React includes optimisations that create the illusion of a full re-render without taking a huge performance hit. Most of these optimisations are part of a process called reconciliation.
Reconciliation is the algorithm behind what we have come to call the "Virtual DOM". The definition goes something like this: when you render a React application, a tree of elements describing the application is generated in reserved memory. This tree is then applied to the rendering environment — in a browser application, for example, it is translated into a set of DOM operations. When the application state is updated (usually by calling setState), a new tree is generated. The new tree is compared with the previous one in order to compute and apply exactly those operations that are needed to redraw the updated application.
Even though Fiber is a ground-up reimplementation of the reconciler, the high-level algorithm,
Comments