（iThome鐵人賽系列書）
兼具React核心主題與實戰面試的前端技術指南
React理論與實戰兩者兼具，邁向專業工程師成長之路
讓你告別似懂非懂的開發困境，提升你的專業實力
【專業推薦】
「這是一本相對進階的書籍，適合具有一定React實戰經驗的開發者閱讀。書中深入探討了React的狀態管理、副作用處理以及效能優化等主題，非常實用。如果你已經累積了一些實戰經驗，書中的豐富案例分析與程式碼範例，將讓你在閱讀過程中充滿驚喜與啟發。這些範例不僅幫助讀者加深理解，更能為日常開發意外產生的一些小Bug，提供具體的查找方向。」
─ 劉艾霖，iThome鐵人賽評審
「本書不僅深入剖析了初學者在學習React時常遇到的問題，並提供了清晰、完整的解決方案。更令人驚喜的是，Danny還在書中分享了他多年累積的求職Q&A和職涯經驗，幫助轉職者從更高的視角審視自己的選擇，為未來的職涯規劃奠定基礎。」
─ Justin，資深前端工程師
「書中的React內容聚焦於工作中最常遇到的實務需求，包含狀態管理、副作用、性能優化等重點，無論是在職開發者還是新手，這些主題都能有所收獲。書中還加入了許多程式碼範例，讀者可以隨書練習、動手做。本書適合正為求職而努力、學習React的初學者，想以React為核心框架的開發者，或是希望挑戰自己React熟練度的實務開發者，無論在哪個階段，都能在本書中找到寶貴的收穫。」
─ Kai，前端工程師
「本書不是教你怎麼學React，跟一般坊間的教學書不同，內容偏向舉出許多實戰中常見的情境，情境都不難，但往往是新手剛接觸時很容易犯錯、搞不清楚的地方。從大量實例帶到背後對應的核心觀念，大力推薦給所有剛學習完React的工程師或是學習React一段時間的Junior工程師閱讀，相信從中一定會有不少收穫。」
─ Evan，前端工程師
【內容簡介】
♔ 由淺入深講解：一步步了解重要核心概念
♔ 實作導向切入：透過實際範例來驗證你的理解
♔ 前端心法補給：提供額外的詳細補充前端知識點
♔ 求職祕訣分享：分享真實面試題與求職情境處理
本書內容改編自第15屆iThome鐵人賽Modern Web組的冠軍系列文章《30天React練功坊：攻克常見實務 / 面試問題》，涵蓋狀態管理、Hooks進階應用、效能優化等React核心主題，透過精心設計的實戰題目，幫你掌握最佳解決方案，從容應對開發難題。本書專為具備React基礎的開發者量身打造，內容聚焦於實際開發中最常見的問題與挑戰，可快速累積實戰能力，並補足關鍵知識點。
與市面上其他React相關書籍不同的是，本書的每個章節都著重於實戰練習，透過實際的題目來探討你可能忽略的React核心概念，尤其針對初階開發者在工作與求職過程中最容易遇到的技術問題進行深入解析。無論是想提升實務技能，還是準備面試，本書都將是你不可或缺的實戰指南。
【精彩內容】
✪理解React中的狀態更新機制及常見陷阱
✪掌握如何正確更新陣列與物件狀態
✪深入理解批次更新機制與setState的非同步行為
✪學習處理條件渲染中的異常行為
✪學習如何管理龐大的元件狀態
✪掌握Hooks使用的基本規則與注意事項
✪理解useState初始值的行為與更新失敗的原因
✪正確使用useEffect清理函數，避免記憶體洩漏
✪掌握useEffect中資料請求的最佳實踐
✪避免useEffect中的競態條件
✪深入了解useEffect的執行時機與依賴管理
✪使用useLayoutEffect解決UI閃爍問題
✪優化useEffect的使用，避免不必要的重複渲染
✪理解key在列表渲染中的重要性
✪利用React.memo避免不必要的重新渲染
✪使用useCallback和useMemo處理函數與物件的記憶化
✪掌握useContext在大型應用程式中的使用策略
✪優化重新渲染行為與避免UI卡頓
✪解構面試題的思路與策略
【目標讀者】
✪具備JavaScript和React基礎，想提升React實務能力及應對面試挑戰的學習者
✪目標成為初階React工程師，準備轉職或首次求職於前端開發的讀者
✪現職React開發者，需要進一步掌握高階技術、效能優化及最佳實踐的從業者
React理論與實戰兩者兼具，邁向專業工程師成長之路
讓你告別似懂非懂的開發困境，提升你的專業實力
【專業推薦】
「這是一本相對進階的書籍，適合具有一定React實戰經驗的開發者閱讀。書中深入探討了React的狀態管理、副作用處理以及效能優化等主題，非常實用。如果你已經累積了一些實戰經驗，書中的豐富案例分析與程式碼範例，將讓你在閱讀過程中充滿驚喜與啟發。這些範例不僅幫助讀者加深理解，更能為日常開發意外產生的一些小Bug，提供具體的查找方向。」
─ 劉艾霖，iThome鐵人賽評審
「本書不僅深入剖析了初學者在學習React時常遇到的問題，並提供了清晰、完整的解決方案。更令人驚喜的是，Danny還在書中分享了他多年累積的求職Q&A和職涯經驗，幫助轉職者從更高的視角審視自己的選擇，為未來的職涯規劃奠定基礎。」
─ Justin，資深前端工程師
「書中的React內容聚焦於工作中最常遇到的實務需求，包含狀態管理、副作用、性能優化等重點，無論是在職開發者還是新手，這些主題都能有所收獲。書中還加入了許多程式碼範例，讀者可以隨書練習、動手做。本書適合正為求職而努力、學習React的初學者，想以React為核心框架的開發者，或是希望挑戰自己React熟練度的實務開發者，無論在哪個階段，都能在本書中找到寶貴的收穫。」
─ Kai，前端工程師
「本書不是教你怎麼學React，跟一般坊間的教學書不同，內容偏向舉出許多實戰中常見的情境，情境都不難，但往往是新手剛接觸時很容易犯錯、搞不清楚的地方。從大量實例帶到背後對應的核心觀念，大力推薦給所有剛學習完React的工程師或是學習React一段時間的Junior工程師閱讀，相信從中一定會有不少收穫。」
─ Evan，前端工程師
【內容簡介】
♔ 由淺入深講解：一步步了解重要核心概念
♔ 實作導向切入：透過實際範例來驗證你的理解
♔ 前端心法補給：提供額外的詳細補充前端知識點
♔ 求職祕訣分享：分享真實面試題與求職情境處理
本書內容改編自第15屆iThome鐵人賽Modern Web組的冠軍系列文章《30天React練功坊：攻克常見實務 / 面試問題》，涵蓋狀態管理、Hooks進階應用、效能優化等React核心主題，透過精心設計的實戰題目，幫你掌握最佳解決方案，從容應對開發難題。本書專為具備React基礎的開發者量身打造，內容聚焦於實際開發中最常見的問題與挑戰，可快速累積實戰能力，並補足關鍵知識點。
與市面上其他React相關書籍不同的是，本書的每個章節都著重於實戰練習，透過實際的題目來探討你可能忽略的React核心概念，尤其針對初階開發者在工作與求職過程中最容易遇到的技術問題進行深入解析。無論是想提升實務技能，還是準備面試，本書都將是你不可或缺的實戰指南。
【精彩內容】
✪理解React中的狀態更新機制及常見陷阱
✪掌握如何正確更新陣列與物件狀態
✪深入理解批次更新機制與setState的非同步行為
✪學習處理條件渲染中的異常行為
✪學習如何管理龐大的元件狀態
✪掌握Hooks使用的基本規則與注意事項
✪理解useState初始值的行為與更新失敗的原因
✪正確使用useEffect清理函數，避免記憶體洩漏
✪掌握useEffect中資料請求的最佳實踐
✪避免useEffect中的競態條件
✪深入了解useEffect的執行時機與依賴管理
✪使用useLayoutEffect解決UI閃爍問題
✪優化useEffect的使用，避免不必要的重複渲染
✪理解key在列表渲染中的重要性
✪利用React.memo避免不必要的重新渲染
✪使用useCallback和useMemo處理函數與物件的記憶化
✪掌握useContext在大型應用程式中的使用策略
✪優化重新渲染行為與避免UI卡頓
✪解構面試題的思路與策略
【目標讀者】
✪具備JavaScript和React基礎，想提升React實務能力及應對面試挑戰的學習者
✪目標成為初階React工程師，準備轉職或首次求職於前端開發的讀者
✪現職React開發者，需要進一步掌握高階技術、效能優化及最佳實踐的從業者
|CHAPTER 01| React狀態管理的陷阱與技巧
1.1 Array.push用在更新state，居然不起作用了？
1.2 setState連續呼叫這麼多次，怎麼只作用一次？
1.3 簡單的useState使用，卻出現了「Cannot set properties of undefined」的錯誤訊息？
1.4 元件內state有夠多，如何優雅地管理龐大的元件狀態？
1.5 條件渲染怎麼多了個0啊？
1.6 Rendered more hooks than during the previous render，這又是什麼鬼東西啊？
1.7 這個useState初始值重新渲染後，怎麼不會更新啊？
1.8 有時候也許useState並不夠好？
1.9 複雜表單：彼此依賴的state管理該怎麼做？
|CHAPTER 02| React中你可能忽略的副作用
2.1 怪了，我的頁面怎麼越跑越慢啊？記憶體洩漏是什麼鬼？
2.2 在useEffect中做簡單的資料請求也能出問題？
2.3 空的依賴陣列居然讓Callback觸發了兩次？
2.4 useEffect中的競態條件又是怎麼一回事啊？
2.5 這種情況用useEffect就對了⋯⋯吧？
2.6 用useEffect處理事件，卻讓畫面抖了一下？
|CHAPTER 03| React效能優化與最佳化實踐
3.1 使用索引作為key值簡單又方便，但這樣對嗎？
3.2 重新渲染的昂貴代價該怎麼處理？
3.3 React.memo這麼好用，我還不用爆！
3.4 不過是個渲染行為，怎麼連useContext也在搞啊！
3.5 React.memo怎麼碰到函數當作props就不行啦！
|CHAPTER 04| React面試實戰問題
4.1 你說你懂React渲染邏輯，那試著回答這元件內部的程式碼執行順序
4.2 簡單的待辦事項工具也能拿來考？
4.3 要我寫Tab元件？真的假的？
4.4 現場寫一個Custom Hook是能有多難？
4.5 寫一個簡單的分頁來應付大量資料呈現吧！
4.6 點擊畫面後新增表情符號，也算是React面試題？（Part I）
4.7 點擊畫面後新增表情符號，也算是React面試題？（Part II）
4.8 自行查看文件，並完成請求同義字的功能吧！
4.9 井字遊戲（Tic-Tac-Toe），為什麼連你都在面試場上啊？
4.10 翻牌遊戲也來參一腳！asnd |CHAPTER 01| React狀態管理的陷阱與技巧
1.1 Array.push用在更新state，居然不起作用了？
1.2 setState連續呼叫這麼多次，怎麼只作用一次？
1.3 簡單的useState使用，卻出現了「Cannot set properties of undefined」的錯誤訊息？
1.4 元件內state有夠多，如何優雅地管理龐大的元件狀態？
1.5 條件渲染怎麼多了個0啊？
1.6 Rendered more hooks than during the previous render，這又是什麼鬼東西啊？
1.7 這個useState初始值重新渲染後，怎麼不會更新啊？
1.8 有時候也許useState並不夠好？
1.9 複雜表單：彼此依賴的state管理該怎麼做？
|CHAPTER 02| React中你可能忽略的副作用
2.1 怪了，我的頁面怎麼越跑越慢啊？記憶體洩漏是什麼鬼？
2.2 在useEffect中做簡單的資料請求也能出問題？
2.3 空的依賴陣列居然讓Callback觸發了兩次？
2.4 useEffect中的競態條件又是怎麼一回事啊？
2.5 這種情況用useEffect就對了⋯⋯吧？
2.6 用useEffect處理事件，卻讓畫面抖了一下？
|CHAPTER 03| React效能優化與最佳化實踐
3.1 使用索引作為key值簡單又方便，但這樣對嗎？
3.2 重新渲染的昂貴代價該怎麼處理？
3.3 React.memo這麼好用，我還不用爆！
3.4 不過是個渲染行為，怎麼連useContext也在搞啊！
3.5 React.memo怎麼碰到函數當作props就不行啦！
|CHAPTER 04| React面試實戰問題
4.1 你說你懂React渲染邏輯，那試著回答這元件內部的程式碼執行順序
4.2 簡單的待辦事項工具也能拿來考？
4.3 要我寫Tab元件？真的假的？
4.4 現場寫一個Custom Hook是能有多難？
4.5 寫一個簡單的分頁來應付大量資料呈現吧！
4.6 點擊畫面後新增表情符號，也算是React面試題？（Part I）
4.7 點擊畫面後新增表情符號，也算是React面試題？（Part II）
4.8 自行查看文件，並完成請求同義字的功能吧！
4.9 井字遊戲（Tic-Tac-Toe），為什麼連你都在面試場上啊？
4.10 翻牌遊戲也來參一腳！askw |CHAPTER 01| React狀態管理的陷阱與技巧
1.1 Array.push用在更新state，居然不起作用了？
1.2 setState連續呼叫這麼多次，怎麼只作用一次？
1.3 簡單的useState使用，卻出現了「Cannot set properties of undefined」的錯誤訊息？
1.4 元件內state有夠多，如何優雅地管理龐大的元件狀態？
1.5 條件渲染怎麼多了個0啊？
1.6 Rendered more hooks than during the previous render，這又是什麼鬼東西啊？
1.7 這個useState初始值重新渲染後，怎麼不會更新啊？
1.8 有時候也許useState並不夠好？
1.9 複雜表單：彼此依賴的state管理該怎麼做？
|CHAPTER 02| React中你可能忽略的副作用
2.1 怪了，我的頁面怎麼越跑越慢啊？記憶體洩漏是什麼鬼？
2.2 在useEffect中做簡單的資料請求也能出問題？
2.3 空的依賴陣列居然讓Callback觸發了兩次？
2.4 useEffect中的競態條件又是怎麼一回事啊？
2.5 這種情況用useEffect就對了⋯⋯吧？
2.6 用useEffect處理事件，卻讓畫面抖了一下？
|CHAPTER 03| React效能優化與最佳化實踐
3.1 使用索引作為key值簡單又方便，但這樣對嗎？
3.2 重新渲染的昂貴代價該怎麼處理？
3.3 React.memo這麼好用，我還不用爆！
3.4 不過是個渲染行為，怎麼連useContext也在搞啊！
3.5 React.memo怎麼碰到函數當作props就不行啦！
|CHAPTER 04| React面試實戰問題
4.1 你說你懂React渲染邏輯，那試著回答這元件內部的程式碼執行順序
4.2 簡單的待辦事項工具也能拿來考？
4.3 要我寫Tab元件？真的假的？
4.4 現場寫一個Custom Hook是能有多難？
4.5 寫一個簡單的分頁來應付大量資料呈現吧！
4.6 點擊畫面後新增表情符號，也算是React面試題？（Part I）
4.7 點擊畫面後新增表情符號，也算是React面試題？（Part II）
4.8 自行查看文件，並完成請求同義字的功能吧！
4.9 井字遊戲（Tic-Tac-Toe），為什麼連你都在面試場上啊？
4.10 翻牌遊戲也來參一腳！
1.1 Array.push用在更新state，居然不起作用了？
1.2 setState連續呼叫這麼多次，怎麼只作用一次？
1.3 簡單的useState使用，卻出現了「Cannot set properties of undefined」的錯誤訊息？
1.4 元件內state有夠多，如何優雅地管理龐大的元件狀態？
1.5 條件渲染怎麼多了個0啊？
1.6 Rendered more hooks than during the previous render，這又是什麼鬼東西啊？
1.7 這個useState初始值重新渲染後，怎麼不會更新啊？
1.8 有時候也許useState並不夠好？
1.9 複雜表單：彼此依賴的state管理該怎麼做？
|CHAPTER 02| React中你可能忽略的副作用
2.1 怪了，我的頁面怎麼越跑越慢啊？記憶體洩漏是什麼鬼？
2.2 在useEffect中做簡單的資料請求也能出問題？
2.3 空的依賴陣列居然讓Callback觸發了兩次？
2.4 useEffect中的競態條件又是怎麼一回事啊？
2.5 這種情況用useEffect就對了⋯⋯吧？
2.6 用useEffect處理事件，卻讓畫面抖了一下？
|CHAPTER 03| React效能優化與最佳化實踐
3.1 使用索引作為key值簡單又方便，但這樣對嗎？
3.2 重新渲染的昂貴代價該怎麼處理？
3.3 React.memo這麼好用，我還不用爆！
3.4 不過是個渲染行為，怎麼連useContext也在搞啊！
3.5 React.memo怎麼碰到函數當作props就不行啦！
|CHAPTER 04| React面試實戰問題
4.1 你說你懂React渲染邏輯，那試著回答這元件內部的程式碼執行順序
4.2 簡單的待辦事項工具也能拿來考？
4.3 要我寫Tab元件？真的假的？
4.4 現場寫一個Custom Hook是能有多難？
4.5 寫一個簡單的分頁來應付大量資料呈現吧！
4.6 點擊畫面後新增表情符號，也算是React面試題？（Part I）
4.7 點擊畫面後新增表情符號，也算是React面試題？（Part II）
4.8 自行查看文件，並完成請求同義字的功能吧！
4.9 井字遊戲（Tic-Tac-Toe），為什麼連你都在面試場上啊？
4.10 翻牌遊戲也來參一腳！asnd |CHAPTER 01| React狀態管理的陷阱與技巧
1.1 Array.push用在更新state，居然不起作用了？
1.2 setState連續呼叫這麼多次，怎麼只作用一次？
1.3 簡單的useState使用，卻出現了「Cannot set properties of undefined」的錯誤訊息？
1.4 元件內state有夠多，如何優雅地管理龐大的元件狀態？
1.5 條件渲染怎麼多了個0啊？
1.6 Rendered more hooks than during the previous render，這又是什麼鬼東西啊？
1.7 這個useState初始值重新渲染後，怎麼不會更新啊？
1.8 有時候也許useState並不夠好？
1.9 複雜表單：彼此依賴的state管理該怎麼做？
|CHAPTER 02| React中你可能忽略的副作用
2.1 怪了，我的頁面怎麼越跑越慢啊？記憶體洩漏是什麼鬼？
2.2 在useEffect中做簡單的資料請求也能出問題？
2.3 空的依賴陣列居然讓Callback觸發了兩次？
2.4 useEffect中的競態條件又是怎麼一回事啊？
2.5 這種情況用useEffect就對了⋯⋯吧？
2.6 用useEffect處理事件，卻讓畫面抖了一下？
|CHAPTER 03| React效能優化與最佳化實踐
3.1 使用索引作為key值簡單又方便，但這樣對嗎？
3.2 重新渲染的昂貴代價該怎麼處理？
3.3 React.memo這麼好用，我還不用爆！
3.4 不過是個渲染行為，怎麼連useContext也在搞啊！
3.5 React.memo怎麼碰到函數當作props就不行啦！
|CHAPTER 04| React面試實戰問題
4.1 你說你懂React渲染邏輯，那試著回答這元件內部的程式碼執行順序
4.2 簡單的待辦事項工具也能拿來考？
4.3 要我寫Tab元件？真的假的？
4.4 現場寫一個Custom Hook是能有多難？
4.5 寫一個簡單的分頁來應付大量資料呈現吧！
4.6 點擊畫面後新增表情符號，也算是React面試題？（Part I）
4.7 點擊畫面後新增表情符號，也算是React面試題？（Part II）
4.8 自行查看文件，並完成請求同義字的功能吧！
4.9 井字遊戲（Tic-Tac-Toe），為什麼連你都在面試場上啊？
4.10 翻牌遊戲也來參一腳！askw |CHAPTER 01| React狀態管理的陷阱與技巧
1.1 Array.push用在更新state，居然不起作用了？
1.2 setState連續呼叫這麼多次，怎麼只作用一次？
1.3 簡單的useState使用，卻出現了「Cannot set properties of undefined」的錯誤訊息？
1.4 元件內state有夠多，如何優雅地管理龐大的元件狀態？
1.5 條件渲染怎麼多了個0啊？
1.6 Rendered more hooks than during the previous render，這又是什麼鬼東西啊？
1.7 這個useState初始值重新渲染後，怎麼不會更新啊？
1.8 有時候也許useState並不夠好？
1.9 複雜表單：彼此依賴的state管理該怎麼做？
|CHAPTER 02| React中你可能忽略的副作用
2.1 怪了，我的頁面怎麼越跑越慢啊？記憶體洩漏是什麼鬼？
2.2 在useEffect中做簡單的資料請求也能出問題？
2.3 空的依賴陣列居然讓Callback觸發了兩次？
2.4 useEffect中的競態條件又是怎麼一回事啊？
2.5 這種情況用useEffect就對了⋯⋯吧？
2.6 用useEffect處理事件，卻讓畫面抖了一下？
|CHAPTER 03| React效能優化與最佳化實踐
3.1 使用索引作為key值簡單又方便，但這樣對嗎？
3.2 重新渲染的昂貴代價該怎麼處理？
3.3 React.memo這麼好用，我還不用爆！
3.4 不過是個渲染行為，怎麼連useContext也在搞啊！
3.5 React.memo怎麼碰到函數當作props就不行啦！
|CHAPTER 04| React面試實戰問題
4.1 你說你懂React渲染邏輯，那試著回答這元件內部的程式碼執行順序
4.2 簡單的待辦事項工具也能拿來考？
4.3 要我寫Tab元件？真的假的？
4.4 現場寫一個Custom Hook是能有多難？
4.5 寫一個簡單的分頁來應付大量資料呈現吧！
4.6 點擊畫面後新增表情符號，也算是React面試題？（Part I）
4.7 點擊畫面後新增表情符號，也算是React面試題？（Part II）
4.8 自行查看文件，並完成請求同義字的功能吧！
4.9 井字遊戲（Tic-Tac-Toe），為什麼連你都在面試場上啊？
4.10 翻牌遊戲也來參一腳！
王介德（Danny Wang）
商學背景轉職的前端工程師，在轉職的過程中受過太多來自社群的幫助，深知這年頭軟體工程師求職的不易，抱著「取之社群、回饋社群」的想法，積極舉辦各種求職活動，分享自己一路從新創到外商的工作經歷與求職準備，透過講座、文章或是打造的簡易軟體套件，儘可能以平易近人的方式，協助他人快速成長、建立信心，希望藉由不斷地提供協助，打造一個正向的循環，幫助更多人在工程師職涯中站穩腳步。
商學背景轉職的前端工程師，在轉職的過程中受過太多來自社群的幫助，深知這年頭軟體工程師求職的不易，抱著「取之社群、回饋社群」的想法，積極舉辦各種求職活動，分享自己一路從新創到外商的工作經歷與求職準備，透過講座、文章或是打造的簡易軟體套件，儘可能以平易近人的方式，協助他人快速成長、建立信心，希望藉由不斷地提供協助，打造一個正向的循環，幫助更多人在工程師職涯中站穩腳步。
Details
Review
0 ratings
1 stars
0%
2 stars
0%
3 stars
0%
4 stars
0%
5 stars
0%
Write a review
Eligible to write reviews after purchasing products or add to Library
