React life cycle

In our programming process, the most important thing for React learning is the life cycle, and learning the react life cycle will also be of great help to our own programming.

If you have a good foundation, it is recommended to look directly at the code https://github.com/facebook/react/blob/master/src/renderers/dom/tests /ReactDOMProduction-test.js#L89-L175 , as can be seen from the code The generation process of ReactDOM, the life cycle of React is described in detail below:

1. instantiate

• getDefaultProps
  calls React.createClass, then triggers the getDefaultProps method, which returns an object, which is then merged with the props object specified by the parent component, and finally assigned to this.props as the default property of the component, this method is called only once

• getInitialState
  initializes the value of state, the return value will be assigned to this.state, in this method, you can already access this.props.

• componentWillMount
  operates on state and will not trigger re-rendering. It is recommended to use constructor instead

• Render
  generates the virtual DOM structure required by the page according to the value of state

• componentDidMount
  can set state, which will trigger re-rendering. Inside the component, ReactDOM.findDOMNode(this) can be used to get the node of the current component to operate the DOM

1. Existence

• componentWillReceiveProps(nextProps)
  This function is triggered when the component receives new props. Usually, this.setState method can be called to compare the execution state of this.props and nextProps, and complete the modification of the state

• shouldComponentUpdate(nextProps, nextState
  This method is used to intercept new props or state, and then determine whether to update the component

• componentWillUpdate(nextProps, nextState)
  is called before the update

• rende
  generates virtual DOM data that needs to be updated according to the diff algorithm

• componentDidUpdate(prevProps, prevState)
  After the render method is successfully executed, the real DOM will be rendered. You can use the this.getDOMNode() method in this method to access the native DOM

1. Destruction & Cleanup Period

• componentWillUnmount
  will trigger componentWillUnmount, usually to remove the DOM, cancel event binding, destroy timers, etc.

---

References:
Understanding React ComponentsReact
Component LifecycleReact
Lifecycle Resolution

The article is from my github: https://github.com/junhey/studyNotes/issues/24