The life cycle of a component refers to the process from when a component is created to when it is mounted and run on the page, and then when the component is uninstalled when not in use. Only class components have a life cycle (class components are instantiated, function components do not need to be instantiated)
The comparison chart between the new version and the old version of the life cycle is as follows:
Life cycle (constructor())
Class components inherit the react Component base class, and thus inherit this react base class so that render(), life cycle and other methods can be used. This also explains why function components cannot use these methods.
constructor(): Its input parameters are props (custom properties passed from the parent scope and children [nested view structure inside the component]). The first line of code must be super(props), which calls the constructor of the parent class. function
- The component's own state can only be defined here (define it first and then use it). State is a so-called declarative variable.
- Props cannot be modified here, nor can props be used to perform operations here (because the constructor only occurs once in the declaration cycle).
- Do not cross-assign props and state here. In React code logic, always maintain the independence of props and state.
- Do not use this.setState to modify state here. Rendering is performed as soon as the value is assigned, but in the constructor, the render life cycle has not yet been generated.
- In general, don't write business logic here. Sometimes we only allow this when we need to change the point of this. For example, DOM, BOM operations, etc. should not be done here.
- Generally, inherit the parent class, define the state, and change the this point.
Life cycle (mounting phase)
| hook function |
Trigger time |
effect |
| constructor |
When creating a component, it is executed first and only once during initialization. |
1. Initialize state 2. Create Ref 3. Use bind to solve this pointing problem, etc. |
| render |
Triggered every time the component is rendered |
Render UI (note: setState() cannot be called inside) |
| componentDidMount |
Executed after the component is mounted (completed DOM rendering), executed once during initialization, and called before the browser updates the view. |
1. Send a network request 2.DOM operations |
componentWillMount(): before react 16.3
It is called before the component is mounted to the DOM, and will only be called once. Calling this.setState here will not cause the component to re-render, and the content written here can also be advanced to constructor(), so it is very easy in the project. use less.
componentDidMount(): after react 17
- Equivalent to mounted() in Vue, indicating that the mounting phase has been completed, and this declaration cycle is only executed once.
- Various business logic (DOM, ref, disconnecting interfaces, starting timers, etc. can be done here)
- This.setState() can be used multiple times here, and the default is asynchronous.
- This lifecycle is in the update phase and occurs after render.
Life cycle (update phase)
Before react 16.3
- componentWillReceiveProps(nextProps,nextState)
- This life cycle mainly provides us with monitoring of changes in props. If you need to change some state of the component accordingly after the props change, changing the state in this method will not render it twice, but directly merge the state.
- shouldComponentUpdate(nextProps,nextState)
- It will return a Boolean value to determine whether the rendering component needs to be updated. If it returns false, it will not execute the life cycle downwards. It is one of the main means to optimize react applications. SetState() cannot be called in this method, which will lead to circular calls.
- componentWillUpdate
- This life cycle is used to handle things before the Dom is updated. SetState cannot be called at this stage, which will lead to circular calls.
- render
- componentDidUpdate(preProps,preState)
- At this point, rendering has been completed, Dom and state have changed, and the parameters are all the values of the previous state.
After react 17
- getDerivedStateFromProps(nextProps,preState)
- An object can be returned to update state.
- shouldComponentUpdate render getSnapshotBeforeUpdate(preProps,preState)
- At this stage, you can get the coordinates, size and other related information of the previous state Dom element. Used to replace componentWillUpdate in the old life cycle
- The third parameter of componentDidUpdate appears.
- Executed before the latest rendering is submitted to the DOM tree, it can be used to obtain the DOM information before the update.
- componentDidUpdate(preProps,preState,snapshot)
- It will not be called on the first rendering, but will be called immediately after the component is updated. When using this.setState in this life cycle, it must be wrapped in a conditional statement, otherwise it will cause an infinite loop.
The update phase is triggered in three situations:
1. Parent component changes props: A component cannot actively change the props attributes it owns. Its props attributes are passed to it by its parent component. Forcing props to be reassigned will cause the program to report an error.
- Use it directly. Whenever the parent component re-renders and re-transmits props, the child component will be re-rendered directly, regardless of whether the props have changed. Can be optimized through shouldComponentUpdate method.
- In the componentWillReceiveProps method, convert props into your own state
2. Change state: The change of state is achieved through the setState interface. A large part of the reason why components are updated is due to calling the setState interface to update the state. We often call setState in a synchronous manner, but in fact the setState method is asynchronous.
- The component itself calls setState regardless of whether the state has changed or not. Can be optimized through shouldComponentUpdate method.
3. Call the forceUpdate method: force the component to update.
Life cycle (uninstall phase)
| hook function |
Trigger time |
effect |
| componentWillUnmount |
Component uninstalls (disappears from page) |
Perform cleanup work (such as: cleanup timer, etc.) |
In the new version, some life cycle deprecation reasons: the three life cycle hooks componentWillMount, componentWillReceiveProps, and componentWillUpdate are all executed in the render phase.
(1) Before the fiber architecture is applied, the render phase cannot be interrupted. Once the page is complex, it may block the rendering of the page;
(2) So React introduced the fiber architecture, which turned the originally synchronous rendering process into asynchronous, breaking a large update task into many small tasks, and the render phase of low-priority tasks can be interrupted by high-priority tasks;
(3) This causes the life cycle functions executed in the render phase to be called multiple times. If some operations with side effects are performed in these functions, such as sending network requests, it will cause the same network request to be called multiple times. , so a new life cycle is needed to solve this problem;
(4) Use the static function getDerivedStateFromProps to replace several abandoned life cycle functions. Developers will not be able to obtain component instances through this, nor can they send network requests or call this.setState. By forcing developers to do nothing before rendering, Side-effect operations to avoid lifetime abuse.