# [學習] react
###### tags: `#learn`

## 個人疑問
:::spoiler
- react組件化 vs 原生js 差別?
- local state, Context, Redux 差別?
:::

## JSX
:::spoiler
- jsx 本質是甚麼, 與js到底有麼關係
- 為甚麼要用jsx, 不用會怎樣
- jsx背後的功能模塊 是甚麼 & 做了甚麼
:::

## 生命週期
:::spoiler
- 幾乎所有可見/不可見的內容, 都可以被抽離成各式各樣的組件, 每個組件既是**封閉**也是**開放**的

:::

## 組件間的通訊
:::spoiler
- local state, Context, Redux 差別?

:::

## React Hooks
:::spoiler
- 類組件, 函數組件 差別?
>以下是 React 類組件和函數組件的一些區別：
> 1. 語法：類組件是使用 ES6 class 語法定義的，而函數組件是使用函數定義的。
> 2. 內部狀態（state）：類組件可以使用內部狀態（state），而函數組件只能使用 props 和外部狀態（通過 useState 等 hook 來實現）。
> 3. 生命週期：類組件有多個生命週期方法（如 componentDidMount、componentDidUpdate 等），可以在組件的不同生命週期中執行不同的邏輯，而函數組件只能使用 useEffect hook 來模擬生命週期。
> 4. 性能：通常來說，函數組件比類組件具有更好的性能，因為它們不需要實例化，不需要維護實例屬性和生命週期方法等。
> 5. 可讀性和可維護性：函數組件通常比類組件更簡潔明了，代碼量更少，因此更易於閱讀和維護。
>
> 需要注意的是，從 React 16.8 版本開始，函數組件支持使用 hook 來管理狀態和模擬生命週期，這使得函數組件能夠完成類組件中的大多數功能。因此，在實際開發中，函數組件和類組件的選擇往往取決於個人或團隊的偏好和具體的業務場景。
:::

## Virtual DOM
:::spoiler
- 什麼是虛擬DOM?
- 為什麼需要虛擬DOM?
- 研發體驗 / 研發效率 的問題
- 跨平台的問題
- 虛擬DOM優勢何在?
- 虛擬DOM是會伴隨更好的性能?
- 如果DOM改動不大, 那虛擬DOM快於實際DOM
- diff, patch, batch?
> [DOM歷史] 解決方案
> 原生JS操作DOM -> JQuery時期, 早期模板引擎方案 -> 數據驅動視圖
:::

## Stack Reconciler(React15)
:::spoiler
### [名詞]
- Reconciler(調和): 使一致 & Diff: 找不同
- Diff確實是調和裡最具代表的一環
### [策略&邏輯] Diff
- Diff算法的性能突破: 分層對比
- 類型一致的節點: 才有繼續Diff的必要
- key屬性: 重用同一層級內的節點
:::

## setState(React15)
:::spoiler
- React控制: 異步的
- setTimeout: 同步的, setState逃脫React
:::

## Fiber
:::spoiler
- JS單線程, 瀏覽器多線程
- Stack Reconciler對主線程超時占用問題
- Stack Reconciler是一個同步的遞歸過程
- 
- 甚麼是Fiber?
- [架構] 是對React核心算法的重寫
- [編碼] 是React內部所定義的一種是數據結構
- [工作流] Fiber節點保留了組件: 需要更新的狀態&副作用
- Fiber架構的目的: 實現增量渲染
- 可中斷
- 可恢復
- 優先級

:::

## React 事件統
:::spoiler

:::