Java 后端全栈转型路线图

import { useEffect, useState } from "react";

export default function UserSearch({ initial }: { initial: User[] }) {
  const [keyword, setKeyword] = useState("");
  const [list, setList] = useState(initial);

  useEffect(() => {
    const timer = setTimeout(() => {
      fetch("/api/users?kw=" + keyword)
        .then((r) => r.json())
        .then((data) => setList(data));
    }, 300);
  }, []);   // 毛病一：依赖数组漏了 keyword——输入变了也不会重新请求（第 10 篇闭包陷阱）

  return (
    <ul>
      {list.map((u, i) => (
        <li key={i}>{u.name}</li>   // 毛病二：列表可能重排，key 不能用下标（第 7 篇）
      ))}
    </ul>
  );
}
// 毛病三：连续输入时上一发请求可能后到，覆盖新结果——没有 abort，竞态（第 34 篇）
// 隐藏的第四处：timer 没有 cleanup，组件卸载后照样触发 setState（第 9 篇）

// Java 里你写过的分页返回值：
// public record Page<T>(List<T> list, long total, int page, int size) {}
// TypeScript 里几乎是同一种东西：
interface PageResult<T> {
  list: T[];
  total: number;
  page: number;
  size: number;
}

// 泛型组件：泛型约束的写法都和 Java 的 <T extends Xxx> 一个味道
function PaginatedTable<T extends { id: number }>({ data }: { data: PageResult<T> }) {
  // 列表渲染：第 7 篇的 key、第 5 篇的 diff，都是老朋友了
  return (
    <ul>
      {data.list.map((item) => <li key={item.id}>{item.id}</li>)}
    </ul>
  );
}