15. State — 组件的记忆

普通变量为什么不够用

先看一个”看似能跑”的例子：

function Counter() {
  let count = 0;

  function handleClick() {
    count = count + 1;
    console.log(count); // 控制台数字变了
  }

  return <button onClick={handleClick}>点击 {count}</button>;
}

点击按钮，控制台打印 1、2、3… 但页面上始终显示”点击 0”。

问题出在哪？普通变量变化不会触发重新渲染。React 不知道该更新页面。

useState 的声明

useState 就是来解决这个问题的。它让 React 记住一个值，并在值变化时重新渲染：

import { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
  }

  return <button onClick={handleClick}>点击 {count}</button>;
}

useState(0) 返回一个数组，解构出两个东西：

• count：当前状态值
• setCount：更新状态的函数

组件有了自己的记忆

每次调用 useState，React 就给这个组件分配一块”记忆”。重新渲染时，这块记忆还在：

function Counter() {
  const [count, setCount] = useState(0);
  // 第一次渲染：count = 0
  // 点击后 setCount(1)，重新渲染，count = 1
  // 再点 setCount(2)，重新渲染，count = 2
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

这就是”组件的记忆”——React 帮你把值存起来，每次渲染都能读到最新值。

状态是私有的

两个相同组件，各自有独立的状态：

function App() {
  return (
    <div>
      <Counter />
      <Counter />
    </div>
  );
}

页面上两个计数器，互不影响。它们各自调用 useState(0)，各自有独立的 count。

状态和 props 的区别

一句话区分：props 是外部传入的参数，状态是组件内部自己管理的数据。

	props	状态
来源	父组件传入	组件内部声明
能否修改	不可直接修改	通过 setXxx 修改
变化时	父组件重新渲染触发	调用 setXxx 触发

function Greeting({ name }) {
  const [mood, setMood] = useState('开心');

  // name 是 props，来自父组件
  // mood 是状态，自己管理
  return (
    <div>
      <p>{name} 今天{mood}</p>
      <button onClick={() => setMood('兴奋')}>
        变兴奋
      </button>
    </div>
  );
}

多个状态变量

一个组件可以有多个状态：

function Form() {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  const [city, setCity] = useState('');

  return (
    <form>
      <input value={name} onChange={e => setName(e.target.value)} />
      <input value={age} onChange={e => setAge(Number(e.target.value))} />
      <input value={city} onChange={e => setCity(e.target.value)} />
    </form>
  );
}

本节要点

• 普通变量变化不触发渲染，状态会
• useState 返回 [值, 设置函数]
• 每个组件的状态是私有的、隔离的
• props 是外部参数，状态是内部数据