preface

Hello everyone! This is the first article I participated in beginners’ introduction

purpose

  1. Learn more about Component and setState
  2. Learn about Fiber in React
  3. Learn the React synchronization rendering process
  4. React creates the DOM tree flow and setState workflow

Basic knowledge of

1. Two kinds of trees

2. Event loops

3. Imperative and declarative programming

Imperative programming: command the “machine” to do something so that whatever you want it to do, it will do. Declarative programming: Tell the “machine” what you want and let the machine figure out how to do it. React is Declarative Programming for the UI framework

Virtual DOM (ReactElement)

5. Components

6. React Fiber

The official one-sentence explanation is that "React Fiber is a re-implementation of the core algorithm." Fiber implements a cyclic task scheduling algorithm based on priority and requestIdleCallback. 1. Select the fiber node with the highest priority in the task queue, and call requestIdleCallback to obtain the remaining time. If the execution time exceeds deathLine, or the task with a higher priority is suddenly inserted, the execution will interrupt, save the current result, modify the tag. Set it to pending, quickly end it and call requestIdleCallback again, waiting for the main thread to be released before continuing. When a recovery task is executed, check that the tag is a broken task and that the task will continue or be redoneCopy the code

7. setState

Obtain the fiber node corresponding to the current component. 2. Obtain the current point in time. Obtain configuration information (ignored) 4. Calculate the expiration time 5. Create an Update object based on the expiration time 6. Put new state on update Schedule the expiration time in the Fiber treeCopy the code

SetState process

Obtain the fiber node corresponding to the current component. 2. Obtain the current point in time. Obtain configuration information 4. Calculate the expiration time 5. Create an Update object based on the expiration time 6. Put new state on update Schedule the expiration time in the Fiber treeCopy the code

8. What did the React do

1. Build a tree to manage all the virtual DOM. 2. Construct Fiber tree and manage all tasks through Fiber scheduling algorithm. 3. Render pages through virtual Dom after scheduling tasksCopy the code

After the language

Novice road, we have a lot of problems to advise!