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

登录后复制