useState 簡單解釋 - 非開發人員指南 (5)-js教程-PHP中文網

useState Explained Simply - A Guide for Non-Developers (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

登入後複製