useContext Hook 在 React 中，useContext Hook 用來方便地訪問和使用Context API，以便在組件樹中共享狀態和數據，而不需要逐層傳遞 props。 1. Context API 簡介 Context API 是 React 提供的一個工具，讓我們可以在不手動傳遞 props 的情況下，將數據或狀態在組件樹中進行共享。它適合在多個組件之間共享...

動態路由 在 React Router 中，動態路由 是一種允許我們在 URL 中定義變數的路由模式，這對於根據參數顯示不同數據的場景（如顯示特定用戶信息或產品詳情）非常有用。動態路由中的變數稱為路由參數，可以根據 URL 的不同部分動態渲染不同的內容。 1. 動態路由的定義 在 React Router 中，動態路由可以使用 :param 的形式來定義。例如，我們可以設置一個用戶...

React Router 入門 React Router 是 React 應用中的一個標準庫，用於實現客戶端路由。它允許我們在單頁應用（SPA）中根據 URL 的變化切換組件，實現多頁效果而不需要實際刷新頁面。 什麼是單頁應用（SPA）？ 單頁應用是指整個應用只有一個 HTML 文件，所有的內容和頁面都在這個頁面上通過 JavaScript 來動態切換。React Router 就是用...

React Context API 介紹 React Context API 是一個強大的工具，用來在組件樹中共享狀態，而不必逐層傳遞 props。它允許我們在父組件和任意深度的子組件之間共享數據，這對於全局狀態管理（如用戶信息、主題、語言設置等）非常有用。 Context API 的主要用途： 避免 props drilling：在 React 中，當父組件需要將狀態傳遞給深層...

自定義 Hooks（Custom Hooks） Custom Hooks 是 React 中的一種功能，它允許我們將組件邏輯封裝到一個可重用的函數中。這樣，我們可以把多個組件中共用的邏輯提取出來，而不需要重複編寫代碼。自定義 Hooks 其實就是一個以 “use” 開頭的普通 JavaScript 函數，它可以在內部使用其他 React Hooks，如 useState、useEffect...

useEffect 介紹 useEffect 是 React 中的一個 Hook，允許你在函數型組件中執行副作用操作。副作用操作通常是指那些會影響組件之外的事物，如數據請求、訂閱、DOM 操作或手動更改瀏覽器 API 等。 在類別組件中，這些副作用操作通常是在 componentDidMount、componentDidUpdate 和 componentWillUnmount 等生命週...

Hooks 簡介 Hooks 是 React 16.8 引入的一個功能，它允許你在函數型組件（Functional Components）中使用狀態（state）和其他 React 功能，而不需要使用類別組件（Class Components）。這使得函數型組件能夠更靈活且簡潔地實現狀態管理、生命週期操作等功能。 Hooks 的特點 完全向後兼容：你可以逐步在現有項目中引入 Hoo...

React 生命週期（類別組件） 在 React 的類別組件（Class Components）中，生命週期方法允許我們在組件的不同階段執行特定的代碼。這些方法分為三個主要階段：掛載階段（Mounting）、更新階段（Updating） 和 卸載階段（Unmounting）。 以下是這些階段和對應的生命週期方法： 1. 掛載階段（Mounting） 掛載階段是組件被創建並添加到 ...

受控與非受控元件 在 React 中，表單元素（如 <input>、<textarea> 和 <select> 等）可以有兩種不同的方式來管理其狀態：受控元件（Controlled Components） 和 非受控元件（Uncontrolled Components）。 1. 受控元件 受控元件是指其值完全由 React 控制。表單元素的值存儲在組...

React 中的列表渲染與 key 屬性 在 React 中，列表渲染是非常常見的需求，通常我們會根據數據生成一組相似的元素。當我們使用 JavaScript 的迴圈來渲染列表時，React 需要能夠唯一識別每個列表項，這時就需要使用 key 屬性來幫助 React 高效地更新和渲染列表。 1. 基本的列表渲染 可以使用 JavaScript 的 map() 方法來迭代數據，並將每個項...