---
# System prepended metadata

title: 'Lesson4-3: Lifecycle Event: Lesson Summary'
tags: [Recat]

---

# Lesson4-3: Lifecycle Event: Lesson Summary
###### tags: `Recat`
To recap, lifecycle events are special methods that React provides that allow us to hook into different points in a component's life to run some code. Now, there are a number of different lifecycle events. They will run at different points, but we can break them down into three distinct categories:

# Adding to the DOM
The following lifecycle events will be called in order when a component is being added to the DOM:
1. `constructor()`
2. `getDerivedStateFromProps()`
3. `render()`
4. `componentDidMount()`

> 以上四個都會影響到DOM裡面的原件

> ⚠️componentWillMount() has been deprecated. ⚠️
> As of React 16.3, componentWillMount() has been replaced with UNSAFE_componentWillMount(). Only UNSAFE_componentWillMount() will work starting with React 17.0. UNSAFE_componentWillMount() is now considered to be a legacy method and should not be used in new code.

# Re-rendering
The following lifecycle events will be called in order when a component is re-rendered to the DOM:

1. `getDerivedStateFromProps()`
2. `shouldComponentUpdate()`
3. `render()`
4. `getSnapshotBeforeUpdate()` [(specific use cases)](https://reactjs.org/docs/react-component.html#getsnapshotbeforeupdate)

> ⚠️componentWillReceiveProps() and componentWillUpdate() have been deprecated. ⚠️
> As of React 16.3, they have been replaced with `UNSAFE_componentWillUpdate()` and `UNSAFE_componentWillReceiveProps()`. Only UNSAFE_componentWillUpdate() and UNSAFE_componentWillReceiveProps() will work starting with React 17.0. `UNSAFE_componentWillUpdate()` and `UNSAFE_componentWillReceiveProps()` are now considered to be legacy methods and should not be used in new code.

# Removing from the DOM
This lifecycle event is called when a component is being removed from the DOM:
- `componentWillUnmount()`

# Further Research
- `componentDidMount()` from the React Docs
- `componentWillUnmount()` from the React Docs
- [Component Lifecycles](https://facebook.github.io/react/docs/react-component.html#the-component-lifecycle) from the React Docs
