状态（state）

用 useState 记住一个值，值一变，页面就会重新渲染

要点

会变化的值用 useState 保存：const [count, setCount] = useState(0)
要修改这个值，一定要用 setCount(新的值)
值变化后，React 会自动重新渲染页面，不需要自己去改 DOM

动手试试

import { useState } from "react"

export default function App() {
  const [count, setCount] = useState(0)

  return (
    <div style={{ padding: 16 }}>
      <p>点击次数：{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}

Open Sandbox

把 +1 改成 +10 试试
加一个 −1 按钮（提示：setCount(count - 1)）
加一个归零的重置按钮（提示：setCount(0)）

常见错误

用 let count = 0，页面不会更新

修改普通变量，React 并不知道需要重新渲染页面。会变化的值要用 useState 保存。

写成 onClick={setCount(count + 1)} 会立刻执行

onClick 需要的是“稍后再执行的函数”。要像 () => setCount(count + 1) 这样用函数包起来。