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 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='1'>1</li>, <li key='2'>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.
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. 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 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. #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 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) ##8.componentDidUpdate(prevProps, prevState) ##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!
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
};
}
componentWillMount, componentWillMount Will be called before calling
It will be called immediately before loading occursIV.componentDidMount()
props will be # removed in this method ##next props comparison is necessary. #6.shouldComponentUpdate(nextState,nextProps)
When new props or
state are accepted, When new props or state are received, this method will be called immediately before re-rendering. You cannot
this.setState() in this method. This method will not be called for the first renderingDOM 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