元件（Component） 元件是 React 中最基本的概念，基本上，整個 React 應用程式都是由元件所組成，因此，可以說元件是 React 中使用者介...
準備 React 開發環境 首先，我們需要到 Node.js 的 官網 安裝 Node.js 環境，選擇左邊的穩定版本 v18.18.0，若是有使用 nvm...
單頁式應用程式（SPA）的興起 在過去，網頁主要在 Server 端生成，這些網頁包含的 JavaScript 最初只是為了向頁面添加一些簡單的動態效果，開發...
為何選擇學習 React？ 雖然目前在開發中主要使用 Vue3（Composition API），但這一次的鐵人賽，我決定將焦點放在 React 上。 通常，...
大家好，我是 S.C，八月初偶然在 Youtube 上看到一段影片，提到學習分成三層次 - 自己會、能教會他人、能設計教材，看完蠻有感觸的，因為自踏入程式開發的...
2024/2 更新 - 實體書平裝版本上市 在經過快要一年的努力後，本系列文的實體書版本推出了～其中新增並補充了許多鐵人賽版本中沒有的脈絡與細節，並以全彩印刷拉...
Hooks 的誕生是為了解決什麼問題 在深入 hooks 的設計脈絡之前，我們得先來談談 hooks 的誕生究竟是為了解決什麼問題。首先，hooks 是綁定配合...
React hooks 從 2019 年初推出以來也經過了幾年的時間，它以非常快的速度就發展成為 React 開發方式的絕對主流選擇。搭配 function c...
除了最核心的 useState 以及 useEffect 以外，在 React 中最常被我們使用到的內建 hooks 應該就屬 useCallback 以及 u...
在前面章節中我們解析了將 effect 設計成即使多次執行也能保持正確的重要性。如果你還對這個觀念不是很熟悉的話，非常建議你先閱讀系列文前面的篇幅中關於 use...
在前面的章節中我們已經詳細的解析了 useEffect 正確的概念以及用法，也再三強調了 useEffect 的用途是同步資料到 React elements...
這個章節讓我們更深入的探討一下 dependencies 常見的錯誤使用方式。我們在前幾篇 useEffect 的深入解析中一再強調過一個概念：useEffec...
鐵人賽 Day24自己做一個價值幾十萬的動態網站 第二十四課：resveration 將optionsContext條件行為計算後，同步更新到各個需要的comp...
接續把拿回來的資料做整理拿回來的資料像這樣一大串.. 插播一下，使用 chrome 可以安裝一下 Json Formatter 這個 extension功用是可...
函式與 dependencies 一種常見的誤解是認為函式不應該填寫在 dependencies 中。我們來看一下這個範例： function SearchRe...
在上一篇關於 useEffect 的深度解析中，我們已經了解到了 dependencies 是一種效能的最佳化手段，而不是用來控制生命週期或是商業邏輯。對於 u...
經過了前兩篇章的洗禮，相信你現在對於 function component 的 render 概念已經有一定程度的掌握。接著就讓我們進入這個階段的重頭戲：use...
接續上一章節的概念，我們已經了解到了每一次 render 都有自己的 props 與 state 以及 event handlers，那麼 useEffect...
承接上一張節的脈絡，在我們解析大魔王 useEffect 之前，我們需要先更深入的重新梳理一下 component 生命週期的重要概念：render。 每一次...
在解析過 React 的畫面更新的核心觀念以及 setState 進階的細節之後，接下來我們會往下一個大主題邁進 — 有關於 component 的 rende...
在前兩篇的章節中，我們已經了解到在 React 開發中 immutable update 的必要性以及基本的操作方法了。然而有趣的是，在我擔任前端面試官多年也面...
透過上一篇章的解析，我們已經了解到為什麼我們不應該在 React 中去 mutate state 的資料了。因此，當我們想更新物件或陣列時就必須以 immuta...
在 React 當中，state 是可以存放 JavaScript 中的任何資料型別，除了像是字串、數字等直接可以表示值的型別，當然也支援物件或陣列這種以參考（...
在上一篇的章節中，我們詳細的解析了有關於連續呼叫 setState 時的自動 batching 機制。承著前文的脈絡，我們來探討看看一個延伸的情境：如果我們想基...
從前面的章節中我們已經充分地了解到，當呼叫 setState 方法時就會觸發對應 state 定義的 component 的 re-render。然而當我們呼叫...
React 中以 state 資料以及 setState 作為 reconciliation 的觸發點，並且以 props 作為 component 層層往下的...
接著我們將上一章節介紹到的一律重繪概念與流程替換成具體的 React 程式來解釋： 當我們在 component 裡呼叫 setState 方法來觸發資料更新時...
在經過前面一些基本觀念的鋪陳之後，接下來我們將會繼續重點解析關於 React 產生並管理 UI 畫面的核心運作流程與原理，而這將會是真正掌握 React 這門技...
在繼續深談 React 管理並更新畫面的策略與機制之前，我們先來探究一下關於單向資料流的概念，以及在尚未使用前端框架時實現單向資料流的 DOM 渲染策略，來幫助...
為了滿足 transpiler 轉換的正確性，因此 JSX 語法在撰寫上會有一些重要的特性與規則需要注意。這些規則可能大多數人多少都聽過，但是卻不是很了解為什麼...
秘密基地
S.C
Zet
K.o
dc88
iThome鐵人賽
看影片追技術