Recociler
Even though React DOM and React Native renderers are very different, they still need to share some logic. In particular, the coordination algorithms need to be as similar as possible so that features such as declarative rendering, custom components, state, lifecycle methods, and REFs work consistently across platforms.
To solve this problem, different renderers share some code with each other. We call this part of the React the Reconciler. When dealing with updates like setState(), the Reconciler calls render() on the components in the tree, and then decides whether to mount, update, or uninstall.
The Reconciler does not have a separate package because they currently have no public API. Instead, they are excluded from renderers such as React DOM and React Native.
Stack reconciler
The “Stack” Reconciler is the solution to React 15 and earlier.
The Stack Reconciler creates a virtual DOM and commits DOM Mutation recursively, with the entire process synchronized and unable to break the work or break it into blocks. If the component tree is very deep, the recursion can take up a lot of thread time, and the user interaction can get stuck if the recursion update takes more than 16ms.
Fiber reconciler
The “Fiber” Reconciler is a new attempt to address the problems inherent in the Stack Reconciler, while at the same time addressing some issues left over from history.
Fiber became the default Reconciler starting with React 16.
Its main objectives are:
- Be able to slice interruptible tasks.
- Ability to reprioritize, reset, and reuse tasks.
- Ability to interleave parent and child elements to support layout in React.
- In the
render()Returns multiple elements in.
- Better support for error boundaries.
nonPerform the following operations in concurrent mode:
Flame graph:
Concurrent modePerform the following operations:
Flame graph:
