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。這是在檢查設定與清理是否平衡，並非要求第二個永久計時器。瀏覽器排程延誤時，計時器觸發次數亦未必等於精確的實際秒數。