✅【共筆】React 思維進化》時程總表

5月29日起,每週三晚上 9:30 開始,通常1小時以內討論完畢(時程可能變更,詳見 Discord 本組頻道)。

Zoom meeting 連結

時程總表

日期 章節 導讀人 筆記 錄影
5月29日 1全 anna 筆記 YouTube
6月5日 2-1~2-2 小玉 筆記 YouTube
6月12日 2-3 小玉 筆記 YouTube
6月26日 2-4~2-5 ang 筆記 YouTube
7月3日 2-6 ang 筆記 YouTube
7月17日 2-7~2-9 阿壹 筆記 YouTube
8月7日 3-1~3-3 ang 筆記 YouTube
8月14日 3-4 ang 筆記 YouTube
8月21日 4全 小玉 筆記 YouTube
8月28日 5-1
5-2
Anna 筆記 YouTube
9月4日 5-3
5-4
Anna 筆記 YouTube
9月11日 5-6 阿壹 筆記 YouTube
9月18日 5-5,5-7 阿壹 筆記 YouTube

內容視進行狀況彈性調整。

共同學習選擇書籍

章節(進度參考)

【第一篇 暖身準備】
1-1 React 是什麼
1-2 學好 React 所需要的 JavaScript 基本功
1-3 React 開發環境建置的門檻
1-3-1 安裝 Node.js
1-3-2 Create React App
1-3-3 基於 React 的進階框架

【第二篇 React 的畫面管理機制】
2-1 DOM 與 Virtual DOM
2-1-1 DOM
2-1-2 Virtual DOM
2-2 建構畫面的最小單位:React element
2-2-1 什麼是 React element
2-2-2 React element 的子元素
2-2-3 React element 在建立後是不可被修改的
2-2-4 React element 與 DOM element 的屬性對應和差異
2-3 Render React element
2-3-1 React DOM 與 root
2-3-2 React 只會去操作那些真正需要被更新的 DOM element
2-3-3 瀏覽器環境以外的 React 畫面繪製
2-4 JSX 根本就不是在 JavaScript 中寫 HTML
2-4-1 什麼是 JSX 語法
2-4-2 以 Babel 來進行 JSX 語法的轉譯
2-4-3 新版 JSX transformer 與 jsx-runtime
2-5 JSX 的語法規則脈絡與畫面渲染的實用技巧
2-5-1 嚴格標籤閉合
2-5-2 JSX 語法中的資料表達
2-5-3 畫面渲染邏輯
2-5-4 為什麼一段 JSX 語法的第一層只能有一個節點
2-6 單向資料流與一律重繪渲染策略
2-6-1 單向資料流
2-6-2 實現單向資料流的 DOM 渲染策略
2-6-3 React 中的一律重繪渲染策略
2-7 畫面組裝的藍圖:component 初探
2-7-1 什麼是 component
2-7-2 定義 component
2-7-3 呼叫 component
2-7-4 Import 與 export component
2-7-5 Props
2-7-6 父 component 與子 component
2-7-7 Component 的 render 與 re-render
2-7-8 為什麼_component 命名中的首字母必須為大寫
2-8 React 畫面更新的發動機:state 初探
2-8-1 什麼是 state
2-8-2 useState 初探
2-8-3 useState 的範例演示
2-8-4 關於 state 的補充觀念
2-9 React 畫面更新的流程機制:reconciliation
2-9-1 Render phase 與 commit phase
2-9-2 Reconciliation
2-9-3 setState 觸發的 re-render 會連帶觸發子 component 的 re-render

【第三篇 State 資料的管理與維護】
3-1 如何在子 component 裡觸發更新父 component 的資料
3-1-1 React 並沒有子 component 向上溝通父 component 的專門機制
3-1-2 在子 component 中觸發更新父 component 的 state 資料
3-2 深入理解 batch update 與 updater function
3-2-1 Batch update
3-2-2 Updater function
3-3 維持 React 資料流可靠性的重要關鍵:immutable state
3-3-1 什麼是 mutate
3-3-2 保持 state 的 immutable
3-4 Immutable update
3-4-1 物件資料的 immutable update 方法
3-4-2 陣列資料的 immutable update 方法
3-4-3 巢狀式參考型別的複製誤解

【第四篇 Component 的生命週期與資料流】
4-1 Component 的生命週期
4-1-1 Component 的三大生命週期
4-1-2 Function component 沒有提供生命週期 API
4-2 Function component 與 class component 關鍵區別
4-2-1 Class component 的 this.props 在非同步事件中的存取陷阱
4-2-2 Function component 會自動「捕捉」render 時的資料
4-3 每次 render 都有自己的 props、state 與 event handler 函式
4-3-1 每次 render 都有其自己版本的 props 與 state
4-3-2 每次 render 都有其自己版本的 event handler 函式
4-3-3 Immutable 資料使得 closure 函式變得可靠而美好

【第五篇 Effect 與 hooks】
5-1 React 中的副作用處理:effect 初探
5-1-1 什麼是 effect
5-1-2 React component function 中的副作用
5-1-3 useEffect 初探
5-1-4 每次 render 都有其自己版本的 effect 函式
5-1-5 每次 render 都有其自己版本的 cleanup 函式
5-2 useEffect 其實不是 function component 的生命週期 API
5-2-1 宣告式的同步化,而非生命週期 API
5-2-2 Dependencies 是一種效能優化,而非執行時機的控制
5-3 維護資料流的連動:不要欺騙 hooks 的 dependencies
5-3-1 欺騙 dependencies 會造成什麼問題
5-3-2 讓 effect 函式對於依賴的資料自給自足
5-3-3 函式型別的依賴
5-3-4 以 linter 來輔助填寫 dependencies
5-3-5 Effect dependencies 常見的錯誤用法
5-4 React 18 的 effect 函式在 mount 時為何會執行兩次?
5-4-1 React 18 的 effect 函式在 mount 時為何會執行兩次?
5-4-2 Reusable state
5-5 副作用處理的常見情境設計技巧
5-5-1 Fetch 請求伺服器端 API
5-5-2 控制外部套件
5-5-3 監聽或訂閱事件
5-5-4 不應該是副作用處理:使用者的操作所觸發的事情
5-6 useCallback 與 useMemo 的正確使用時機
5-6-1 useCallback 深入解析
5-6-2 useMemo 深入解析
5-7 Hooks 的運作原理與設計思維
5-7-1 Hooks 的資料本體到底存放在何處
5-7-2 為什麼 hooks 的運作是依賴於固定的呼叫順序
5-7-3 Hooks 的誕生是為了解決什麼問題
5-7-4 Hooks API 的設計思維與脈絡

本文設為 WIKI 共筆,歡迎大家共同維護更新。

祝大家學習順利大成功!


本組之前的共學

  1. Python 百日馬(2021)

  2. 網頁開發全攻略(2022)

  3. Modern React with Redux(2023)

  4. 從 Hooks 開始,讓你的網頁 React 起來(2023)