1. Review the process of rendering and updating Vue components
2. Review the essence of JSX and vdom
3. Component rendering and updating
1. Component rendering process
- props state (component has props state)
- render() generates vnode
- patch(elem, vnode)
2. Component update process
- setState(newState) --> dirtyComponents (may have subcomponents)
- render() generates newVnode
- patch(vnode, newVnode)
React patch can be split into 2 stages
1. Reconciliation stage-------execute diff algorithm and pure JS calculation
2. Commit stage--------Render the diff result to DOM
4. Fiber optimization performance (solve the efficiency problem of virtual DOM)
There may be performance issues
js is single-threaded and shares a thread with DOM rendering
When the component is complex enough, the sum is calculated when the component is updated Rendering is under great pressure, causing the main process to be occupied for a long time
At the same time, there are DOM operation requirements (animation, mouse dragging, etc.), which will cause lag and synchronization blocking
fiber:
Segment the tasks in the reconciliation phase. The data comparison of vdom is a stage suitable for splitting. For example, after comparing a part of the tree, first pause the execution of an animation call, and wait for After completion, come back and continue the comparison (commit cannot be split, DOM rendering cannot be split)
Pause when DOM needs to be rendered and resume when idle
window.requestIdlecallback window.requestAnimationFrame
(It is an internal mechanism of React that developers cannot understand)