前端速成react——useState

🎯 什么是 useState？

通俗说：

useState 是 React 提供的一个 函数式组件里的“小记事本”，可以用来存数据、改数据、刷新页面。

---

📦 基本用法：

import React, { useState } from 'react';

function Counter() {
  // 声明一个“count”变量，初始值为 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>你点了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>点我 +1</button>
    </div>
  );
}

---

🔍 分析一下这行代码：

const [count, setCount] = useState(0);

部分	解释
count	当前的值（状态）
setCount	修改这个值的函数
useState(0)	给 count 一个初始值是 0

你可以把这行代码理解成这样：

🧠 「我想存一个数字叫 count，初始值是 0，以后用 setCount() 来修改它」

---

🤔 为什么用 useState 而不是普通变量？

因为 React 是“自动刷新”的，如果你用普通变量，React 不知道你更新了，就不会刷新页面。

let count = 0;
count++; // 页面不会变

但用 useState 的话，页面会自动重新渲染，非常灵活！

---

💡 再来几个例子：

✅ 输入框实时显示输入内容：

function InputBox() {
  const [text, setText] = useState('');

  return (
    <div>
      <input value={text} onChange={e => setText(e.target.value)} />
      <p>你输入了：{text}</p>
    </div>
  );
}

---

✅ 多个状态一起用：

function Profile() {
  const [name, setName] = useState('小明');
  const [age, setAge] = useState(18);

  return (
    <div>
      <p>姓名：{name}</p>
      <p>年龄：{age}</p>
    </div>
  );
}

---

📌 总结口诀：

概念	解释
useState()	创建一个“可变的值”
第一个值	当前值（变量）
第二个值	改值的函数
改了值	页面会自动更新
场景	计数器、输入框、开关、表单、登录状态、加载状态等