React introduces the Hooks mechanism in the function component to enable the function component to have the life cycle capability of the class component (essentially different). In this paper, the implementation principle of React Hooks is explained in the simplest way through source code and text.

Front knowledge

Fiber

React implements time slicing by abstracting all component nodes of the page — Fiber. By introducing Fiber structure React, component update scheduling can be better realized. Fiber structure mainly has the following types of structure:

  1. The connection structure of the Fiber node depends on these properties when components are updated
  2. The operation of the dynamic data (updateQueue memoizedState) and so on, at the time of rendering update will use these attributes of operation and data storage needs to be updated. The implementation of Hooks relies on this structure.
  3. Lanes, which defines the priorities of tasks, implements a new priority update mechanism for Fiber Reconciler, which will be reintroduced in a subsequent article.

update

React introduces the concept of update processing. When an update is triggered react inserts the update into the corresponding Update ue and schedules the render update of the page. Finally, the implementation of update Ue is completed.

React Fiber Reconciler

React maintains two data structures during the rendering process to implement features such as update-breakable features:

  1. Current Fiber Tree Displays the current page structure
  2. The workInprogress tree structure adds updated structures in updates but not rendered to the page

In the specific rendering process, it is mainly divided into:

  1. The render stage mainly constructs the corresponding workInProgress node according to the existing Fiber node. This stage realizes the logic of task interruption, priority task processing and so on
  2. Commit Phase The COMMIT phase performs the corresponding update operations (such as updating Dom) according to the Fiber node type.

The data structure of Hook

The data structure of hookAs follows:

Hooks implementation

Hooks are called differently during the first component mount and component update phasesImplementation logic







The following is an overview of the implementation of Hooks in different phases and then a look at the implementation in detail as we dive into the source code.

Implementation of graphical hooks

Mount phase Hooks implementation logic



Implementation logic for the Update phase Hooks

Implementation of source parsing hooks

The following uses useState hook to analyze the source code implementation of React in the mount and update phases.

Mount stage source code analysis

In the mount phase of the component,useState is calledmountState



MountState mainly does:

  1. Initialize memoizedState and update queue based on initialState
  2. Return memoizedState and update function (queue bound to current hook)

Update phase source code analysis

Called when a page update is triggered using a callback returned by useStateDispatchAction function



When the component is updated to the corresponding function component, the corresponding hook logic of the corresponding hook update phase will be executedupdateStateFrom the updateState code, we can see that useState is using the useReducer code logic at the bottom. So the specific update logic is inupdateReducerIn!!!!



UpdateReducer logic is as follows:

  1. Obtain the current hook and update queue of hook according to the hook linked list stored in Fiber
  2. Loop through the update queue of the hook and save the result to the hook’s data structure
  3. Returns the result of processing and the update function

React Hook: React Hook

  1. For example, why can’t we use conditional statements to add hooks

reference

React Technology revealed

                                             

Welcome to follow my wechat official account and learn together