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 概念分解为正常的人类语言！

编码愉快！ ？

---

封面图片来源：您的图片来源