---
# System prepended metadata

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

---

# [閱讀筆記] 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）。

![截圖 2024-03-11 21.09.38](https://hackmd.io/_uploads/rkysztn6T.png)

### `Update` & `Unmout`

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

![截圖 2024-03-11 21.10.27](https://hackmd.io/_uploads/H1f0zF3pa.png)
