# [閱讀筆記] React 思維進化 一次打破常見的觀念誤解，躍升專業前端開發者

###### tags `閱讀筆記` `前端筆記`

<div style="display: flex; justify-content: flex-end">

> created: 2024/03/11

</div>

## 4-2 Component 的生命週期

Component 可以分成三個階段的生命週期：`Mount`, `Update` 及 `Unmount`。

使用 functional component 並沒有像是 class component 有生命週期的 API 使用，`useEffect` 也不是 functional component 的生命週期 API。開發者確實可以透過 `useEffect` 達到類似的行為，但是 `useEffect` 本生並不是以這個心智模型操作。

:::info
1. Render phase: renderin，所以會得到 React Element
2. Commit phase: 完成及代表 rendered，所以完成後就會在 DOM tree 看到其元件
:::

### `Mount`

aka 元件初始化（initialize）。


### `Update` & `Unmout`

若在 Update 時 React 發現有元件不需要了，就會執行 `Unmout`。