The concept and principle of React Fiber in the learning chapter

What is React Fiber?

React Fiber is an underlying architecture of the React framework, in order to improve the rendering engine of React to make it more efficient, flexible and extensible.

Traditionally, React uses a stack adjustment and recursive algorithm to handle virtual DOM updates, which may cause performance problems in large applications or frequent updates. React Fiber is based on an idea of ​​incremental rendering, which breaks down update tasks into small, interruptible units, allowing React to more flexibly control and switch tasks when updating, and improve the responsiveness of the application.

Core features of React Fiber include:

1. Incremental rendering: React Fiber splits update tasks into small units of work (called "fibers") and uses a priority scheduler to handle these tasks to improve responsiveness and user experience.

2. Priority scheduling: Fiber introduces the concept of priority, which enables React to determine the execution order of tasks according to the priority of tasks, ensuring that high-priority tasks are processed in a timely manner.

3. Interruption and Resume: React Fiber allows interrupting tasks during rendering and then resuming execution at the appropriate time, thus avoiding blocking situations.

4. Task cancellation: Fiber has the ability to cancel tasks, which can cancel unnecessary updates and improve performance.

The introduction of React Fiber architecture makes React more suitable for building large and complex applications, and also provides a basis for introducing some new functions (such as asynchronous rendering, lazy loading, etc.). It should be noted that from the user's point of view, React Fiber will not introduce significant changes, it is optimized on the underlying implementation, but these optimizations may significantly improve the performance of the application in some scenarios.
In the code, fiber is actually a data structure similar to a doubly linked list. As shown below:

FiberNode

In the React Fiber architecture, "FiberNode" (also known as "Fiber") is an important concept, which represents a node in the virtual DOM tree in React. FiberNode is a JavaScript object used to describe components, elements or other DOM nodes in the virtual DOM tree.

Each FiberNode contains information such as component status, attributes, styles, etc., as well as relationships and update status with other nodes. In React Fiber, FiberNode is the key data structure for incremental rendering and coordination. Through FiberNode, React can track changes in the component tree, handle updates, and prioritize operations.
, which contains information such as node types, attributes, relationships, and states, is the key to incremental rendering and coordination.

Some important properties and information of a FiberNode include:

• type: Indicates the type of the node, which can be a function component, a class component, a native DOM element, etc.
• key and props: the unique identifier and properties of the node, used to compare nodes in different rendering cycles.
• alternate: used for double buffering technology, indicating the last rendered FiberNode corresponding to the current FiberNode.
• child, sibling, and return: used to represent the relationship between a node's child nodes, sibling nodes, and parent nodes.
• effectTag and effect: Indicates the operation type of the node (insert, update, delete, etc.) and the side effects that need to be performed.
• stateNode: The actual DOM element, component instance, etc. corresponding to the node.

Through these properties, React Fiber can build a virtual DOM tree and coordinate, update and process it during rendering. FiberNode's design enables React to implement features such as incremental rendering and interruption recovery, thereby improving the performance and responsiveness of the application.

Give an example to understand:

function App() {
    
    
  return (
    <div>
      <h1>Hello, world!</h1>
      <p>This is a simple example.</p>
    </div>
  );
}

In React Fiber, each component, element, and DOM node corresponds to a FiberNode. The following is a simplified illustration of the FiberNode structure corresponding to the above components:

// 节点类型、标签和属性
const appFiber = {
    
    
  type: "div",
  key: null,
  props: {
    
    
    children: [
      {
    
     type: "h1", key: null, props: {
    
     children: "Hello, world!" }, ... },
      {
    
     type: "p", key: null, props: {
    
     children: "This is a simple example." }, ... }
    ]
  },
  stateNode: null, // 与实际 DOM 节点关联
  child: h1Fiber, // 子节点 Fiber
  sibling: null, // 兄弟节点 Fiber
  return: null, // 父节点 Fiber
  effectTag: null, // 用于表示更新操作类型
  effect: null, // 用于存储副作用操作，如 DOM 更新
  alternate: null // 对应上一次渲染的 FiberNode
};

const h1Fiber = {
    
    
  type: "h1",
  key: null,
  props: {
    
     children: "Hello, world!" },
  stateNode: null, // 与实际 DOM 节点关联
  child: null,
  sibling: pFiber,
  return: appFiber,
  effectTag: null,
  effect: null,
  alternate: null
};

const pFiber = {
    
    
  type: "p",
  key: null,
  props: {
    
     children: "This is a simple example." },
  stateNode: null, // 与实际 DOM 节点关联
  child: null,
  sibling: null,
  return: appFiber,
  effectTag: null,
  effect: null,
  alternate: null
};

In this example, appFiberrepresents <div>the FiberNode of the component, h1Fiberand pFiberrepresents the FiberNode of <h1>the and <p>element, respectively. Each FiberNode contains information such as types, attributes, relationships, and states, which are used to build a virtual DOM tree and coordinate updates.

Through the child, siblingand returnattributes, a hierarchical relationship is established between FiberNodes. React Fiber can track updates and side effects through effectTagthe and props.effect

Why not use generators or async/await?

In the React Fiber architecture, why not use Generator or async/await, these asynchronous programming features are mainly related to performance and control issues. Here are some reasons:

1. Fine-grained control: React Fiber requires fine-grained control over the order of task execution during the rendering process to achieve features such as priority scheduling and interruption recovery. Using language features such as Generator or async/await cannot provide enough fine-grained control to achieve such fine-grained task management.

2. Asynchronous interrupt and resume: React Fiber needs to be able to interrupt tasks during rendering and resume when appropriate. Generators and async/await are hard to interrupt in the middle of a task and resume later. The Fiber architecture achieves the ability to interrupt and recover by dividing tasks into small interruptible units.

3. Performance and memory consumption: Generators and async/await usually introduce more asynchronous scheduling overhead, which may cause additional performance loss and memory consumption. In order to improve performance, React Fiber needs to manage the execution order of tasks more efficiently, thereby reducing unnecessary overhead.

4. More detailed optimization: React Fiber can better handle high-priority tasks through task priority scheduling, making user operations more responsive. This optimization can be difficult to achieve in asynchronous Generators or async/await.

While Generators and async/await are very useful tools when dealing with asynchronous logic, in cases like React Fiber where fine-grained control over task scheduling, interruption, and recovery is required, their limitations can make it impossible to achieve desired functionality. Therefore, the React Fiber architecture has chosen its own way to manage tasks and priorities for more efficient and precise rendering and coordination.

Summarize

What I am sharing today is the knowledge points I have just learned. There are many things in the React framework, and I am still exploring there, and strive to make a little progress every day.