组件通信与状态提升

function Celsius() {
  const [c, setC] = useState("");   // 独立的状态，无法联动
  return <input value={c} onChange={(e) => setC(e.target.value)} />;
}

function Converter() {
  // 关键决策：只存一个真相 —— 温度值 + 它的单位
  const [temp, setTemp] = useState("");
  const [unit, setUnit] = useState<"c" | "f">("c");
 
  const celsius = unit === "c" ? temp : toCelsius(temp);
  const fahrenheit = unit === "f" ? temp : toFahrenheit(temp);
 
  return (
    <div>
      <TempInput
        scale="c"
        value={celsius}
        onChange={(v) => {
          setTemp(v);
          setUnit("c");
        }}
      />
      <TempInput
        scale="f"
        value={fahrenheit}
        onChange={(v) => {
          setTemp(v);
          setUnit("f");
        }}
      />
    </div>
  );
}
 
function TempInput({ scale, value, onChange }: TempInputProps) {
  return (
    <label>
      {scale === "c" ? "摄氏度" : "华氏度"}
      <input value={value} onChange={(e) => onChange(e.target.value)} />
    </label>
  );
}

function Parent() {
  const [selectedId, setSelectedId] = useState<string | null>(null);
 
  return (
    <div className="split">
      <List items={items} selectedId={selectedId} onSelect={setSelectedId} />
      <Detail id={selectedId} />
    </div>
  );
}

// 不好：子组件泄露了实现细节（我用的是 input 还是 select？）
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
 
// 好：只传父组件关心的东西
onChange: (value: string) => void
onSelect: (item: Item) => void
onPageChange: (page: number, pageSize: number) => void

// 五个回调层层往下传，每一层都要写一遍
<A onX={onX} onY={onY} onZ={onZ} onW={onW} onV={onV} />

// 非受控：组件自己管状态，只在变化时通知外部
<Accordion defaultOpen={["a"]} onOpenChange={log} />
 
// 受控：外部管状态，组件只负责渲染和触发
<Accordion open={openKeys} onOpenChange={setOpenKeys} />

type Props = {
  open?: string[];              // 传了就是受控
  defaultOpen?: string[];       // 非受控时的初始值
  onOpenChange?: (keys: string[]) => void;
};
 
function useControllable<T>(
  controlled: T | undefined,
  defaultValue: T,
  onChange?: (v: T) => void
) {
  const [uncontrolled, setUncontrolled] = useState(defaultValue);
  const isControlled = controlled !== undefined;
  const value = isControlled ? controlled : uncontrolled;
 
  const setValue = useCallback(
    (next: T) => {
      if (!isControlled) setUncontrolled(next);
      onChange?.(next);        // 两种模式下都要通知外部
    },
    [isControlled, onChange]
  );
 
  return [value, setValue] as const;
}
 
function Accordion({ open, defaultOpen = [], onOpenChange }: Props) {
  const [keys, setKeys] = useControllable(open, defaultOpen, onOpenChange);
  // 后面统一用 keys 和 setKeys，不用再关心是哪种模式
}

type Props = {
  items: Item[];
  selectedIds?: string[];
  defaultSelectedIds?: string[];
  onSelectionChange?: (ids: string[]) => void;
  maxSelection?: number;
};
 
function MultiSelect({
  items,
  selectedIds,
  defaultSelectedIds = [],
  onSelectionChange,
  maxSelection = Infinity,
}: Props) {
  // 选中项：支持受控/非受控（外部可能关心）
  const [selected, setSelected] = useControllable(
    selectedIds,
    defaultSelectedIds,
    onSelectionChange
  );
 
  // 搜索词：纯内部状态（外部不关心，也无需控制）
  const [query, setQuery] = useState("");
 
  // 派生数据：现算，不存 state
  const visible = useMemo(
    () => items.filter((i) => i.name.includes(query)),
    [items, query]
  );
  const isFull = selected.length >= maxSelection;
 
  function toggle(id: string) {
    if (selected.includes(id)) {
      setSelected(selected.filter((x) => x !== id));
    } else if (!isFull) {
      setSelected([...selected, id]);
    }
  }
 
  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="搜索"
      />
      {isFull && <p className="hint">最多选择 {maxSelection} 项</p>}
      <ul>
        {visible.map((item) => {
          const checked = selected.includes(item.id);
          return (
            <li key={item.id}>
              <label>
                <input
                  type="checkbox"
                  checked={checked}
                  disabled={!checked && isFull}
                  onChange={() => toggle(item.id)}
                />
                {item.name}
              </label>
            </li>
          );
        })}
      </ul>
    </div>
  );
}