React JS #5 | State (狀態)

koko-avatar-img
發佈於React
更新於 發佈於 閱讀時間約 4 分鐘

React State:讓元件擁有記憶

在 React 的世界裡,Props 負責從父元件向子元件傳遞資料,而 State 則是負責管理元件自身的內部資料。

State 就像元件的記憶,可以儲存元件的狀態,並根據狀態的變化來更新 UI。


什麼是 State?

State 是元件的內部狀態,用於儲存元件的資料。與 Props 不同的是,State 由元件自己管理。

State 的作用是:

  • 儲存元件的資料: 元件可以使用 State 來儲存自身的資料,例如輸入框的內容、按鈕的點擊次數、下拉選單的選擇值等等。
  • 控制元件的行為: 元件可以根據 State 的值來改變自身的行為,例如顯示或隱藏某些內容、啟用或停用某些功能等等。
  • 更新 UI: 當 State 的值發生改變時,React 會自動重新渲染元件,更新 UI,讓使用者看到最新的狀態。


State 的初始化與更新 : useState Hook

在過去,只有類別元件 (Class Components) 才能夠擁有 State,並且需要使用 this.state 和 this.setState() 方法來管理 State。

但隨著 React Hooks 的引入,函式元件 (Functional Components) 也能夠方便地使用 State,並且更加簡潔易懂。


useState 是一個 React Hook,用於在函式元件中添加 State。它接收一個初始值作為參數,並返回一個包含 State 值和更新 State 函式的陣列。

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0); // 初始化 count 的值為 0

return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
  • useState(0):初始化 count 的值為 0。
  • const [count, setCount] = useState(0):
    • count:State 的值。
    • setCount:更新 State 值的函式。
  • setCount(count + 1):將 count 的值加 1,並更新 State。


State 的更新注意事項

  • 不要直接修改 State: 應該使用 setCount() 函式來更新 State,而不是直接修改 count 的值。
const [count, setCount] = useState(1); // 初始值為 1 
count = 100 // 錯誤語法,你不可以直接修改數值
setCount(100) // 正確語法,修改數值只能透過 useState 賦予的第二個參數
  • State 的更新可能是非同步的: 如果在同一個事件處理函式中多次呼叫 setCount(),React 可能會將這些更新合併成一次更新。


State 的提升 (Lifting State Up)

當多個元件需要共享同一個 State 時,可以將 State 提升到它們的共同父元件中。這樣,父元件就可以透過 Props 將 State 傳遞給子元件,並且子元件可以透過呼叫父元件傳遞的函式來更新 State。


總結

React State 讓元件擁有記憶,是賦予 UI 動態生命的重要機制。透過 State,元件可以儲存自身的資料,控制自身的行為,並且根據 State 的變化來更新 UI。



留言
avatar-img
留言分享你的想法!
avatar-img
koko的沙龍
1會員
34內容數
koko的沙龍的其他內容
2025/04/27
在 React 的世界裡,元件 (Component) 就像一個個獨立的個體,各自負責 UI 的一部分,要讓這些個體協同工作,就需要一種溝通的機制,而 Props 就是組件之間通信和數據傳遞的主要方式。
Thumbnail
2025/04/27
在 React 的世界裡,元件 (Component) 就像一個個獨立的個體,各自負責 UI 的一部分,要讓這些個體協同工作,就需要一種溝通的機制,而 Props 就是組件之間通信和數據傳遞的主要方式。
Thumbnail
2025/04/27
在 React 的世界裡,元件 (Component) 扮演著至關重要的角色。它們是構成使用者介面 (UI) 的基本 building blocks,如同積木一般,可以組合成複雜的應用程式。
Thumbnail
2025/04/27
在 React 的世界裡,元件 (Component) 扮演著至關重要的角色。它們是構成使用者介面 (UI) 的基本 building blocks,如同積木一般,可以組合成複雜的應用程式。
Thumbnail
2025/04/27
告別字串拼接地獄:用 JSX 解鎖 React 的優雅姿態 JSX 是一種強大且方便的語法,讓 React 開發者能夠更直觀地描述 UI 結構,提高程式碼可讀性與開發效率。
Thumbnail
2025/04/27
告別字串拼接地獄:用 JSX 解鎖 React 的優雅姿態 JSX 是一種強大且方便的語法,讓 React 開發者能夠更直觀地描述 UI 結構,提高程式碼可讀性與開發效率。
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
本文介紹了在網站開發中如何運用狀態機的原則和設計方法。通過具體案例分析,以及狀態和數據的區分,詳細介紹了狀態機的設計原則和應用。讀者可以通過本文瞭解如何將狀態機應用於實際的網站開發中。
Thumbnail
本文介紹了在網站開發中如何運用狀態機的原則和設計方法。通過具體案例分析,以及狀態和數據的區分,詳細介紹了狀態機的設計原則和應用。讀者可以通過本文瞭解如何將狀態機應用於實際的網站開發中。
Thumbnail
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上,即使在不同組件也能把A組件內的部分畫面,展現在B組件上,以下方程式舉例。
Thumbnail
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上,即使在不同組件也能把A組件內的部分畫面,展現在B組件上,以下方程式舉例。
Thumbnail
在程式任何地方都能修改各種react組件狀態的做法分享
Thumbnail
在程式任何地方都能修改各種react組件狀態的做法分享
Thumbnail
2023 Vue直播班筆記 - 動態路由Props,接續之前的一般動態路由。分為 "寫死" 及 "彈性" 兩種。
Thumbnail
2023 Vue直播班筆記 - 動態路由Props,接續之前的一般動態路由。分為 "寫死" 及 "彈性" 兩種。
Thumbnail
這系列是我在 2023 六角學院 Vue作品實戰班的筆記,筆記以本人理解的方式記錄。此篇主題為 Slot Props 進階應用 ,其中包含單筆資料、多筆資料。
Thumbnail
這系列是我在 2023 六角學院 Vue作品實戰班的筆記,筆記以本人理解的方式記錄。此篇主題為 Slot Props 進階應用 ,其中包含單筆資料、多筆資料。
Thumbnail
CSS 的繼承性是開發網頁樣式時的一個重要概念,它使得樣式設計更加靈活和高效,有助於提高程式碼的可讀性、一致性和可重用性,並加快開發速度,從而提供更好的開發體驗。
Thumbnail
CSS 的繼承性是開發網頁樣式時的一個重要概念,它使得樣式設計更加靈活和高效,有助於提高程式碼的可讀性、一致性和可重用性,並加快開發速度,從而提供更好的開發體驗。
Thumbnail
JavaScript 套件,頁碼 Pagination.js 搭配 axios API 請求範例
Thumbnail
JavaScript 套件,頁碼 Pagination.js 搭配 axios API 請求範例
Thumbnail
前言 現在的前端需求已經越來越高,要考慮HTML及CSS的切版美觀程度,以及React以及Flutter所提出的元件(Componet、widget)觀念,也就是將元件模組化,使元件可以更動態的被程式運行,而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度,讓任何使用元件的開發者
Thumbnail
前言 現在的前端需求已經越來越高,要考慮HTML及CSS的切版美觀程度,以及React以及Flutter所提出的元件(Componet、widget)觀念,也就是將元件模組化,使元件可以更動態的被程式運行,而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度,讓任何使用元件的開發者
Thumbnail
React Props - React 白話文運動。這一篇則會針對 React 語法進一步做講解, 前幾篇也學會了如何建立一個 React 元件,並且學會了元件之間有父子元件的關係。這篇會介紹 React Props 的概念,包含了:React 元件宣告、React Props。
Thumbnail
React Props - React 白話文運動。這一篇則會針對 React 語法進一步做講解, 前幾篇也學會了如何建立一個 React 元件,並且學會了元件之間有父子元件的關係。這篇會介紹 React Props 的概念,包含了:React 元件宣告、React Props。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News