Hooks 簡介
Hooks 簡介 Hooks 是 React 16.8 引入的一個功能,它允許你在函數型組件(Functional Components)中使用狀態(state)和其他 React 功能,而不需要使用類別組件(Class Components)。這使得函數型組件能夠更靈活且簡潔地實現狀態管理、生命週期操作等功能。 Hooks 的特點 完全向後兼容:你可以逐步在現有項目中引入 Hoo...
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() 方法來迭代數據,並將每個項...
React 中的條件渲染 在 React 中,條件渲染與 JavaScript 的條件語句類似。我們可以根據某些條件來動態地渲染不同的內容。這使得 React 應用能夠根據應用狀態顯示不同的 UI。 1. 使用 if 語句進行條件渲染 最基本的條件渲染方式是使用 JavaScript 的 if 語句,根據條件決定要渲染的內容。 範例:使用 if 渲染內容 function Greet...
React 中的事件處理 在 React 中,事件處理與 HTML 中的事件處理有一些相似之處,但也有一些關鍵的差異。React 使用合成事件(SyntheticEvent)來處理事件,這是一種跨瀏覽器的包裝,使得事件處理在各個瀏覽器中表現一致。React 中的事件命名方式遵循 JavaScript 標準,而不是 HTML 的小寫方式,並且 React 中的事件處理程序一般寫成函數。 1...
React 中的 State 與組件狀態管理 在 React 中,state 是一個特殊的物件,用來存儲組件的本地狀態。與 props 不同的是,state 是可變的,組件可以通過修改 state 來更新自身的 UI。React 的核心理念之一就是當狀態改變時,React 會自動更新組件的 UI,這使得狀態管理在構建動態應用時至關重要。 1. 什麼是 State? state 是一個 R...
React 中的 Props 與組件之間的數據傳遞 在 React 中,props(屬性) 是一個重要的概念,負責在組件之間進行數據傳遞。props 是組件的輸入,通過父組件傳遞到子組件,並且子組件無法修改這些 props,它們是唯讀的。 1. 什麼是 Props? props 是 React 組件之間傳遞數據的方式。父組件可以通過 props 將數據傳遞給子組件。props 是子組件用...
React 組件(Components) 在 React 中,組件(Components) 是構建用戶界面的核心。每個 React 應用都是由多個組件組成的,每個組件負責應用的一部分邏輯和界面。組件可以是簡單的元素,或者是包含更多子組件和邏輯的複雜結構。React 的組件化方式使得代碼更加模組化、可重用,並且便於維護。 React 中的組件有兩種主要形式:函式組件 和 類別組件。 ...
JSX 語法介紹 JSX(JavaScript XML)是 React 引入的一種語法擴展,它讓我們能夠在 JavaScript 代碼中寫類似 HTML 的標記。儘管看起來像 HTML,但 JSX 是 JavaScript 的一部分,最終會被轉換為 JavaScript 代碼來渲染 DOM。 1. JSX 基本語法 JSX 的寫法和 HTML 十分相似,但其中包含了 JavaScript...