Recently, I have been reading Xiu Yan’s “React in A Simple Way”. My writing style is very interesting, and there is no lack of useful things. After reread several times, I still get a lot of things. There are about 15 articles in this series. If you think it is helpful, you can give a star. If you find any problems, please feel free to correct them in the comments section.

The React lifecycle is a cliche, and few React introductory textbooks omit the component lifecycle. However, the design of introductory textbooks often pursues “simple and easy to learn quickly”, which leads to the stereotyped impression of many students on life cycle knowledge as “just memorize it, don’t think too much”.

The simple and crude learning method of “memorizing is over” may help you understand “What to do” and arrive at “How to do”, but it does not help you to think and recognize “Why to do”. As a professional React developer, we have to demand that we know what it is and why.

The React life cycle has gone through iterations of V15, V16.3 and V16.4, etc. It is necessary for us to discuss, compare and summarize the life cycle of this version, and establish a systematic and perfect life cycle knowledge system by clarifying “Why” one after another.

What are the design ideas behind the lifecycle?

Componentization and virtual DOM

What role does the virtual DOM play in the React workflow?

The virtual DOM is the cornerstone of the core algorithm in both phases of the React workflow (mount and update). When the component is initialized, it will generate the virtual DOM by calling the render method in the life cycle, and then realize the conversion from the virtual DOM to the real DOM by calling reactdom.render. When the component is updated, the render method is called again to generate a new virtual DOM, and diff is used to locate the differences between the two virtual DOM to make targeted updates to the changed real DOM.

As an excellent design idea, how is componentization reflected in React?

The React component follows the “closed and open” principle. The so-called closure mainly refers to the rendering workflow, that is, the process from component data change to update. Components have their own rendering workflow, and each component only deals with its internal rendering logic. In the case of no data flow interaction, components and components can be independent; React allows developers to communicate between components based on one-way data flow. The result of communication will change the internal data of both parties or one party, thus affecting the rendering result. Therefore, at the data level, components are also open to each other.

Some understanding of the nature of the lifecycle approach

The render method is comparable to the “soul” of the component, and the life cycle method outside of render can be understood as the “torso” of the component. We can selectively omit the writing of any life cycle method content outside of Render, but the render function cannot omit the generation of virtual DOM, All updates depend on render.

React 15 Life cycle

Some points to remember,

  • The V15 life cycle is divided into three phases: mount, update, and unmount. The corresponding life cycle and execution sequence of the three phases are described
  • Component updates are divided into two types: one is triggered by the parent component, and the other is triggered by the component calling its own setState. Updates triggered by the parent component call the componentReceiveProps lifecycle in addition, while updates triggered by the component itself start directly from shouldComponentUpdate
  • ComponentReceiveProps is triggered not by changes to props, but by updates to the parent component
  • ShouldComponentUpdate prevents component re-render
  • There are two ways to trigger componentWillUnmount, one is to remove the component from the parent component, the other is to set a key in the component, the parent component in the render process, found that the key value is inconsistent with the last time

React V16.3 Lifecycle

The following adjustments have been made.

  • During the mount phase, deprecated componentWillMount and added getDrivedStateFromProps to derive the state default value from props
  • Update phase, abandoned componentWillReceiveProps componentWillUpdate, new getSnapshotBeforeUpdate used to get updates before the real DOM and state & props before and after the update information

The points to pay attention to are,

  • GetDrivedStateFromProps is a static method that cannot access an instance and should only be used to derive state from props, returning an object to update the component state
  • GetSnapshotBeforeUpdate is executed after the Render method and before the real DOM is updated. You can get the real DOM before and after the update and the state & props information before and after the update. This is useful in some special scenarios. For example, some need to both be aware of changes in data and obtain real DOM information
  • The return value of getSnapshotBeforeUpdate is passed to componentDidUpdate as the third argument

React V16.4 Lifecycle

GetDerivedStateFromProps is only triggered by parent component updates in 16.3. In 16.4, GetDerivedStateFromProps is triggered by any component update process triggered by any factor, including update processes triggered by this.setState and forceUpdate

The post-V16.3 lifecycle can also be divided into three phases at the Fiber level,

  • Render phase: Pure and without side effects, may be suspended, terminated, or restarted by React
  • Pre-commit phase: DOM can be read
  • Commit phase: You can use DOM, run side effects, and schedule updates

The thinking behind the life cycle “old and new”

The common feature of the waste life cycle is that it may be repeated in the render stage. As we know, under the asynchronous rendering mechanism of Fiber, tasks may be interrupted halfway through execution by high-priority tasks, and the render stage may be suspended, terminated or restarted.

Related articles

  • React Advanced SERIES JSX
  • React Advanced Series: Data Flow

Write in the last

This article first in my blog, uneducated, unavoidably have mistakes, the article is wrong also hope not hesitate to correct!

If you have questions or find mistakes, you can ask questions and errata in the comments section,

If you like or are inspired by it, welcome star and encourage the author.

(after)