鐵人檔案
在這次的鐵人賽中，我會以單元式的方式介紹 React.js 的各種 Hooks、Context、React router、Redux & Redux toolkit、React 動畫、React 效能優化及其他瑣碎 React 特性功能等...
希望能透過一系列 React 相關的主題幫助自己和讀者更加認識 React.js。
這篇要繼續介紹剩下的兩個元件。 SwitchTransition 元件 主要是用來渲染兩個狀態間做切換的過渡動畫，假如想要讓新元素加入和舊元素移除同時發生時出現...
這篇要介紹的是 React 元件的生命週期(Life Cycle)。 要認識生命週期的話我們可以先從這個 Life Cycle 圖表網站 瞭解，以下兩張圖是從圖...
這篇繼續介紹生命週期的另外兩個階段: Updating & Unmounting，以及了解元件在各個生命週期中更新 DOM 的兩個階段 Render P...
在 React hook 篇章時我們認識了一些避免 re-render 的 hook，像是 useMemo、useCallback，還有 HOC React.m...
在這篇文章中，將會介紹 React 提供的 Profiler API。 介紹 React Profiler 這個 API 會去收集每個元件在渲染時花費的時間，透...
在 React 中有內建的方法可以去定義傳入元件的 props 資料型別，這樣可以更清楚的瞭解傳入的各 props 的型別是什麼。 此外如果傳入的 props...
在 Day 25 介紹 React Profiler 的文章中有提到 React Developer Tools，不過當時只有使用到 Profiler 頁籤，所...
這篇要介紹的是 Redux DevTools，是一個可以紀錄及操作存在 Redux store 內的 state 以及 dispatch action 的工具，...
這篇會介紹 React 18 的一些更新和優化。 專有名詞 因為接下來的介紹會涉及到一些專有名詞，所以在這邊先幫讀者複習一下。 renderer(渲染器) 讀者...
終於鐵人賽也到了尾聲，在這三十天為了完成技術文章，查詢了不少的資料當作參考，其中也包括了在 youtube 上的教學影片，所以我把推薦的一些國外 youtube...
