State：会记忆的应用

为什么普通变量不够

第 2 级你每次点击后自己重写按钮文字做计数器。React 不同：你改 数据，React 重绘屏幕。但要把数据交给叫 state 的特殊盒子——否则 React 注意不到变化。

跟我看：React 里的计数器

import { useState } from 'react';

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked: {count}×
    </button>
  );
}

export default Counter;

最重要一行拆解——const [count, setCount] = useState(0);：

• useState(0)——“React，给我设一个起始值 0 的盒子。”
• count——盒子里当前值（只读）。
• setCount——改值的唯一正确方式。调用 setCount(5) 时，React 保存新值 并自动重绘所有用 count 的地方。

onClick={...} 是 React 版的 addEventListener("click", ...)——直接在 JSX 里。

注意代码里 没有 的：没有 getElementById，没有 textContent。你不说 怎么 改屏幕——只说 现在什么是真的（count 现在是 5），屏幕自己对齐。

跟我看：state 控制可见内容

State 不必只是数字。可折叠区块，React 方式：

import { useState } from 'react';

function Menu() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setOpen(!open)}>
        {open ? "Hide the menu ▲" : "Show the menu ▼"}
      </button>

      {open && (
        <ul>
          <li>Monday: tomato soup with pasta</li>
          <li>Tuesday: chicken with rice</li>
          <li>Wednesday: pancakes with jam</li>
        </ul>
      )}
    </div>
  );
}

两个 JSX 新技巧：

• condition ? A : B——HTML 里的 if/else 简写：“开着显示这个，否则那个。”
• condition && (...)——“只有条件为真才渲染。” open 为 false 时列表根本不存在。

!open 是”相反”——true 变 false，反之亦然。一行 = 开关。

轮到你了 💪

给应用加两个用 state 的东西：

1. 可折叠区块（true/false state）符合项目：🏫 可折叠午餐菜单 · 🙋 “显示/隐藏我最爱的游戏” · 🌍 可折叠国家列表 · ⚽ 可折叠名单。
2. 计数器或投票（数字 state）：🏫 班级旅行投票 · 🙋 “今天多少人跟我打招呼” · 🌍 去过的国家计数 · ⚽ 记分牌，带 +1 home / +1 away 按钮（两个 state！）。

import { useState } from 'react';

function Score() {
  const [home, setHome] = useState(0);
  const [away, setAway] = useState(0);

  return (
    <div className="card">
      <h3>Riverside {home} : {away} Lakeside</h3>
      <button onClick={() => setHome(home + 1)}>Home goal ⚽</button>
      <button onClick={() => setAway(away + 1)}>Away goal 😤</button>
      <button onClick={() => { setHome(0); setAway(0); }}>New match</button>
    </div>
  );
}

export default Score;

这堂课你要记住

• const [value, setValue] = useState(start)——组件的记忆。
• 只通过 setValue(...) 改——React 然后自己重绘。
• JSX 里：onClick={...}，条件 ? : 和 && 控制可见内容。

© 2026 Ing. Martin Polak / AlgoRhino · 内容使用条款