Props 与 State

这一课你将能做到

1. 用 props 把数据从父传到子
2. 用 useState 记住会变的值，并触发界面更新
3. 说出何时该「状态提升」到父组件

为什么要学

本站路径卡的标题从哪来？父页面把课名传进去——这是 props。
「离开页」输入框里你正在打的字——这是 state。

• Props：父给子的说明书（只读）
• State：组件自己的记性（会变，一变就重渲染）

分不清就会：子组件硬改 props、或两个组件各存一份「是否完成」，勾了左边右边还没勾。人话：外来参数 vs 自己记得住的东西。

先建立图像

父组件  --props-->  子组件（只读展示）
父组件  <--事件通知--  子组件（「我被点了」）
组件内部 state：点击后 setState → React 再调用函数 → 新 JSX

	Props	State
谁给的	父（或默认值）	组件自己 useState
能不能直接改	不要改	用 setter
变了会怎样	父重渲染，子收到新 props	本组件重渲染

跟着做

步骤 1：props（解构写法最常见）

function StationTitle({ title }) {
  return <h2>{title}</h2>;
}

export function Demo() {
  return <StationTitle title="HTML 入门" />;
}

子组件里不要写 title = "别的" 去改 props。要改，让父改传进来的值。
多个属性就是多个参数：<Card title="JS" done={false} />。

步骤 2：useState（最小记忆）

import { useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);
  // count：这次渲染看到的值
  // setCount：更新函数；调用后安排一次重新渲染

  return (
    <button type="button" onClick={() => setCount(count + 1)}>
      点了 {count} 次
    </button>
  );
}

人话：useState(0) 交给 React 一个盒子，盒子里先是 0。你只能通过 setCount 换盒子里的东西；换了 React 才愿意再画一遍。

步骤 3：更新依赖旧值时用函数式

setCount((c) => c + 1);

连续点、或在同一个事件里加两次时更稳妥。直接 setCount(count + 1) 两次可能仍只用到同一份旧 count。

步骤 4：对象/数组 state 要「换新的」

const [item, setItem] = useState({ done: false, title: "CSS" });

// 错误：item.done = true; setItem(item);  // 还是同一个对象
// 正确：做出新对象
setItem({ ...item, done: true });

const [list, setList] = useState([1, 2]);
setList([...list, 3]);          // 追加
setList(list.filter((x) => x !== 2)); // 删除