React is a popular JavaScript front-end framework that is very useful for building large web applications. In React, components are the basic building blocks, and each component has lifecycle methods that allow you to control the behavior of the component at different stages. In React version 16.3 and later, new lifecycle methods have been added, and some of the original lifecycle methods have been changed. In this article, we will delve into the new and old lifecycle methods of React.
1. Old Lifecycle#
First, let's introduce the old lifecycle of React. Versions of React before v16.3 include the following lifecycle methods:
- componentWillMount()
- componentDidMount()
- componentWillReceiveProps()
- shouldComponentUpdate()
- componentWillUpdate()
- componentDidUpdate()
- componentWillUnmount()
These lifecycle methods are called in the order of the component's lifecycle. Their functions are as follows:
- componentWillMount(): Called when the component is about to be mounted to the DOM.
- componentDidMount(): Called immediately after the component is mounted to the DOM.
- componentWillReceiveProps(): Called when the component receives new props.
- shouldComponentUpdate(): Called when the component receives new props or state, used to determine if the component needs to be re-rendered.
- componentWillUpdate(): Called when the component is about to be updated.
- componentDidUpdate(): Called immediately after the component has been updated.
- componentWillUnmount(): Called before the component is unmounted.
2. New Lifecycle#
React v16.3 introduced some new lifecycle methods and modified the usage of some of the original lifecycle methods. Here we list the new or changed lifecycle methods in React v16.3 and later versions:
- static getDerivedStateFromProps(props, state): This method is called when the component is instantiated and each time it receives new props. It can replace the componentWillReceiveProps() method and is used to calculate a new state based on the new props.
- getSnapshotBeforeUpdate(prevProps, prevState): Called before the actual update begins (i.e., after the render() method), and before any actual changes are made to the DOM tree. This method returns a value that will be passed as the third parameter to the componentDidUpdate() method. This method is often used together with the componentDidUpdate() method to manipulate DOM elements after an update.
- componentDidUpdate(prevProps, prevState, snapshot): Called immediately after the component is updated. It receives three parameters: prevProps, prevState, and snapshot. This method is often used together with the getSnapshotBeforeUpdate() method to manipulate DOM elements after an update.
It is important to note that the React official documentation has explicitly stated that in most cases, there is no need to use the new lifecycle methods. It is recommended to only use these methods when necessary.
3. Summary#
In this blog post, we have detailed the new and old lifecycle methods of React, including the purpose, calling order, and usage of each lifecycle method. Understanding the component lifecycle is crucial for developers who already have some experience with React and beginners who want to learn React. By understanding the purpose and calling order of each lifecycle method, we can better control the behavior of the component at different stages, thereby improving the performance and user experience of the application.
It is important to note that after React v16.3, the new or modified lifecycle methods are not mandatory to use. It is recommended to only use them when necessary. In addition, React also provides some hooks such as shouldComponentUpdate() and setState() to help us better control component rendering and state management.
Finally, if you want to delve into React, I recommend reading the React official documentation and excellent blogs from the React community. These resources will be of great help to you. Also, feel free to follow my blog, where I will continue to share knowledge and experience related to React, hoping to be helpful to you.