The process of a component from being created to being destroyed is called the life cycle of the component. Usually can be divided into three phases: mount phase, update phase, uninstall phase
The life cycle method of each stage is as follows
Mounting phase:
1、constructor
In this method, you need to receive the props attribute object passed by the parent component. You must call super(props) in this method to ensure that the props are passed into the component.
This method is usually used to initialize the state of the component and bind event handling methods
2、componentWillMount
This method is called before the component is mounted to the DOM and will only be called once. This method is rarely used in actual projects, because the work that can be performed in this method can be advanced to the constructor. Calling this.setState in this method will not cause the component to re-render.
3、render
This is the only necessary method when defining a component (other life cycle methods of the component can be omitted). In this method, a React element is returned according to the props and state of the component, which is used to describe the UI of the component. Usually, the React element is defined using JSX syntax. It should be noted that render is not responsible for the actual rendering of the component , it just returns a description of the UI, and React itself is responsible for the actual rendering of the page DOM. Render is a pure function. Any side-effect operations cannot be performed in this method, so this.setState cannot be called in render , which will change the state of the component.
4、componentDidMount
Called after the component is mounted to the DOM, and will only be called once. At this time, the DOM structure can be obtained, so operations that rely on DOM nodes can be placed in this method . This method is usually used to request data from the server . Calling this.setState in this method will cause the component to re-render.
componentDidMount is the best place to communicate between the component and the server for two main reasons:
1. Performing server communication in componentDidMount can ensure that when the data is obtained, the component is already in the mounted state. At this time, it is safe to manipulate the DOM directly, and componentWillMount cannot guarantee this.
2. When the component is rendered on the server side, componentWillMount will be called twice, once on the server side and the other on the browser side, and componentDidMount can guarantee that it will only be called once under any circumstances, so that no excess will be sent Data request
Update phase
1、componentWillReceiveProps
This method will only be called during the component update process caused by props. State cited
The new component update does not trigger the execution of this method.
2、shouldComponentUpdate
This method determines whether the component will continue the update process. When the method returns true (true is also the default return value of this method), the component will continue the update process; when the method returns false, the component update process stops, and subsequent componentWillUpdate, render, and componentDidUpdate will not be called. Generally, the return result of this method is determined by comparing nextProps, nextState and the current props and state of the component. This method can be used to reduce unnecessary rendering of components, thereby optimizing component performance.
3、componentWillUpdate（nextProps,nextState）
It can be used as a place to perform some work before the component update occurs, and it is generally rarely used.
Note: Neither shouldComponentUpdate nor componentWillUpdate can be called
setState, otherwise it will cause a loop call problem, render can never be called, the component
It also cannot be rendered normally.
4 、 componentDidUpdate （prevProps, prevState）
Called after the component is updated, it can be used as a place to manipulate the updated DOM. The two parameters prevProps and prevState of this method represent props and state before the component is updated.
Uninstall phase
The process in which a component is unloaded from the DOM. There is only one life cycle method in this process:
1、componentWillUnmount
This method is called before the component is unloaded. You can perform some cleanup work here, such as clearing the timer used in the component, clearing the DOM element manually created in componentDidMount, etc., to avoid memory leaks.
Finally, I need to remind everyone that only class components have life cycle methods, and functional components have no life cycle methods, so you should never use life cycle methods in functional components.