// ===== 完整可运行示例 =====
import React, { useState } from "react";

function UserGreeting() {
  // 状态：模拟用户是否已登录
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  // ---- 组件级的 if/else 条件渲染 ----
  // 在 return 之前用 if/else 决定要渲染的内容
  let content;
  if (isLoggedIn) {
    content = (
      <div>
        <h2>欢迎回来，张三！</h2>
        <button onClick={() => setIsLoggedIn(false)}>退出登录</button>
      </div>
    );
  } else {
    content = (
      <div>
        <h2>请先登录</h2>
        <button onClick={() => setIsLoggedIn(true)}>点击登录</button>
      </div>
    );
  }

  return (
    <div style={{ padding: "20px", border: "1px solid #ddd" }}>
      <h1>用户中心</h1>
      {content} {/* 将提前组装好的 JSX 插入 */}
    </div>
  );
}

export default function App() {
  return <UserGreeting />;
}

// ❌ 错误写法 —— JSX 中不能直接写 if 语句
return (
  <div>
    {if (isLoggedIn) { <p>已登录</p> }}  {/* 这行代码会报错！ */}
  </div>
);

// ✅ 正确写法 —— 把 if/else 放在 return 之前

function ProfilePage({ user }) {
  // 直接在函数体内用 if，清晰明了
  if (!user) {
    return <div>请先登录</div>; // 提前返回
  }

  // 后面的代码都是 "user 存在" 的情况
  return (
    <div>
      <h1>{user.name} 的个人主页</h1>
      <p>邮箱：{user.email}</p>
    </div>
  );
}

class ProfilePage extends React.Component {
  render() {
    const { user } = this.props;

    // if 必须写在 render 方法内部
    if (!user) {
      return <div>请先登录</div>;
    }

    return (
      <div>
        <h1>{user.name} 的个人主页</h1>
        <p>邮箱：{user.email}</p>
      </div>
    );
  }
}

import { useState, useEffect, useMemo } from "react";

function Dashboard({ userId }) {
  const [userData, setUserData] = useState(null);

  // useEffect 中根据条件决定是否发请求
  useEffect(() => {
    if (!userId) return; // 条件不满足，直接跳过副作用

    fetch(`/api/users/${userId}`)
      .then((res) => res.json())
      .then((data) => setUserData(data));
  }, [userId]); // userId 变化时重新执行

  // useMemo 中条件性地缓存计算结果
  const permissions = useMemo(() => {
    if (!userData) return []; // 无数据 → 空权限
    if (userData.role === "admin") return ["read", "write", "delete"];
    if (userData.role === "editor") return ["read", "write"];
    return ["read"]; // 默认只读
  }, [userData]);

  // 渲染
  if (!userId) return <div>请选择用户</div>;
  if (!userData) return <div>加载中...</div>;

  return (
    <div>
      欢迎，{userData.name}（权限：{permissions.join("、")}）
    </div>
  );
}

import React, { useState } from "react";

function LoginForm() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);

  // 判断按钮是否应该禁用：任一输入为空 或 正在提交中
  const isButtonDisabled = !username || !password || isSubmitting;

  const handleSubmit = () => {
    setIsSubmitting(true);
    // 模拟 API 请求
    setTimeout(() => {
      alert(`登录成功！用户：${username}`);
      setIsSubmitting(false);
    }, 2000);
  };

  return (
    <div style={{ padding: 20 }}>
      <h2>用户登录</h2>
      <input
        placeholder="用户名"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <br />
      <br />
      <input
        type="password"
        placeholder="密码"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <br />
      <br />
      {/* ===== 三元运算符实现行内条件渲染 ===== */}
      <button
        disabled={isButtonDisabled}
        onClick={handleSubmit}
        style={{
          padding: "10px 30px",
          backgroundColor: isButtonDisabled ? "#ccc" : "#1890ff",
          color: isButtonDisabled ? "#999" : "#fff",
          border: "none",
          borderRadius: 4,
          cursor: isButtonDisabled ? "not-allowed" : "pointer",
        }}
      >
        {/* 按钮文字：根据状态动态切换 */}
        {isSubmitting ? "登录中..." : "立即登录"}
      </button>
      {/* ==================================== */}
    </div>
  );
}

export default function App() {
  return <LoginForm />;
}

// ✅ 正确：最多两层嵌套，格式清晰
function StatusBadge({ status }) {
  return (
    <span>
      {status === "online"
        ? "🟢 在线"
        : status === "away"
          ? "🟡 离开"
          : "🔴 离线"}
    </span>
  );
}

// ❌ 错误：三层及以上嵌套，可读性急剧下降
function BadExample({ type }) {
  return (
    <span>
      {type === "a" ? "A" : type === "b" ? "B" : type === "c" ? "C" : "D"}
    </span>
    // 这种代码应该改用 if/else 或 switch + IIFE
  );
}

// ✅ 更好的做法：超出两层的条件判断，抽离为独立逻辑
function StatusBadgeBetter({ status }) {
  const statusMap = {
    online: "🟢 在线",
    away: "🟡 离开",
    offline: "🔴 离线",
    busy: "⏰ 忙碌",
  };

  return <span>{statusMap[status] || "未知状态"}</span>;
}

// ❌ 错误：缺少括号包裹三元表达式
function WrongExample({ user }) {
  return (
    <div>
      用户名：{user ? user.name : "未登录" + " | 欢迎"}
      {/* 上面的代码实际上解析为：
          user ? user.name : ("未登录" + " | 欢迎")
          字符串拼接的优先级高于三元，但这容易引起混淆 */}
    </div>
  );
}

// ✅ 正确：用括号明确三元表达式的边界
function CorrectExample({ user }) {
  return (
    <div>
      用户名：{user ? user.name : "未登录"} | 欢迎
      {/* 括号明确了 "未登录" 是假分支的完整返回值 */}
    </div>
  );
}

// ✅ 更安全的写法：提取变量
function SafestExample({ user }) {
  const displayName = user ? user.name : "未登录";
  return <div>用户名：{displayName} | 欢迎</div>;
}

import React, { useState } from "react";

function SearchPage() {
  const [keyword, setKeyword] = useState("");
  const [results, setResults] = useState(null);
  const [error, setError] = useState("");

  const handleSearch = () => {
    setError("");
    setResults(null);

    if (!keyword.trim()) {
      setError("请输入搜索关键词");
      return;
    }

    // 模拟搜索结果
    setTimeout(() => {
      if (keyword === "react") {
        setResults([
          { id: 1, title: "React 官方文档" },
          { id: 2, title: "React 入门教程" },
        ]);
      } else {
        setResults([]);
      }
    }, 800);
  };

  return (
    <div style={{ padding: 20 }}>
      <h2>搜索页面</h2>
      <input
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
        placeholder="请输入搜索关键词"
        onKeyDown={(e) => e.key === "Enter" && handleSearch()}
      />
      <button onClick={handleSearch}>搜索</button>

      {/* ===== && 运算符的三种典型用法 ===== */}

      {/* 用法 1：错误提示 —— 有错误信息时才显示 */}
      {error && <p style={{ color: "red" }}>❌ {error}</p>}

      {/* 用法 2：加载状态 —— 请求进行中时显示 */}
      {results === null && error === "" && keyword && <p>搜索中...</p>}

      {/* 用法 3：空结果提示 —— 搜索完成但无结果时显示 */}
      {results !== null && results.length === 0 && (
        <p>暂无搜索结果，换个关键词试试吧</p>
      )}

      {/* 搜索结果列表 */}
      {results && results.length > 0 && (
        <ul>
          {results.map((item) => (
            <li key={item.id}>{item.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default function App() {
  return <SearchPage />;
}

function ZeroTrapDemo() {
  const [items, setItems] = useState([]);
  // items.length 初始值是 0

  return (
    <div>
      <h3>商品列表</h3>

      {/* ❌ 陷阱代码：当 items.length 为 0 时，页面会渲染出 "0" */}
      {items.length && <p>共 {items.length} 件商品</p>}

      {/* 原因：JavaScript 中 0 && JSX 的求值结果是 0（数字），
          React 19 会把数字 0 当作合法的渲染内容输出到页面上 */}
    </div>
  );
}

// React 对各种值的渲染行为：
{
  false;
} // → 不渲染任何内容 ✅
{
  null;
} // → 不渲染任何内容 ✅
{
  undefined;
} // → 不渲染任何内容 ✅
{
  0;
} // → 渲染出 "0"        ⚠️ 陷阱！
{
  ("");
} // → 不渲染任何内容 ✅
{
  NaN;
} // → 渲染出 "NaN"      ⚠️ 注意！

function ZeroTrapFixed() {
  const [items, setItems] = useState([]);

  return (
    <div>
      <h3>商品列表（方案对比）</h3>

      {/* ❌ 错误写法 */}
      {items.length && <p>共 {items.length} 件商品</p>}

      {/* ✅ 方案 1：显式转为布尔值 */}
      {items.length > 0 && <p>共 {items.length} 件商品</p>}

      {/* ✅ 方案 2：使用双重否定转为布尔值 */}
      {!!items.length && <p>共 {items.length} 件商品</p>}
      {/* !!0 → !false → true → false，所以不会渲染 */}

      {/* ✅ 方案 3：直接用三元运算符（最推荐） */}
      {items.length ? <p>共 {items.length} 件商品</p> : null}
    </div>
  );
}

import React, { useState } from "react";

function OrderCard({ status }) {
  // status 可能的取值: "pending" | "shipped" | "delivered" | "cancelled" | "refunded"

  return (
    <div style={{ padding: 20, border: "1px solid #eee" }}>
      <h3>订单详情</h3>

      {/* ===== IIFE 实现多分支条件渲染 ===== */}
      {(() => {
        // 在 IIFE 内部，可以使用任意 JavaScript 逻辑
        switch (status) {
          case "pending":
            return (
              <div style={{ color: "#faad14" }}>
                ⏳ 待发货
                <button>取消订单</button>
              </div>
            );
          case "shipped":
            return (
              <div style={{ color: "#1890ff" }}>
                🚚 已发货
                <button>确认收货</button>
              </div>
            );
          case "delivered":
            return (
              <div style={{ color: "#52c41a" }}>
                ✅ 已签收
                <button>去评价</button>
              </div>
            );
          case "cancelled":
            return <div style={{ color: "#999" }}>❌ 已取消</div>;
          case "refunded":
            return (
              <div style={{ color: "#ff4d4f" }}>
                💰 已退款
                <span>退款金额将退回原支付方式</span>
              </div>
            );
          default:
            return <div style={{ color: "#999" }}>未知状态</div>;
        }
      })()}
      {/* =================================== */}
    </div>
  );
}

function Demo() {
  const [currentStatus, setCurrentStatus] = useState("pending");

  const statuses = ["pending", "shipped", "delivered", "cancelled", "refunded"];

  return (
    <div>
      <div style={{ marginBottom: 10 }}>
        {statuses.map((s) => (
          <button
            key={s}
            onClick={() => setCurrentStatus(s)}
            style={{
              marginRight: 5,
              fontWeight: currentStatus === s ? "bold" : "normal",
            }}
          >
            {s}
          </button>
        ))}
      </div>
      <OrderCard status={currentStatus} />
    </div>
  );
}

export default function App() {
  return <Demo />;
}

function OrderCardBetter({ status }) {
  // 将状态与 UI 的映射关系提取到组件外部
  const statusConfig = {
    pending: {
      icon: "⏳",
      text: "待发货",
      color: "#faad14",
      action: <button>取消订单</button>,
    },
    shipped: {
      icon: "🚚",
      text: "已发货",
      color: "#1890ff",
      action: <button>确认收货</button>,
    },
    delivered: {
      icon: "✅",
      text: "已签收",
      color: "#52c41a",
      action: <button>去评价</button>,
    },
  };

  const config = statusConfig[status];

  if (!config) return <div style={{ color: "#999" }}>未知状态</div>;

  return (
    <div style={{ color: config.color }}>
      {config.icon} {config.text}
      {config.action}
    </div>
  );
}

import React, { useState, createContext, useContext } from "react";

// ---- 第一步：创建用户权限上下文 ----
const AuthContext = createContext();

// ---- 第二步：编写 withAuth 高阶组件 ----
// HOC 命名规范：以 with 开头
function withAuth(WrappedComponent, requiredPermission) {
  // 返回一个新组件，它"包裹"了原组件
  function WithAuthComponent(props) {
    // 从上下文中获取当前用户的权限列表
    const { permissions } = useContext(AuthContext);

    // 条件判断：用户是否有需要的权限
    if (!permissions.includes(requiredPermission)) {
      return (
        <div style={{ padding: 20, color: "#999", textAlign: "center" }}>
          🔒 您没有访问此功能的权限（需要：{requiredPermission}）
        </div>
      );
    }

    // 有权限：正常渲染原组件，透传所有 props
    return <WrappedComponent {...props} />;
  }

  // ---- 修复 displayName，便于 React DevTools 调试 ----
  WithAuthComponent.displayName = `withAuth(${
    WrappedComponent.displayName || WrappedComponent.name
  })`;

  return WithAuthComponent;
}

// ---- 第三步：使用 HOC 保护组件 ----

// 管理员面板 —— 需要 "admin" 权限
function AdminPanel() {
  return (
    <div style={{ background: "#fff3cd", padding: 20 }}>
      <h3>管理员面板</h3>
      <button>用户管理</button>
      <button>系统设置</button>
      <button>数据导出</button>
    </div>
  );
}

// 编辑面板 —— 需要 "editor" 权限
function EditorPanel() {
  return (
    <div style={{ background: "#d1ecf1", padding: 20 }}>
      <h3>编辑面板</h3>
      <textarea placeholder="在此编辑内容..." rows={5} />
    </div>
  );
}

// 用 HOC 包装组件
const ProtectedAdminPanel = withAuth(AdminPanel, "admin");
const ProtectedEditorPanel = withAuth(EditorPanel, "editor");

// ---- 第四步：整体应用 ----
function AppContent() {
  const [role, setRole] = useState("visitor");

  const rolePermissions = {
    admin: ["admin", "editor", "viewer"],
    editor: ["editor", "viewer"],
    visitor: ["viewer"],
  };

  return (
    <AuthContext.Provider value={{ permissions: rolePermissions[role] }}>
      <div style={{ padding: 20 }}>
        <h2>权限系统演示</h2>
        <p>
          当前角色：
          <select value={role} onChange={(e) => setRole(e.target.value)}>
            <option value="admin">管理员</option>
            <option value="editor">编辑者</option>
            <option value="visitor">访客</option>
          </select>
        </p>
        <p>当前权限：{rolePermissions[role].join("、")}</p>

        <hr />
        <ProtectedAdminPanel />
        <br />
        <ProtectedEditorPanel />
      </div>
    </AuthContext.Provider>
  );
}

export default function App() {
  return <AppContent />;
}

// ❌ 没有设置 displayName
function withAuth(WrappedComponent) {
  function WithAuthComponent(props) {
    /* ... */
  }
  return WithAuthComponent; // DevTools 中显示为 <WithAuthComponent>
}

// ✅ 设置了 displayName
function withAuth(WrappedComponent) {
  function WithAuthComponent(props) {
    /* ... */
  }
  WithAuthComponent.displayName = `withAuth(${WrappedComponent.displayName || WrappedComponent.name})`;
  return WithAuthComponent; // DevTools 中显示为 <withAuth(AdminPanel)>
}

import React, { useState, useContext } from "react";

// ---- 自定义 Hook：usePermission ----
function usePermission(requiredPermission) {
  // 模拟从全局状态或 API 获取用户权限
  const [permissions] = useState(() => {
    // 实际项目中可能是从 Context 或 API 获取
    return ["read", "write"];
  });

  // 返回一个对象，包含判断结果和相关数据
  const hasPermission = permissions.includes(requiredPermission);

  return {
    hasPermission, // 是否有权限
    permissions, // 完整权限列表（按需暴露）
    deny: !hasPermission, // 便捷的反向判断
  };
}

// ---- 使用示例 ----
function DeleteButton() {
  const { hasPermission, deny } = usePermission("delete");

  return (
    <div>
      {hasPermission ? (
        <button style={{ background: "red", color: "white" }}>删除文档</button>
      ) : (
        <button disabled title="需要 delete 权限">
          删除文档（无权限）
        </button>
      )}
      {/* deny 属性的用法 —— 反向判断 */}
      {deny && (
        <span style={{ color: "#999", fontSize: 12, marginLeft: 8 }}>
          联系管理员获取删除权限
        </span>
      )}
    </div>
  );
}

function AdminTools() {
  const { hasPermission: canAdmin } = usePermission("admin");

  // Hook 返回多个属性，可以在不同位置使用
  return (
    <div>
      {canAdmin && (
        <div style={{ background: "#fff3cd", padding: 10 }}>
          <h4>管理工具</h4>
          <button>系统设置</button>
          <button>用户管理</button>
        </div>
      )}
    </div>
  );
}

export default function App() {
  return (
    <div style={{ padding: 20 }}>
      <h2>自定义 Hook 权限演示</h2>
      <DeleteButton />
      <br />
      <AdminTools />
    </div>
  );
}

import React, { useState, useEffect, createContext, useContext } from "react";

// ---- 功能开关上下文（实际项目中可能从远程配置获取） ----
const FeatureFlagContext = createContext({});

function FeatureFlagProvider({ children }) {
  const [flags, setFlags] = useState({
    newDashboard: true, // 新版仪表盘（已开启）
    darkMode: false, // 暗黑模式（未开启）
    exportPDF: false, // PDF 导出（未开启）
  });

  // 模拟从远程配置中心加载功能开关
  useEffect(() => {
    // 实际项目中：fetch('/api/feature-flags').then(...)
    console.log("功能开关已加载");
  }, []);

  return (
    <FeatureFlagContext.Provider value={flags}>
      {children}
    </FeatureFlagContext.Provider>
  );
}

// ---- 自定义 Hook：useFeatureFlag ----
function useFeatureFlag(flagName) {
  const flags = useContext(FeatureFlagContext);

  // 返回开关状态 + 便捷的工具方法
  return {
    enabled: !!flags[flagName], // 是否开启
    disabled: !flags[flagName], // 是否关闭
  };
}

// ---- 使用示例 ----
function Dashboard() {
  const { enabled: showNewDashboard } = useFeatureFlag("newDashboard");

  return showNewDashboard ? (
    <div style={{ background: "#e6f7ff", padding: 20 }}>
      <h3>新版仪表盘</h3>
      <p>包含实时数据大屏、交互式图表等新功能</p>
    </div>
  ) : (
    <div style={{ background: "#f5f5f5", padding: 20 }}>
      <h3>经典仪表盘</h3>
      <p>基础数据展示</p>
    </div>
  );
}

function ExportTools() {
  const { enabled: canExportPDF } = useFeatureFlag("exportPDF");

  return (
    <div>
      {canExportPDF && <button>📄 导出 PDF</button>}
      <button>📊 导出 Excel</button>
      {!canExportPDF && canExportPDF === false && (
        <span style={{ color: "#999" }}> （PDF 导出功能尚未开放）</span>
      )}
    </div>
  );
}

export default function App() {
  return (
    <FeatureFlagProvider>
      <div style={{ padding: 20 }}>
        <h2>功能开关演示</h2>
        <Dashboard />
        <br />
        <ExportTools />
      </div>
    </FeatureFlagProvider>
  );
}

import React from "react";

// ---- 自封装 Show 组件 ----
function Show({ when, fallback = null, children }) {
  // when 条件为真 → 渲染 children
  // when 条件为假 → 渲染 fallback（默认为 null，即不渲染）
  return when ? children : fallback;
}

// ---- 使用示例 ----
function Demo() {
  const [isEditing, setIsEditing] = React.useState(false);
  const [content, setContent] = React.useState("这是一段可编辑的内容");

  return (
    <div style={{ padding: 20 }}>
      <Show when={isEditing} fallback={<p>{content}</p>}>
        <div>
          <textarea
            value={content}
            onChange={(e) => setContent(e.target.value)}
            rows={4}
          />
          <br />
          <button onClick={() => setIsEditing(false)}>保存</button>
        </div>
      </Show>

      <button onClick={() => setIsEditing(!isEditing)}>
        {isEditing ? "取消编辑" : "编辑内容"}
      </button>
    </div>
  );
}

export default function App() {
  return <Demo />;
}

// ⚠️ 注意：Show 作为组件，其 children 始终会被创建（JSX 的求值规则）
function PotentialIssue() {
  const [user, setUser] = React.useState(null);

  return (
    <Show when={!!user}>
      {/* 即使 user 为 null，这行 JSX 的 <div> 也会被创建！
          只不过不会被渲染到 DOM 中 */}
      <div>欢迎，{user.name}</div>
      {/* 如果 user 是 null，访问 user.name 会报错！ */}
    </Show>
  );
}

// ✅ 解决方案：使用 render props 模式（函数作为 children）
function ShowSafe({ when, fallback = null, children }) {
  if (!when) return fallback;
  // children 是函数时才调用，避免提前求值
  return typeof children === "function" ? children() : children;
}

function FixedDemo() {
  const [user, setUser] = React.useState(null);

  return (
    <ShowSafe when={!!user} fallback={<p>请先登录</p>}>
      {/* 传入函数，只在条件满足时才执行 */}
      {() => <div>欢迎，{user.name}</div>}
    </ShowSafe>
  );
}

import React, { useState } from "react";

// 计数器组件 —— 内部维护自己的计数状态
function Counter({ label }) {
  const [count, setCount] = useState(0);

  console.log(`${label} 渲染了，当前计数：${count}`);

  return (
    <div style={{ border: "1px solid #ddd", padding: 10, margin: 5 }}>
      <h4>{label}</h4>
      <p>计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

function Demo() {
  const [showCounter, setShowCounter] = useState(true);

  return (
    <div style={{ padding: 20 }}>
      <h3>组件卸载演示</h3>
      <button onClick={() => setShowCounter(!showCounter)}>
        {showCounter ? "隐藏" : "显示"}计数器
      </button>

      <p>
        当前 showCounter = <b>{String(showCounter)}</b>
      </p>

      {/* 条件渲染：计数器在隐藏/显示之间切换 */}
      {showCounter && <Counter label="组件A" />}
    </div>
  );
}

export default function App() {
  return <Demo />;
}

function KeepStateDemo() {
  const [showCounter, setShowCounter] = useState(true);

  return (
    <div>
      {/* 方案 1：使用 CSS display:none 替代条件卸载 */}
      <div style={{ display: showCounter ? "block" : "none" }}>
        <Counter label="方案1：display控制" />
      </div>

      {/* 方案 2：使用同一个 key 保持组件实例 */}
      {/* 注意：如果同位置切换不同的组件，key 相同则会复用 */}
      {showCounter ? (
        <Counter key="counter" label="方案2：key控制" />
      ) : (
        <div key="counter" style={{ padding: 10 }}>
          计数器已隐藏
        </div>
      )}
    </div>
  );
}

import React, { useState, useRef, useEffect } from "react";

function InputWithLabel({ label, type }) {
  const inputRef = useRef(null);
  const [value, setValue] = useState("");

  useEffect(() => {
    console.log(`${label} 组件挂载`);
    return () => console.log(`${label} 组件卸载`);
  }, [label]);

  return (
    <div>
      <label>{label}：</label>
      <input
        ref={inputRef}
        type={type}
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder={`请输入${label}`}
      />
    </div>
  );
}

function TabSwitchDemo() {
  const [tab, setTab] = useState("login");

  return (
    <div style={{ padding: 20 }}>
      <h3>Tab 切换演示</h3>
      <div style={{ marginBottom: 10 }}>
        <button onClick={() => setTab("login")}>登录</button>
        <button onClick={() => setTab("register")}>注册</button>
      </div>

      {/* ===== 反例：没有 key，React 可能错误复用 ===== */}
      <h4>❌ 反例：无 key</h4>
      <div style={{ border: "1px solid red", padding: 10, marginBottom: 10 }}>
        {tab === "login" ? (
          <InputWithLabel label="邮箱" type="email" />
        ) : (
          <InputWithLabel label="手机号" type="tel" />
        )}
        {/* 问题：切换 tab 时，由于两个 input 在 DOM 中的位置相同，
            React 可能会复用同一个 DOM 节点和组件实例，
            导致输入框中的文字被保留，但 label 和 type 改变 */}
      </div>

      {/* ===== 正例：添加 key，确保切换时重建组件 ===== */}
      <h4>✅ 正例：有 key</h4>
      <div style={{ border: "1px solid green", padding: 10 }}>
        {tab === "login" ? (
          <InputWithLabel key="login" label="邮箱" type="email" />
        ) : (
          <InputWithLabel key="register" label="手机号" type="tel" />
        )}
        {/* 不同的 key 告诉 React：
            "这是一个完全不同的组件，请卸载旧的，创建新的" */}
      </div>
    </div>
  );
}

export default function App() {
  return <TabSwitchDemo />;
}

// ===== Server Component（.server.jsx 或在 App Router 中默认是服务端组件）=====

// ✅ 可以在服务端组件中做条件渲染，逻辑在服务端执行
async function ServerProductPage({ productId }) {
  const product = await db.product.findUnique({ where: { id: productId } });

  // 服务端的条件渲染：没有找到商品 → 返回 404
  if (!product) {
    return <NotFound />;
  }

  return (
    <div>
      <h1>{product.name}</h1>
      {/* 条件渲染：根据库存显示不同状态 */}
      {product.stock > 0 ? (
        <AddToCartButton productId={product.id} />  {/* 客户端组件 */}
      ) : (
        <span>已售罄</span>
      )}
    </div>
  );
}

// ⚠️ 注意：Server Component 中不能使用 useState、useEffect 等客户端 Hook
// 不能使用 onClick、onChange 等事件处理器

// ===== Client Component（'use client' 指令标记）=====

"use client";

import { useState, useEffect } from "react";

function ClientDashboard() {
  const [theme, setTheme] = useState("light");

  // ✅ 客户端组件的条件渲染：可以使用所有 React 特性
  useEffect(() => {
    const savedTheme = localStorage.getItem("theme");
    if (savedTheme) setTheme(savedTheme);
  }, []);

  return (
    <div
      className={
        theme === "dark" ? "bg-black text-white" : "bg-white text-black"
      }
    >
      {/* 客户端的交互式条件渲染 */}
      <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
        切换主题
      </button>
    </div>
  );
}

"use client";

function HydrationSafe() {
  // ❌ 危险：服务端和客户端可能产生不同的渲染结果
  function DangerousComponent() {
    // 服务端没有 window 对象，这里会出问题
    const isMobile = typeof window !== "undefined" && window.innerWidth < 768;

    return isMobile ? <MobileLayout /> : <DesktopLayout />;
    // 水合时可能会报错：
    // "Text content does not match server-rendered HTML"
  }

  // ✅ 安全做法：使用 useEffect + useState 延迟判断
  function SafeComponent() {
    const [isMobile, setIsMobile] = useState(false);

    useEffect(() => {
      setIsMobile(window.innerWidth < 768);
    }, []);

    return isMobile ? <MobileLayout /> : <DesktopLayout />;
  }

  return <SafeComponent />;
}

import React, { useState, useMemo } from "react";

function ExpensiveList({ items, filter }) {
  // ❌ 每次渲染都重新执行 filter 和 map
  // const filteredItems = items.filter(item => item.category === filter);

  // ✅ 只在 items 或 filter 变化时才重新计算
  const filteredItems = useMemo(
    () => items.filter((item) => item.category === filter),
    [items, filter],
  );

  // ✅ 将条件渲染的整个 JSX 分支缓存
  const listContent = useMemo(() => {
    if (filteredItems.length === 0) {
      return <p>当前分类下暂无商品</p>;
    }

    return (
      <ul>
        {filteredItems.map((item) => (
          <li key={item.id}>
            {item.name} - ¥{item.price}
          </li>
        ))}
      </ul>
    );
  }, [filteredItems]); // 只在筛选结果变化时重新生成 JSX

  return (
    <div>
      <h3>商品列表（{filteredItems.length} 件）</h3>
      {listContent}
    </div>
  );
}

// React Compiler 能自动识别出 greetAdmin 只依赖 role
// 并自动进行缓存优化，不需要手动写 useMemo
function Greeting({ user }) {
  // 编译器会自动分析并优化这个条件渲染
  return (
    <div>
      {user.role === "admin" ? (
        <h1>欢迎回来，管理员 {user.name}</h1>
      ) : (
        <h1>你好，{user.name}</h1>
      )}
    </div>
  );
}

// ❌ 问题：每次父组件渲染，都会创建新的 <ExpensiveChild>
// 即使条件判断的结果没变
function ParentProblem({ user }) {
  return (
    <div>
      <h1>欢迎</h1>
      {user.isVip && <ExpensiveChild data={user.preferences} />}
      {/* 每次渲染时 React 都要重新创建 ExpensiveChild 的 JSX 描述对象 */}
    </div>
  );
}

// ✅ 优化思路 1：将条件渲染的部分抽取为独立组件
function ParentOptimized({ user }) {
  return (
    <div>
      <h1>欢迎</h1>
      <VipSection user={user} />
    </div>
  );
}

// 使用 React.memo 避免不必要的重渲染
const VipSection = React.memo(function VipSection({ user }) {
  if (!user.isVip) return null; // 非 VIP，不渲染任何内容

  return <ExpensiveChild data={user.preferences} />;
});

import React, { useState } from "react";

// ---- 定义用户类型 ----
interface User {
  id: number;
  name: string;
  role: "admin" | "editor" | "viewer";
  avatar?: string; // 可选属性
  lastLogin?: Date; // 可选属性
}

// ---- 为条件渲染的 props 添加类型约束 ----
interface DashboardProps {
  user: User | null; // user 可能为 null（未登录）
}

function Dashboard({ user }: DashboardProps) {
  // ✅ TypeScript 会强制要求处理 user 为 null 的情况
  if (!user) {
    return <div>请先登录</div>;
  }

  // 在这里 TypeScript 知道 user 一定不是 null（类型收窄）
  return (
    <div>
      <h2>欢迎，{user.name}</h2>

      {/* ✅ 条件渲染可选属性：TypeScript 强制检查 */}
      {user.avatar ? (
        <img src={user.avatar} alt={user.name} />
      ) : (
        <div className="default-avatar">{user.name[0].toUpperCase()}</div>
      )}

      {/* ✅ 条件渲染角色相关内容 */}
      {user.role === "admin" ? (
        <AdminTools />
      ) : user.role === "editor" ? (
        <EditorTools />
      ) : (
        <ViewOnlyTools />
      )}
    </div>
  );
}

// ---- 泛型约束条件渲染 Hook ----
function useConditionalRender<T>(value: T | null | undefined): {
  exists: boolean;
  value: T;
} {
  return {
    exists: value !== null && value !== undefined,
    value: value as T,
  };
}

// ---- 使用示例 ----
function UserProfile({ user }: { user: User | null }) {
  const { exists, value: safeUser } = useConditionalRender(user);

  return (
    <div>
      {exists ? (
        <div>
          <h3>{safeUser.name}</h3>
          <p>角色：{safeUser.role}</p>
        </div>
      ) : (
        <p>用户不存在</p>
      )}
    </div>
  );
}

function NullTrap() {
  const [data, setData] = useState(null);
  // data 初始值为 null

  return (
    <div>
      {/* ❌ 错误：data 为 null 时，访问 data.items 会报错 */}
      {data.items.length > 0 && <List items={data.items} />}
      {/* TypeError: Cannot read properties of null */}

      {/* ✅ 正确：先判断 data 是否存在 */}
      {data && data.items.length > 0 && <List items={data.items} />}

      {/* ✅ 更好：使用可选链（Optional Chaining） */}
      {(data?.items?.length ?? 0) > 0 && <List items={data.items} />}
    </div>
  );
}

function AsyncTrap() {
  const [userId, setUserId] = useState(1);
  const [user, setUser] = useState(null);

  useEffect(() => {
    // 模拟 API 请求
    let cancelled = false;

    fetch(`/api/users/${userId}`)
      .then((res) => res.json())
      .then((data) => {
        if (!cancelled) setUser(data);
      });

    return () => {
      cancelled = true;
    };
  }, [userId]);

  return (
    <div>
      {/* ⚠️ 时序问题：当 userId 快速切换时，可能出现"新 userId 但旧 user 数据"的情况 */}
      {/* 比如：先请求 userId=1，再快速切换到 userId=2 */}
      {/* 如果请求 2 先返回，请求 1 后返回，最终会显示 userId=2 但 username 来自 id=1 */}

      {user && <p>用户名：{user.name}</p>}

      {/* ✅ 补充校验：确保返回的用户 ID 与当前请求的 ID 一致 */}
      {user && user.id === userId ? (
        <p>用户名：{user.name}</p>
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
}

import React, { useState, useRef, useEffect } from "react";

function RefTrap() {
  const [showInput, setShowInput] = useState(false);
  const inputRef = useRef(null);

  useEffect(() => {
    // ❌ 危险：showInput 为 false 时，inputRef.current 是 null
    // inputRef.current.focus();  // TypeError: Cannot read properties of null

    // ✅ 安全做法：先判断 ref 是否存在
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, [showInput]);

  return (
    <div>
      <button onClick={() => setShowInput(!showInput)}>
        {showInput ? "隐藏" : "显示"}输入框
      </button>

      {showInput && <input ref={inputRef} placeholder="我会自动获得焦点" />}
    </div>
  );
}

function HomePage() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [username] = useState("小明");

  // 你的代码...
}

function Demo() {
  const [show, setShow] = useState(true);

  return (
    <div>
      <button onClick={() => setShow(!show)}>切换</button>
      <AnimatedShow when={show} duration={300} animation="fade">
        <div style={{ padding: 40, background: "#e6f7ff" }}>
          我会带着动画出现和消失！
        </div>
      </AnimatedShow>
    </div>
  );
}