---
title: "React 效能優化實戰課"
seo_title: "React 效能優化實戰工作坊"
seo_description: "React 效能優化實戰工作坊，3 小時掌握 React 進階技術與底層思維，幫助你跨出成為 Senior 的第一步"
slug: react-performance
url: https://learn.thisweb.dev/courses/react-performance
type: paid
---

# React 效能優化實戰課

> 掌握進階技術 x 開發思維：跨出成為 Senior 的第一步

## Description



## Learning Objectives

- 從零開始幫助你建立 React 底層技術邏輯
- 透過真實場景逐一拆解效能問題的成因
- 分享如何操作前端效能工具觀察效能瓶頸
- 利用最新技術與策略從根本解決效能問題
- 分享如何將技術能力轉化為職涯影響力

## Course Info

- Lectures: 24
- Video: 2.5h
- Downloadable resources: 1

## Rating

5.0 / 5 (42 ratings)

## Instructors

### ThisWeb 請網這邊走｜Kun
*資深前端工程師*

大四那年放棄電機系研究所考試，自學 1 年轉職前端工程師。 曾任外商品牌設計公司資深前端工程師，期間創立前端教育品牌 ThisWeb，分享技術教學與職涯經驗，經營 3 年發表 200 多篇內容、社群累積超過 2 萬追蹤，並受邀至 JSDC、WebConf 2025 擔任講師。 我的目標是和在前端路上努力的你，一起打造一個全台灣前端工程師共同成長的社群，幫助前端領域的學習者和工作者，降低技術學習門檻、提高業界競爭力，成為跨國界的技術人才。 邀請你一起來參與這趟旅程！

## Curriculum

### 零、課前準備 (3m)

- 0-1 課程初衷與目標 (3m)
- 0-2 React 完整入門學習路徑及推薦資源 (0m)

### 一、核心觀念 (44m)

- 1-1  React 核心運作模式與 Re-Render 的本質 (7m)
- 1-2 useState 怎麼用才對？破解狀態的 3 大陷阱 (8m)
- 1-3 如何正確管理 State？Senior 必懂的底層思維 (9m)
- 1-4 別再誤用了！useEffect 的真正意義與正確使用方式 (12m)
- 1-5 useEffectEvent：useEffect 隱藏問題的最佳解法 (6m)

### 二、問題拆解 (14m)

- 2-1 為什麼 Re-render 會造成效能問題？ (3m)
- 2-2 進階開發者必知的 4 種 Re-render 觸發場景 (11m)

### 三、實戰分析 (14m)

- 3-1 辨識 Re-render 的第一步：console.log 除錯法 (1m)
- 3-2 深入官方 React DevTools：你一定要知道的 7 大實戰用法 (8m)
- 3-3 React Scan：比官方更強大的視覺化分析工具 (4m)

### 四、技術策略 (1h 3m)

- 4-1 如何用狀態下移與拆分，縮小 Re-render 的影響範圍？ (3m)
- 4-2 如何運用內容上移，隔離不必要的重新渲染？ (5m)
- 4-3 如何利用 Activity 保留狀態？ (7m)
- 4-4 useMemo 與 useCallback：破解記憶化的效能誤區 (13m)
- 4-5 React.memo 的記憶化策略以及陷阱 (10m)
- 4-6 如何正確設計 Context？Context 重新渲染的真相與陷阱 (9m)
- 4-7 React Compiler 全面解析：自動記憶化、實戰場景與底層原理 (14m)

### 五、進階觀念 (12m)

- 5-1 掌握 React 的大腦：搞懂 Reconciliation 與 Diffing 運作機制 (7m)
- 5-2 破解 Key 值的真正意義 (1m)
- 5-3 工程師常見錯誤：破解「組件內宣告其他組件」的效能地雷 (3m)

### Bonus (0m)

- React 效能優化實戰檢核表 (0m)
- 領取課程文檔及課後應用練習 (0m)

## Pricing

### React 實戰課 - 首購專屬優惠 - NT$2,480
*Original price: NT$3,980*

5 大章節、21 單元影音課程 🎁 加碼好禮 • 好禮 1：React 進階優化實戰檢核表 • 好禮 2：React 完整學習路徑＆推薦資源 • 好禮 3：課程完整電子講義 ※ 購買 7 日內且未觀看付費單元，可退還 100% 課程費用

## FAQ

**付款方式有哪幾種？可以接受分期付款嗎？**

目前提供信用卡（一次付清、分期付款）、國外信用卡、銀聯卡、ATM 轉帳、超商代碼付款。如果你想分期，也有支援玉山、台新、中信的信用卡，可以分 3 期、6 期和 12 期！

**我有拿到優惠代碼，該如何使用？**

點選課程「立即購買」按鈕，在結帳前，會看到「優惠代碼」欄位。請輸入你的優惠券代碼後，直接按「Enter 輸入鍵」，或是點選「套用」即可！小提醒：優惠代碼大小寫皆需一致才可兌換。

**發票可以打統編嗎？**

可以打統編，請記得在付款時「發票類型」選擇「統編發票」，並輸入統一編號與公司抬頭，之後會寄送電子發票到你註冊時留的 Email 信箱。

**報名課程有提供發票嗎？**

我們有提供電子發票，課程購買後，會直接寄送到你註冊的 Email 信箱。

**報名課程後，可以申請退款嗎？**

報名後，「購買後 7 天內」未觀看工作坊課程影片、未下載附件檔案，皆符合退費資格。請詳閱下方退款辦法，並來信 kun@thisweb.dev 申請。信件主旨：【React 進階優化實戰課｜退款】隨信附上：1. 購買時輸入的姓名2. 電子信箱3. 訂單編號4. 退款金額5. 退費原因信用卡支付系統會直接刷退，免手續費。非信用卡交易如 ATM、超商代碼，將酌收手續費 NT$100，手續費將於退款金額中扣除；並需要在信件額外附上：6. 退款帳戶號碼7. 退款帳戶封面的照片（請提供能清晰辨別帳戶號碼的照片）進行人工審核通過後會寄出發票作廢通知信，並於受理退款後次月 26 日前完成退款。