跳至主要內容
請網這邊走 ThisWeb
  • 文章
  • 數位下載
管理後台
登入
客服信箱:kun@thisweb.dev
客服電話:0928634725

© 2026 請網這邊走 ThisWeb All Rights Reserved.請網這邊走有限公司.統一編號: 60626539
使用者條款.隱私權政策
♥ 本站使用 Teachify 架設
Developer and agent API documentationSite content index for AI agents (llms.txt)API documentation (OpenAPI)API authentication guide

React 效能優化實戰課

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

ThisWeb 請網這邊走|Kun

ThisWeb 請網這邊走|Kun

5.0
42 則評論
課程簡介課程要點課程內容關於講師常見問題課前問答最新評價
5.0
42 則評論

本課程包含以下內容:

課程長度約 2.5 小時
24 個課程單元
共有 1 個可下載資源
React 效能優化實戰課 - React 實戰課 - 首購專屬優惠
React 實戰課 - 首購專屬優惠
剩餘 3 組
5 大章節、21 單元影音課程 🎁 加碼好禮 • 好禮 1:React 進階優化實戰檢核表 • 好禮 2:React 完整學習路徑&推薦資源 • 好禮 3:課程完整電子講義 ※ 購買 7 日內且未觀看付費單元,可退還 100% 課程費用
NT$3,980

課程簡介

銷售頁面.png
活動贈品(常態).png

課程要點

從零開始幫助你建立 React 底層技術邏輯

透過真實場景逐一拆解效能問題的成因

分享如何操作前端效能工具觀察效能瓶頸

利用最新技術與策略從根本解決效能問題

分享如何將技術能力轉化為職涯影響力

課程內容

共 24 個單元•總時數約 2.5 小時

  • 0-1 課程初衷與目標
    03:04
  • 0-2 React 完整入門學習路徑及推薦資源

  • 1-1 React 核心運作模式與 Re-Render 的本質
    07:55
  • 1-2 useState 怎麼用才對?破解狀態的 3 大陷阱
    08:37
  • 1-3 如何正確管理 State?Senior 必懂的底層思維
    09:27
  • 1-4 別再誤用了!useEffect 的真正意義與正確使用方式
    12:02
  • 1-5 useEffectEvent:useEffect 隱藏問題的最佳解法
    06:18

  • 2-1 為什麼 Re-render 會造成效能問題?
    03:02
  • 2-2 進階開發者必知的 4 種 Re-render 觸發場景
    11:24

  • 3-1 辨識 Re-render 的第一步:console.log 除錯法
    01:39
  • 3-2 深入官方 React DevTools:你一定要知道的 7 大實戰用法
    08:43
  • 3-3 React Scan:比官方更強大的視覺化分析工具
    04:04

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

關於講師

ThisWeb 請網這邊走|Kun

ThisWeb 請網這邊走|Kun

資深前端工程師

大四那年放棄電機系研究所考試,自學 1 年轉職前端工程師。

曾任外商品牌設計公司資深前端工程師,期間創立前端教育品牌 ThisWeb,分享技術教學與職涯經驗,經營 3 年發表 200 多篇內容、社群累積超過 2 萬追蹤,並受邀至 JSDC、WebConf 2025 擔任講師。

我的目標是和在前端路上努力的你,一起打造一個全台灣前端工程師共同成長的社群,幫助前端領域的學習者和工作者,降低技術學習門檻、提高業界競爭力,成為跨國界的技術人才。

邀請你一起來參與這趟旅程!

瞭解更多

常見問題

關於付費與購買

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

點選課程「立即購買」按鈕,在結帳前,會看到「優惠代碼」欄位。

請輸入你的優惠券代碼後,直接按「Enter 輸入鍵」,或是點選「套用」即可!

小提醒:優惠代碼大小寫皆需一致才可兌換。

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

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

報名後,「購買後 7 天內」未觀看工作坊課程影片、未下載附件檔案,
皆符合退費資格。
請詳閱下方退款辦法,並來信  kun@thisweb.dev 申請。

信件主旨:【React 進階優化實戰課|退款】

隨信附上:
1. 購買時輸入的姓名
2. 電子信箱
3. 訂單編號
4. 退款金額
5. 退費原因

信用卡支付系統會直接刷退,免手續費。

非信用卡交易如 ATM、超商代碼,將酌收手續費 NT$100,手續費將於退款金額中扣除;

並需要在信件額外附上:

6. 退款帳戶號碼
7. 退款帳戶封面的照片(請提供能清晰辨別帳戶號碼的照片)

進行人工審核通過後會寄出發票作廢通知信,並於受理退款後次月 26 日前完成退款。

最新評價

5.0

42 則評論

AW

Anthea Wu

2025/07/20

之前有閱讀過《React 思維進化》這本書,雖然講的內容和這次的 React 效能優化實戰工作坊的前半部分是一樣的概念,但我覺得比書中寫的內容還更淺顯易懂,範例也比較真實,很像是工作中會遇到的問題,有帶入感後好理解很多。 整體來說,這場工作坊讓我不是「只會用 React」,更是瞭解到「為什麼要這樣用」,如果你也想更了解和你一起賺錢的好夥伴 React 的話,這堂課推薦給你~
LU

Lulu

2025/07/05

這次的 React 效能優化實戰工作坊真的收穫很多!slidev 製作的簡報非常有質感,準備得非常用心,整體學習過程也更加流暢有吸引力。雖然之前看過一些 React 相關書籍,但透過這次的觀念講解,搭配程式碼和實作範例,對許多背後的細節與邏輯有了更深刻的理解。像是曾經遇過元件狀態異常共用的問題,這次才意識到是因為缺少 key,導致 Virtual DOM 比對錯誤,當初雖然解了 bug,卻不清楚真正原因,現在終於搞懂,也讓我重新體會到「理解底層邏輯,才能更有效率地 debug」這句話的真諦。過程中也認識了幾個實用工具,像是 Components Tab 可以快速定位元件位置,強制 Suspense 讓 loading 狀態的調整更簡單又直覺,還有 react-scan 這類工具可以幫助我們分析效能瓶頸、快速掌握問題點。整體來說,這場工作坊讓我不只是「會用 React」,更理解了「為什麼要這樣用」,真心推薦給所有正在使用或學習 React 的人!
MH

Mischa Hung

2025/10/14

課程對於 React 底層、hooks 使用方式、優化策略等講得很仔細,對於剛接觸 React 不久的我來說非常有幫助。在看課程簡報、文件感受得到花很多時間準備,直播時學生的問題也很有耐心的回答,不會讓人感到不好意思提問問題。在效能優化章節我覺得幫助很大,這方面的問題平常開發者可能因為時程壓力忽略,或是不知道怎麼開始,所以在效能優化經驗挺少,但課程有分享很多這方面的內容,很喜歡。
羅志

羅志基

2025/09/28

這個課程有效的令我明白memo, useCallback, useMemo, Context 的優化,用example 去解釋,簡單易明。值得推薦。
黃羿

黃羿寧

2025/08/24

非常充實! 能理解到背後原理、效能優化、react核心價值!! 能感受到老師想分享很多東西給我們~所以三個小時有點趕~ 不過整體課程還是收穫滿滿的!! 重複看也會發現蠻多細節第一次沒注意到~很值得!! 謝謝老師提供這麼優質的工作坊~~
CH

chen

2025/08/10

講者口條清晰, React 的實戰例子也很棒,更貼近實際工作上常見不小心誤用的地方!
SH

SH

2025/08/07

這次的工作訪內容真的很扎實,之前遇到的一些問題在這次的工作方得到解答了
蘇紹

蘇紹維

2025/08/06

真的有解決我當初想上這個工作坊的原因,回想過去寫的code不禁開始冒冷汗!很期待未來開設的next、ssr等等雖然會用但不清楚實際底層邏輯的主題!
H

h

2025/08/04

在 JSDC 聽到簡短但精華滿滿的分享後立刻下單 🎉 完全買對了,講者口條清楚,課程安排到位,範例簡單但都能連結到實際常見場景,不會有那種了解概念但不知道該怎麼使用的挫折感。 React 大魔王 useState useEffect useCallback useMemo memo 還有 context,都非~常~實~用~ 不脫離現實,沒有要為了優化而優化,先確認需不需要優化 期待未來其他課程 ✨
SE

Serene

2025/07/31

工作上遇到效能瓶頸,看到課程內容就馬上下單了,這次效能優化實戰工作坊真的收穫很多! 雖然 React 基概概念都大概了解但其實還不夠扎實,經過這此的課程,加上觀念講解與搭配程式碼和實作範例,而且講解很詳細,讓我印象深刻又更深刻的瞭解了。 期待之後的課程:)
劉明

劉明昕

2025/07/29

正在學習前端技術,目標轉職前端工程師,因為學習的框架是 React,做專案時會一些基礎的 hooks 使用方法,但不理解有些 hook 為什麼會這樣用,所以想要多了解 React 在實戰上的開發思維 我覺得最有收穫的是第五章「技術策略:五種記憶化策略與技巧,妥善優化效能問題」,之前在開發時,不太會去思考狀態要在哪裡定義比較合理,也因為不理解 React 背後的 re-render 機制,遇到問題也只是問 AI,也不是很確定 AI 提供的解法是否正確,就是看起來正常就好。 經過這個課程,讓我更了解 useCallback、useMemo、React.memo 等,應該怎麼用才能達到效能優化的目的,避免用了之後,但因為不知道什麼原因導致效能優化失效的問題,雖然還需要靠實際練習,才能真正了解,不過至少遇到問題時,不會毫無頭緒 感謝 Kun 推出這個工作坊課程,獲益良多!!
LE

Lee

2025/07/23

學完 React 有段時間,正在嘗試前往前端職場的轉職生。開發時時常會出現有關效能的警示,想改善卻又不知道從何著手,而這堂課給了我許多方向,滿滿的乾貨!
吳宇

吳宇祥

2025/07/21

從網路上一直有追蹤this.web 這個帳號,然後也覺得自己的react 知識比較不足所以買了課程,看了前三個小節真的有感同身受的感覺XDD
陳靖

陳靖強

2025/07/20

學習到很多的新觀念與知識 非常謝謝!
田晏

田晏承

2025/07/20

想邁向SR之路所以買下這堂課 也希望應用在工作上能夠更多的思考每個功能的使用 而不是為了完成而做!
施慶

施慶銓

2025/07/13

非常扎實的課程, 內容涵蓋很多實際工作上很容易遇到的問題. 教學的過程有很多範例, 可以讓我更容易了解教學內容. 收穫很多 期待之後的課程內容可以包含狀態管理工具應用(RTK, zustand等比較), React 處理API 的方式, useQuery, Suspended 的應用等更多實際工作開發上會遇到的應用
OL

Olaf

2025/07/13

深深感受到,寫 React 不難,但寫好 React 很難,透過課程來從基礎核心了解 Re-render 的原因進而優化,收穫良多 💪
金彥

金彥良

2025/07/12

內容很扎實,自己還處於初入React的階段、因此還有不少內容不了解。但幸好有提供講義,且上面的程式碼很好複製,很好搭配AI輔助去講解得更詳細、去整理自己的筆記。
TH

thinker

2025/07/12

希望學習更多進階資深課程,感謝分享,收穫良多
KA

Katlyn

2025/07/09

已經追蹤 this.web 有一段時間了,當初覺得很厲害怎麼可以做出這麼多網頁上的特效與動畫,也在前陣子的 Jsdc 聽過分享,可以知道 Kun 是一個在這塊領域很有熱忱的人,也很有想法😆 剛轉職滿一年,在前陣子面試的時候發覺自己還是不夠了解 React,發現對於 “造成不必要的 re-render” 沒有很清楚的認知 先前聽過 jsdc Kun 分享的 React 的幾個 hooks,覺得可以來聽聽他分享,順便複習~ 內容很充實、紮實!
NT$2,480
NT$3,980