Preface
The reconstructed architecture is the reconstruction of the architecture of the version before 15 in react16 and later versions.
The architecture of React 15 can be divided into two layers:
- Reconciler is responsible for finding changed components and identifying how to update them.
- Renderer is responsible for rendering changed components onto the page.
React 15 uses a stack mediator, which is recursive and synchronous. Such a design can make component updates simple and fast, but has some disadvantages, such as:
- Once the update starts, it cannot be interrupted midway, which may cause browser rendering lag.
- Advanced features such as asynchronous, sharding, and priority cannot be implemented.
- Not compatible with new browser features such as requestIdleCallback and requestAnimationFrame.
The architecture of React 16 can be divided into three layers:
- Scheduler (scheduler) is responsible for scheduling the priority of tasks. High-quality tasks enter first.
- Reconciler. The Reconciler is responsible for finding changed components and identifying how to update them.
- Renderer is responsible for rendering changed components onto the page. ¹²
React 16 uses the new Fiber mediator, which is cyclic, asynchronous, and interruptible. This design can make component updates more flexible and efficient, and brings some advantages:
- You can reserve some time for the JS thread in each frame of the browser to avoid occupying the main thread for a long time and causing lag.
- It can implement advanced functions such as asynchronous, sharding, priority, etc., such as Concurrent Mode, Suspense, Lazy Loading, etc.
- Compatible with new browser features such as requestIdleCallback and requestAnimationFrame.
Summarize
The main reason for reconstructing React's architecture is to improve the rendering performance and user experience of the UI, solve the CPU and I/O bottlenecks, implement an asynchronous, interruptible, recoverable, and prioritized update process, and support some new features , such as Time Slice (time slicing), Suspense (hovering), Lazy Loading (lazy loading), Concurrent Mode (concurrent mode), so react15 recursive and synchronous update execution is not supported, and refactoring must come