useState 簡單解釋 - 非開發人員指南 (5)

嘿？

來自行銷背景，我記得 React hooks 最初的感覺是多麼令人生畏。所有這些技術術語和開發人員術語都讓我頭暈目眩！經過大量的學習（和大量的困惑）後，我想創建一個我希望在開始時擁有的指南。

如果您曾經：

• 在 React 文件中感到迷失？ ‍？
• 想知道為什麼我們不能只使用常規變數
• 努力向其他人解釋 useState
• 想要真正有意義的例子

那麼本指南就是為您準備的！讓我們將 useState 分解為易於消化的小塊。

什麼是 React Hook？ ？

將 Hooks 想像成一把瑞士軍刀 - 每個工具都有特定的用途：

• useState：你神奇的記事本（我們將深入研究這個！）
• useEffect：您的私人助理，監視變化
• useContext：大家分享資訊的群聊
• useReducer：就像 useState 的老大哥一樣處理複雜的事情
• useMemo：你的聰明朋友，會記住解決方案
• useCallback：與useMemo類似，但用於記住函數
• useRef：就像在某樣東西上貼一張便利貼以便稍後找到它

什麼是 useState？ ？

還記得那些可以寫東西、擦掉它、寫新東西的魔法板嗎？ useState 與您網站的完全一樣！它可以幫助您的網站記住一些事情並在需要時更新它們。

const [something, setSomething] = useState(startingValue);

將其視為：

• 某事：您的板上目前寫的內容
• setSomething：用於更改所寫內容的特殊橡皮擦/記號筆
• 起始值：您在黑板上首先寫的內容

useState 如何運作？ ？

讓我像烹飪食譜一樣解釋一下：

1.準備煮飯（初始化）

• 設定您的烹飪空間（您的組件）
• 建立一個特殊的食譜卡（React 的狀態空間）
• 每種食材在卡片上都有自己的位置

2. 更改配方（更新）

當您想要更改成分量時：

• React 將更改寫在便條上
• 將該註解放入「待辦事項」堆中
• 計畫很快更新食譜
• 將多個變更組合在一起（例如一次更改多種成分）

3. 進行更改（渲染）

• React 評論所有便條
• 計算新金額
• 更新食譜卡
• 向大家展示新食譜

4. 完成（提交）

• React 做出改變
• 清理舊成分
• 設定新成分

現實世界的例子？

1. 簡單的歡迎辭

const [something, setSomething] = useState(startingValue);

2. 讚按鈕計數器

function WelcomeMessage() {
  // Think of this like a greeting card where you can change the name
  const [name, setName] = useState("Guest")

  return (
    <div>
      <input 
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Type your name"
      />
      <p>Welcome to my website, {name}! ?</p>
    </div>
  )
}

3. 深色模式切換

function LikeButton() {
  // Just like counting likes on Instagram
  const [likes, setLikes] = useState(0)

  return (
    <div>
      <p>This post has {likes} likes</p>
      <button onClick={() => setLikes(likes + 1)}>♥️ Like</button>
    </div>
  )
}

2. 根據之前的值更新

function DarkModeSwitch() {
  // Like a light switch for your website
  const [isDark, setIsDark] = useState(false)

  return (
    <div>



<h2>
  
  
  Common Mistakes (We All Make Them!) ?
</h2>

<h3>
  
  
  1. Trying to Change Things Directly
</h3>



<pre class="brush:php;toolbar:false">// ? Don't do this!
const [user, setUser] = useState({name: 'John'})
user.name = 'Jane'  // This is like trying to edit a photocopy

// ✅ Do this instead!
setUser({...user, name: 'Jane'})  // This is like making a new copy

什麼時候應該使用 useState？ ✅

在需要時使用它：

• 追蹤表單輸入
• 開啟/關閉
• 數數
• 儲存臨時資訊
• 處理使用者互動

什麼時候不應該使用 useState？ ⛔

在下列情況下避免使用：

• 您需要在許多元件之間共用資料（使用Context）
• 你有複雜的狀態邏輯（使用useReducer）
• 您正在處理大量資料
• 您需要一次更新多個相關內容

讓我們練習一下吧！ ？

這裡有一個小挑戰來測試您的理解：

1. 建立一個簡單的計數器組件
2. 加入遞增和遞減按鈕
3. 新增重置按鈕
4. 獎勵：新增「乘以 2」按鈕

在評論中留下你的解決方案！我很想看看你創造了什麼。

結束了嗎？

useState 乍一看可能看起來很可怕，但它實際上只是幫助您的網站記住事物的一種方式 - 就像數位便籤系統一樣！請記住：

• 從簡單開始
• 使用基本範例進行練習
• 不用擔心自己是否完美
• 繼續建造與學習

我自己沒有技術背景，我知道這些概念需要時間才能理解。這完全正常！

讓我們聯絡吧！ ？

我很想聽聽您的 React 之旅：

• 你的「啊哈！」是什麼？ useState 的時刻？
• 哪些類比可以幫助你理解它？
• 您還希望我分解哪些其他 React 概念？

在下面的評論中分享你的想法！

請繼續關注更多指南，我將其他 React 概念分解為正常的人類語言！

編碼愉快！ ？

---

封面圖片來源：您的圖片來源

以上是useState 簡單解釋 - 非開發人員指南 (5)的詳細內容。更多資訊請關注PHP中文網其他相關文章！