6.1 组件、状态与渲染

在 React 项目内把以下模块存为 ReadingShelf.jsx。所有数据及交互都保留在浏览器当前的组件树内。

import { useState } from "react";

const books = [
  { id: "markup", title: "Meaningful markup", note: "Describe content relationships." },
  { id: "events", title: "Event traces", note: "Follow one action through its state changes." },
  { id: "layout", title: "Flexible layouts", note: "Adapt presentation to available space." },
];

function BookEntry({ book, selected, onChoose }) {
  return (
    <li>
      <h2>{book.title}</h2>
      <button
        type="button"
        aria-pressed={selected}
        onClick={() => onChoose(book.id)}
      >
        {selected ? "Hide discussion note" : "Show discussion note"}
      </button>
      {selected && <p>{book.note}</p>}
    </li>
  );
}

export default function ReadingShelf() {
  const [query, setQuery] = useState("");
  const [selectedId, setSelectedId] = useState(null);
  const search = query.trim().toLowerCase();
  const visibleBooks = books.filter(book =>
    book.title.toLowerCase().includes(search)
  );

  function chooseBook(id) {
    setSelectedId(previous => previous === id ? null : id);
  }

  return (
    <main style={{ maxWidth: "36rem" }}>
      <h1>Reading shelf</h1>
      <label htmlFor="reading-query">Search title</label>
      <input
        id="reading-query"
        value={query}
        onChange={event => setQuery(event.target.value)}
      />
      <p>{visibleBooks.length} matching books</p>
      {visibleBooks.length === 0 ? (
        <p>No titles match this search.</p>
      ) : (
        <ul>
          {visibleBooks.map(book => (
            <BookEntry
              key={book.id}
              book={book}
              selected={selectedId === book.id}
              onChoose={chooseBook}
            />
          ))}
        </ul>
      )}
    </main>
  );
}

从初始状态开始，追踪搜索与选择的变化：

书架拥有 query 与 selectedId。BookEntry 接收书籍对象、布尔选择值及回调函数。按下按钮时，回调接收书籍 ID。书架更新自己的状态，下一次渲染就为每个可见条目计算新的 props。搜索只改变 query，不会清除 selectedId，因此产生表格最后两行的结果。

说明文字、按钮标签及 aria-pressed 都由同一个 selected prop 推导，因此一致地表达同一选择，无须分别保留三个 state。同样，visibleBooks 及其长度由 books 与 query 计算；另外保留一个独立更新的“匹配数量”，反而会增加维持数据一致的工作。

假设组件显示 pages，用 useState(4) 初始化它，并在按钮被点击时调用以下处理函数一次：

function recordTwoPages() {
  setPages(previous => previous + 1);
  setPages(previous => previous + 1);
}

如果起初 pages = 4，第一个更新函数产生 5；第二个接收这个待处理结果，产生 6。如果同一次渲染的处理函数改为调用两次 setPages(pages + 1)，两次都请求用 5 替换状态。在该处理函数内，即使已调用 setter，立即读取捕获到的 pages 仍会得到 4。

因此，两个更新函数使下一次提交显示 6；两个替换请求则使它显示 5。递增幅度取决于队列中的操作，并非只看 setter 调用了多少次。

书架起初的 query 是空字符串，三本书全部匹配，输入框为空，匹配数量是 3。假设一次编辑把输入文本改成 event。

1. 变更处理函数读取 event.target.value，其值是字符串 "event"。
2. setQuery 请求用该字符串作为下一状态。
3. 下一次渲染计算 search = "event"，再筛选书名。只有 Event traces 包含这段搜索文本。
4. 提交后显示一本书及数量 1，并把 "event" 作为 value 传回输入框。

字段与列表都由 query 推导，因此两者现在一致。如果处理函数没有更新状态，受控字段会继续接收原先的空值，列表也仍然显示全部三本书。

考虑一个状态从零开始的新 ReadingClock，先追踪没有额外开发模式 Strict Mode 检查的正常生命周期：

import { useEffect, useState } from "react";

function ReadingClock() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setSeconds(previous => previous + 1);
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return <p>Elapsed timer ticks: {seconds}</p>;
}

把 setup 建立的 interval 称为 A。更新函数避免捕获过时的 seconds 值，因此每次触发会作用于前一个待处理状态。

这里 setup 没有读取会改变的 props 或 state，因此空依赖数组适用。如果省略依赖参数，Effect 会在此组件每次渲染提交后先清理再设置，包括由计时器触发更新的那次。只要保留 cleanup，就仍然只有一个 interval，但其调度会不断重新开始。如果 Effect 读取会改变的 props 或 state，就需要在依赖中反映那些响应式值。

如果在开发模式下于应用程序根部启用 Strict Mode，初次 Effect 也会经历 setup → cleanup → setup 检查。Interval A 会在替代计时器启动前取消，最后保留一个运行中的 interval。这是在检查设置与清理是否平衡，并非要求第二个永久计时器。浏览器调度延误时，计时器触发次数也未必等于精确的实际秒数。