条件渲染与保持组件纯粹

function IslandComments({ islandId, user }: Props) {
  const [comments, setComments] = useState<Comment[] | null>(null);
  const [error, setError] = useState<Error | null>(null);

  if (error) {
    return <p role="alert">留言加载失败：{error.message}</p>;
  }
  if (comments === null) {
    return <CommentSkeleton lines={3} />;
  }
  if (comments.length === 0) {
    return <EmptyState hint="还没有留言，来抢沙发" />;
  }

  // 走到这里 TypeScript 已确认 comments 是 Comment[] 且非空——类型随控制流收窄
  return <CommentList comments={comments} />;
}

return (
  <section>
    <h1>{island.title}</h1>
    {user ? (
      <button onClick={subscribe}>订阅更新</button>
    ) : (
      <a href="/login">登录后订阅</a>
    )}
  </section>
);

{unreadCount > 0 && <Badge count={unreadCount} />}

// 反模式：unreadCount 为 0 时，页面上渲染出一个孤零零的 "0"
{unreadCount && <Badge count={unreadCount} />}

// 正确：把条件收成布尔
{unreadCount > 0 && <Badge count={unreadCount} />}
// 或
{Boolean(unreadCount) && <Badge count={unreadCount} />}

type Render =
  | { phase: 'loading' }
  | { phase: 'error'; message: string }
  | { phase: 'ready'; island: Island };

function IslandPage({ render, user }: { render: Render; user: User | null }) {
  // 权限判断收拢成一个具名布尔，别内联进 JSX——否则每处显隐各写一遍判定规则。
  // 注意 && 的书写顺序：render.phase === 'ready' 必须在访问 render.island 之前，
  // 利用短路避免在 loading 分支上读取不存在的字段。
  const canEdit =
    user !== null &&
    (user.role === 'admin' ||
      (render.phase === 'ready' && render.island.authorId === user.id));

  if (render.phase === 'loading') return <IslandSkeleton />;
  if (render.phase === 'error') return <ErrorPanel message={render.message} />;

  const { island } = render;
  return (
    <article>
      <h1>{island.title}</h1>
      {canEdit && <EditButton islandId={island.id} />}
      {island.tags.length === 0 ? (
        <p className="muted">暂无标签</p>          // 空态给文案，而不是渲染空列表
      ) : (
        <TagList tags={island.tags} />
      )}
    </article>
  );
}

// 反模式：渲染期改外部数组——在 StrictMode 下会重复执行
function CartList({ items }: { items: CartItem[] }) {
  items.sort((a, b) => b.price - a.price); // 原地排序：改了父组件的数据
  return <ul>{/* ... */}</ul>;
}

// 正确：产生新数组
function CartList({ items }: { items: CartItem[] }) {
  const sorted = [...items].sort((a, b) => b.price - a.price);
  return <ul>{/* ... */}</ul>;
}

// main.tsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

function PublishButton({ article, user }: { article: Article; user: User }) {
  const isOwner = article.authorId === user.id;
  const isPublished = article.status === 'published';

  if (!isOwner) return null;                       // 无关人员：确实什么都不该看到
  if (isPublished) {
    return (
      <span className="muted">
        已发布 <button onClick={unpublish}>撤回</button>
      </span>
    );
  }
  return <button onClick={publish}>发布</button>;
}

function ReaderNotes({ notes, query }: { notes: Note[]; query: string }) {
  const filtered = notes.filter((n) => n.title.includes(query));

  if (notes.length === 0) {
    return <EmptyState action="写第一条笔记" onAction={openEditor} />; // 从未写过：引导创建
  }
  if (filtered.length === 0) {
    return <p className="muted">没有匹配「{query}」的笔记</p>;       // 筛选后为空：给筛选反馈
  }
  return <NoteList notes={filtered} />;
}

function ArticleActions({ article, user }: any) {
  return (
    <div>
      {article.status === 'draft'
        ? user
          ? user.id === article.authorId
            ? user.role === 'admin'
              ? <button>发布（管理员代发）</button>
              : <button>发布</button>
            : null
          : null
        : null}
      {article.likes && <LikeCount n={article.likes} />}
      {article.comments.length === 0 ? '' : <CommentList items={article.comments} />}
    </div>
  );
}