There are three instances react runtime.
- DOM DOM node real
- Instance React maintenance vDOM
- Element Description UI look like (type, props)
Construction of the rendering process in the first vDOM tree, subsequent to update (setState ()), diff vDOM tree obtained DOM change, and the DOM Change Application (Patch) into a DOM tree.
reconciler previous Fiber (referred to as Stack reconciler) top-down recursively to mount / update, can not be interrupted (continuous occupation of the main thread).
Fiber ideas to solve this problem is to render / update process (recursive diff) split into a series of small tasks, each inspection, a small portion of the tree, done to see if there is still time to continue to the next task, any continue, do not put their own hang, when not busy main thread to continue.
For more incremental update context information, thus spreading the fiber tree (i.e., Fiber context vDOM tree), the update process is based on the input data and the existing construction of new fiber tree fiber tree (workInProgress tree).
Instance added a layer
- effect: 1, workInProgress tree on every node has an effect list; 2, diff used to store the results; 3, the current node will be updated merge effect list (queue result collection diff) upwardly
- workInProgress: workInProgress tree is a snapshot of current progress in the process of establishing reconcile from the fiber tree, a breakpoint recovery.
- fiber: fiber tree and the like vDOM tree, is used to describe the context information required incremental updates.
The main structure (referred to as a node for each fiber) of each node on the fiber tree as follows:
{
state node,
child,
return,
sibling,
...
}
reconcile process divided into two phases (phase):
- (Interruptible) render / reconciliation come to change by constructing workInProgress tree
- (Uninterruptible) commit to apply these DOM change
commit：
- Treatment effect list (including 3 treatments: updating the DOM tree, calling a function of the life cycle of the internal state of the component and the like updating ref)
- The team finished, the end of the second stage, commit all updates to the DOM tree.
Lifecycle hook
Phase 1 render / reconciliation
- componentWillMount
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
Phase 2 commit
- componentDidMount
- componentDidUpdate
- componentWillUnmount
Life Cycle Stage 1 function may be called multiple times.
Fiber is a LinkedList structure. Stack is a tree structure, the processing down the tree hierarchy. Fiber is in the order return, child and sibling to do for the ReactElement process.
Fiber schedule
Fiber There beginWork, completeWork and commitWork three kinds of phases. beginWork performs instantiation component, the component calls the render () method, as well as shouldComponentUpdate () result of the comparison.
github demo on the fiber:
https://github.com/Vxee/react-async-mode
Reference Links:
http://www.ayqy.net/blog/dive-into-react-fiber/