Summary of react basics

Preface

I'm preparing for an interview recently. I reviewed some knowledge points of react and summarized them here.

start

React Lifecycle

The life cycle before react 16 was like this

The component is instantiated when it is first rendered, and then the componentWillMount, render, and componentDidMount functions on the instance are called. Components can call componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, render, and componentDidUpdate functions when updating rendering. The componentWillUnmount function can be called when the component is uninstalled.

Borrowed picture:

Starting from React v16.3, React recommends using getDerivedStateFromProps and getSnapshotBeforeUpdate to replace componentWillMount, componentWillReceiveProps, and componentWillUpdate. It should be noted here that the two newly added life cycle functions and the original three life cycle functions must be used separately and cannot be mixed.

Current life cycle (borrowed picture):

Problems with componentWillMount

Some people think that asynchronous requests can be made in advance in componentWillMount to avoid white screen. However, when react calls render to render the page, render does not wait for the asynchronous request to end before obtaining data for rendering. There are potential risks in writing this way.

And after react fiber, it may be called multiple times in one rendering. The reason is: react fiber technology uses incremental rendering to solve the problem of dropped frames. Each task unit is scheduled and executed through requestIdleCallback, which can be interrupted and resumed. Once the life cycle is interrupted, it will run the previous life cycle again after recovery.

New life cycle

static getDerivedStateFromProps

• Trigger time (modified in v16.4): every time the component is rerendered, including after the component is built (the last execution before rendering), and every time new props or state are obtained. In version v16.3, component state updates will not trigger this lifecycle
• Each time a new prop is received, an object is returned as the new state. If null is returned, it means that the state does not need to be updated.
• With componentDidUpdate, you can override all usages of componentWillReceiveProps
  

getSnapshotBeforeUpdate

Trigger time: when update occurs, after render and before component DOM rendering.
Return a value as the third parameter of componentDidUpdate.
In conjunction with componentDidUpdate, all usages of componentWillUpdate can be covered.

React Fiber

Once the React rendering/update process starts, it cannot be interrupted and will continue to occupy the main thread. The main thread is busy executing JS and has no time to take care of other things (layout, animation), resulting in poor experiences such as frame drops, delayed responses (or even no response). Fiber came into being.

Fiber is a reconstruction of the core algorithm of react reconciler. Key features include:

• Incremental rendering (split the rendering task into chunks and evenly distribute them over multiple frames)
• Ability to pause, terminate, and reuse rendering tasks during updates
• Prioritize different types of updates
• New basic capabilities for concurrency
  

Incremental rendering is used to solve the problem of dropped frames. After the rendering task is split, only a small part is done each time. After each part is completed, the time control is returned to the main thread, instead of occupying it for a long time like before.

Fiber tree

• The reconciler before Fiber (called Stack reconciler) recursively mounts/updates from top to bottom and cannot be interrupted (continuously occupies the main thread). As a result, periodic tasks such as layout and animation on the main thread and interactive responses cannot be processed immediately, affecting the experience.
• Fiber solves this problem by splitting the rendering/update process (recursive diff) into a series of small tasks, checking a small part of the tree each time, and seeing if there is time to continue with the next task. If there is time, continue. If not, suspend itself and continue when the main thread is not busy.

The fiber tree is actually a single linked list structure, where child points to the first child node, return points to the parent node, and sibling points to the next sibling node. The structure is as follows:

// fiber tree node structure {
    stateNode,
    child,
    return,
    sibling,
    ...
}

Fiber reconciler

The reconcile process is divided into two stages:

1. (Interruptible) Rendering/reconciliation derives changes by constructing a workInProgress tree

2. (Uninterruptible) commit applies these DOM changes (updates the DOM tree, calls component lifecycle functions, and updates internal states such as ref)

The process of building the workInProgress tree is the process of diff. We schedule a group of tasks through requestIdleCallback. After completing each task, we check to see if there are any queue jumpers (more urgent). After completing each group of tasks, we return the time control to the main thread until the next requestIdleCallback callback to continue building the workInProgress tree.

The life cycle is also divided into two stages:

// Phase 1 rendering/reconciliation
componentWillMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate

//Phase 2 commit
componentDidMount
componentDidUpdate
componentWillUnmount

The lifecycle function in phase 1 may be called multiple times. It is executed at low priority by default. If it is interrupted by a high-priority task, it will be re-executed later.

Fiber tree and workInProgress tree

Double buffering technology: It means that after the workInProgress tree is constructed, a new fiber tree is obtained, and then the current pointer is pointed to the workInProgress tree. Since the fiber and workInProgress hold references to each other, the old fiber is used as a reserved space for the new fiber update, thereby achieving the purpose of reusing fiber instances.

Each fiber has an alternate property, which also points to a fiber. When creating a workInProgress node, the alternate is given priority. If there is no alternate, create one.

let workInProgress = current.alternate;
if (workInProgress === null) {
  //...
  workInProgress.alternate = current;
  current.alternate = workInProgress;
} else {
  // We already have an alternate.
  // Reset the effect tag.
  workInProgress.effectTag = NoEffect;

  // The effect list is no longer valid.
  workInProgress.nextEffect = null;
  workInProgress.firstEffect = null;
  workInProgress.lastEffect = null;
}

The benefits of doing this:

• Ability to reuse internal objects (fibers)
• Save memory allocation and GC time overhead
  

Fiber outage recovery

Interrupt: Check the work unit currently being processed, save the current results (firstEffect, lastEffect), modify the tag, quickly finish and open another requestIdleCallback, and do it next time when you have the chance

Breakpoint recovery: The next time you process the work unit, you will see that the tag is the interrupted task, and then continue to do the unfinished part or redo it.

PS Whether it is a "natural" interruption due to time running out, or a rude interruption by a high-priority task, it is the same for the interruption mechanism.

React setState

After calling the setState function in the code, React will merge the passed parameter object with the current state of the component and then trigger the so-called reconciliation process. After the reconciliation process, React will build the React element tree according to the new state in a relatively efficient manner and proceed to re-render the entire UI interface. After React gets the element tree, it automatically calculates the node differences between the new tree and the old tree, and then minimizes and re-renders the interface based on the differences. In the difference calculation algorithm, React can know relatively accurately which positions have changed and how they should be changed, which ensures on-demand updates instead of full re-rendering.

setState is sometimes called synchronously (settimeout, custom DOM events) and sometimes asynchronously (normal calls)

React event mechanism

React events are uniformly distributed on the outermost document through event proxy, and are not bound to the actual Dom node. Moreover, react wraps the native Event object internally. It has the same interface as the browser's native events, including stopPropagation() and preventDefault().

The above is the detailed content of the summary of the basic knowledge of react. For more information about the basic knowledge of react, please pay attention to other related articles on 123WORDPRESS.COM!