This article has participated in the activity of “New person creation Ceremony”, and started the road of digging gold creation together.

preface

Can you tell us about the React lifecycle? I think most people will ask this question when interviewing on React Hook. Although React Hook has become mainstream, it doesn’t affect the interview. (anyway, I remember I asked them all during the interview.

How to put this problem? If this question is answered well, it should leave a good impression on the interviewer: 👏🏻👏🏻

I will briefly introduce what I know about the life cycle, and then I will talk about my answer. Of course, my answer may not be the best one, so please discuss it in the comments section

Before the React v16.0

This version should be the one you are most familiar with, and a picture is attached:

There are four phases: Intialization, Mounting, Update, and Unmounting

Intialization

During initialization, we use the constructor() function, as in:

constructor(props) {
  super(props);
}
Copy the code
  • The function of super is to call the constructor() method of the base class and inject the props of the parent component into the child component for the child component to read.
  • Initialize operations that define the initial contents of this.state
  • It will only be executed once

Mounting (mount)

ComponentWillMount: Called before the component is mounted to the DOM

  • The above call to this.setState does not cause the component to re-render, but could also refer what is written here to constructor(), so it is rare in the project.
  • It will only be called once

Render: apply colours to a drawing

  • Render is rerendered whenever the props and state are changed.
  • React renders the DOM from the React element. This element is used to render the DOM.
  • Render is a Pure function, cannot execute this.setState.

ComponentDidMount: called after the component is mounted to the DOM

  • One call

The Update (Update)

ComponentWillReceiveProps (nextProps) : used for components caused by props update process

  • NextProps: The parent component passes new props to the current component
  • You can use nextProps and this.props to find out if the retransmitted props has changed (reason: there is no guarantee that the parent component retransmitted props has changed)
  • This is invoked whenever the props changes

ShouldComponentUpdate (nextProps, nextState) : Performance optimization component

  • NextProps: this. Props of the current component
  • NextState: this.state of the current component
  • Compare nextProps to nextState to determine whether the current component needs to continue the update process.
  • Returns false: stops updates, used to reduce unnecessary rendering of components and optimize performance
  • Returns true: updates continue
  • Like componentWillReceiveProps () to execute the enclosing setState, update the state, but in front of the render (such as shouldComponentUpdate componentWillUpdate), This. state still refers to the pre-update state, otherwise nextState will always be true compared to the current component’s this.state

ComponentWillUpdate (nextProps, nextState) : Called before a component is updated

  • Executes before the Render method
  • Because component updates are invoked, they are rarely used
  • -Leonard: Let’s just render it again

ComponentDidUpdate (prevProps, prevState) : Invoked after component updates

  • PrevProps: props before component update
  • PrevState: State before component update
  • You can manipulate the DOM of component updates

Unmounting (unloading)

ComponentWillUnmount: Called before the component is unmounted

  • You can do some cleanup here, such as being aware of timers used in components, being aware of manually created DOM elements in componentDidMount, and so on, to avoid causing a memory leak

The React v16.4

You can see how this compares to the life cycle of V16.0

GetDerivedStateFromProps and getSnapshotBeforeUpdate were added

Cancelled componentWillMount, componentWillReceiveProps, componentWillUpdate

getDerivedStateFromProps

GetDerivedStateFromProps (prevProps, prevState) : Method called when a component is created or updated

  • PrevProps: props before component update
  • PrevState: State before component update
  • In React V16.3, this function is called only when triggered by the parent component during creation and Updating. In React V16.4, this function is called either Mounting or Updating, or whatever caused Updating.
  • Is similar to componentWillReceiveProps, different getDerivedStateFromProps is a static function, namely the function cannot be accessed through this to the class attribute, of course, is not recommended
  • If the props pass does not need to affect your state, then you need to return null, which is required, so try to write it to the end of the function.
  • Called at component creation time and before the Render method at update time, it should either return an object to update the state or null to not update anything.

getSnapshotBeforeUpdate

GetSnapshotBeforeUpdate (prevProps,prevState): function when Updating, called after render

  • PrevProps: props before component update
  • PrevState: State before component update
  • When the DOM can be read but not used, the component can capture some information (such as scroll position) from the DOM before possible changes are made
  • Any fingers returned will be passed as arguments to componentDidUpdate ()

discuss

Regression question, what about the React lifecycle?

The newbie’s usual response:

The React lifecycle is executed in 4 phases. The React lifecycle is executed in 4 phases. The React lifecycle is executed in 4 phases. 16.4 added getDerivedStateFromProps and getSnapshotBeforeUpdate compared with 16.0. All hook functions with Will were removed except compentWillUnmount. Then the addition of two hooks talked (omit 500 words), that in the end In the 17.0 version, the official abolish componentWillMount, componentWillReceiveProps, componentWillUpdate

Did you impress the interviewer? Welcome to the comments section