What are the life cycle functions of React components?

Each component has some life cycle functions.

When a component instance is created and inserted into the DOM, the following functions will be called

constructor
componentWillMount
render
componentDidMount

to change the component's state or props will cause updates. When the component is re-rendered, the following methods will be called.

componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

When the component is removed from DOM, the following methods will be called.

componentWillUnmount

一.render()

render method is required. The return value of render is of the following type:
( 1) react element: either a custom component or a native DOM component
(2)String or number: will Rendered into text nodes in DOM
(3)Portals:Created by ReactDOM.createPortal
(4)null: Nothing will be rendered
(5)Boolean:Nothing will be rendered
(6)Array containing multiple elements

render(){
    return [
        <li key=&#39;1&#39;>1</li>,
        <li key=&#39;2&#39;>2</li>
    ]
}

The render method should be simple. The state of the component cannot be modified in render. Each time render is called, a new result will be returned. And you cannot interact with the browser in render. If you need to interact with the browser, execute it in componentDidMount or other life cycle functions.

##2.constructor(props)

Component The constructor is called before the component is loaded. If constructor is not explicitly defined, the default constructor will be called when instantiating the component. If constructor is explicitly defined in a subclass of React.Component, then It is necessary to call super(props) first in constructor.
It is a good choice to instantiate state in the constructor. Here is an example of a piece of code##

constructor(props) {
  super(props);
  this.state = {
    color: props.initialColor
  };
}

react state is legal, but there is a problem: when props are updated, state will not be updated. The solution is: update state with new props in the component's componentWillReceiveProps(nextProps). Although this can solve the problem, it is not recommended. It is recommended to upgrade the state to the nearest public parent component

It will be called immediately before loading occurs

render. Modifying state in componentWillMount will not cause the component to be re-rendered. This method will only be called for server-side rendering. It is recommended to replace this method with constructor.

IV.componentDidMount()

#componentDidMount will be triggered immediately when the component is loaded. Modifying the state in this function will cause the component to be re-rendered. . The DOM cannot be manipulated until the component is loaded. If you need to load remote data, it is a good idea to send network requests here.

componentWillReceiveProps will be triggered when the component that has been reproduced accepts new props. If you need to update state to respond to the update of props, you can update state through the setState method here. When the component receives props for the first time, this method will not be called. Note: props may not be changed but this method may be called, so the current
props will be # removed in this method ##next props comparison is necessary. #6.shouldComponentUpdate(nextState,nextProps)

When new props or

shouldComponentUpdate will be called before rendering. This method returns true by default. The initial rendering and Using forceUpdate, this method will not be called. If shouldComponentUpdate returns false, subsequent componentWillUpdate, render and componentDidMount will not be called , and the component and its subcomponents will not be re-rendered. #7.componentWillUpdate(nextProps, nextState)

When new props or state are received, this method will be called immediately before re-rendering. You cannot

##8.componentDidUpdate(prevProps, prevState)

DOM here. When you find that the current props are different from the previous props, it is a good idea to send a network request here

##9.componentWillUnmount()This method will be called immediately before the component is destroyed. In this method, some necessary cleanup can be done.

The above is the detailed content of What are the life cycle functions of React components?. For more information, please follow other related articles on the PHP Chinese website!