The lifecycle has always been a core concept in frontend technology, and React is no exception. It’s important to note that the component lifecycle in React is not synonymous with the lifecycle methods of class components.
The component lifecycle is a set of abstract concepts, with class component lifecycle methods and Hooks API serving as interfaces to these concepts. Therefore, whether you choose function components with Hooks or stick to class components, understanding the component lifecycle is essential.
Lifecycle Methods in Class Components
Overall, a class component’s lifecycle includes four main phases: Mounting, Updating, Unmounting, and Error Handling. Each phase provides specific lifecycle methods. The most important method, render(), is also a lifecycle method.
Like the following diagram show:
Mounting
When a component is first added to the virtual DOM, a class component is instantiated, triggering the mounting phase lifecycle methods, which include the following four methods:
