Stack Reconciler (React 15):
用户输入 → 触发更新 → 开始渲染 1000 个组件 → 🚫 无法中断 → 全部渲染完 → 响应用户输入
结果：用户打字卡顿，可能丢失字符

Fiber (React 16+):
用户输入 → 触发更新 → 渲染前 50 个组件 → ✅ 检查是否有高优先级任务
→ 发现用户继续输入 → 暂停渲染，先处理输入 → 继续渲染下一批...
结果：输入流畅，渲染在后台分片完成

function renderTree(node) {
  // 🚫 一旦开始，必须一口气完成
  renderNode(node);
  if (node.children) {
    node.children.forEach(child => renderTree(child)); // 递归调用
  }
}
// 调用栈会一直增长，无法中途暂停

function workLoop() {
  let workInProgress = fiberRoot;
  
  while (workInProgress !== null) {
    // ✅ 每处理一个节点，都可以检查是否需要暂停
    if (shouldYield()) {
      // 时间切片用完了，或者有更高优先级任务
      return; // 暂停，下次从 workInProgress 继续
    }
    
    performUnitOfWork(workInProgress);
    workInProgress = nextUnitOfWork; // 链表指向下一个节点
  }
}

// 简化的 workLoop 逻辑
function workLoopConcurrent() {
  while (workInProgress !== null && !shouldYield()) {
    // performUnitOfWork 处理单个 Fiber 节点
    performUnitOfWork(workInProgress);
  }
}

function shouldYield() {
  // 检查是否应该暂停
  return getCurrentTime() >= deadline;
}

// 初始状态
<ul>
  <li key="a">Apple</li>
  <li key="b">Banana</li>
  <li key="c">Cherry</li>
</ul>

// 用户操作：把 Apple 移到最后
<ul>
  <li key="b">Banana</li>
  <li key="c">Cherry</li>
  <li key="a">Apple</li>
</ul>

旧: [0:Apple, 1:Banana, 2:Cherry]
新: [0:Banana, 1:Cherry, 2:Apple]

Diff 结果：
- 位置 0: Apple → Banana (更新文本)
- 位置 1: Banana → Cherry (更新文本)
- 位置 2: Cherry → Apple (更新文本)
结果：3 次 DOM 更新，且组件状态会错位！

旧: [key:a→Apple, key:b→Banana, key:c→Cherry]
新: [key:b→Banana, key:c→Cherry, key:a→Apple]

Diff 结果：
- 找到 key:b → 复用节点，移动位置
- 找到 key:c → 复用节点，移动位置
- 找到 key:a → 复用节点，移动位置
结果：3 次 DOM 移动操作，无内容更新，组件状态保持正确！

// 这种情况会销毁整个子树
<div>
  <Counter />
</div>

// 变成
<span>
  <Counter />
</span>

// 情况 1：组件类型相同，props 不同
<Counter count={1} />
// ↓
<Counter count={2} />
// React: "类型相同，复用组件实例，只更新 props"

// 情况 2：组件类型不同
<LoginForm />
// ↓
<UserProfile />
// React: "类型不同，这是两个完全不同的组件！"

function LoginForm() {
  const [username, setUsername] = useState('');
  
  useEffect(() => {
    // 表单验证的定时器
    const timer = setInterval(validateForm, 1000);
    return () => clearInterval(timer);
  }, []);
  
  return <input value={username} onChange={e => setUsername(e.target.value)} />;
}

function UserProfile({ user }) {
  const [isEditing, setIsEditing] = useState(false);
  
  useEffect(() => {
    // 加载用户数据的 API 调用
    fetchUserData(user.id);
  }, [user.id]);
  
  return <div>{user.name}</div>;
}

Render 完成 → Commit（DOM 突变 + Effects 执行）→ 浏览器绘制

// React 17
Render → Commit → 🎨 绘制 → useEffect 执行

// React 18
Render → Commit → 🎨 绘制 → useEffect 执行（延迟到绘制后）

// 并发渲染中
Render (可中断) → Commit (DOM 突变) → useLayoutEffect (同步) → 🎨 绘制

function SearchBox() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  
  function handleInput(e) {
    const value = e.target.value;
    
    // 紧急更新：立即响应
    setQuery(value);
    
    // 过渡更新：可以被打断
    startTransition(() => {
      const filtered = expensiveFilter(value);
      setResults(filtered);
    });
  }
  
  return (
    <>
      <input value={query} onChange={handleInput} />
      <List items={results} />
    </>
  );
}

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    fetchUser(userId).then(u => {
      setUser(u);
      setLoading(false);
    });
  }, [userId]);
  
  if (loading) return <div>Loading...</div>;
  return <div>{user.name}</div>;
}

function UserProfile({ userId }) {
  const user = use(fetchUser(userId)); // 直接"读取"数据
  return <div>{user.name}</div>;
}

// 父组件包裹 Suspense
<Suspense fallback={<Loading />}>
  <UserProfile userId={123} />
</Suspense>

// React 18 的 use() Hook 内部逻辑（简化版）
function use(promise) {
  const state = readCache(promise);
  
  if (state === 'pending') {
    // 数据还没好，抛出同一个 Promise
    throw promise;
  }
  
  if (state === 'rejected') {
    throw state.error;
  }
  
  return state.value;
}

// 服务端代码
const { pipe } = renderToPipeableStream(
  <App />,
  {
    onShellReady() {
      // 外壳（Skeleton）已渲染完成，可以开始流式传输
      res.setHeader('Content-Type', 'text/html');
      pipe(res);
    }
  }
);

1. 打开 React DevTools → Profiler 标签
2. 点击"开始录制"
3. 执行用户操作（如点击按钮）
4. 停止录制，查看火焰图
5. 识别耗时最长的组件（红色/橙色）
6. 分析为什么这个组件会重新渲染

1. 打开 Chrome DevTools → Performance 标签
2. 点击"录制"
3. 执行用户操作
4. 停止录制，查看时间线
5. 找到 Main 线程上的长任务（红色块）
6. 展开查看具体的函数调用栈

const start = performance.now();
// 执行某个操作
const end = performance.now();
console.log(`耗时：${end - start}ms`);

function Parent() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetchData().then(setData);
  }, []);
  
  return <Child data={data} />;
}

function Child({ data }) {
  const [processed, setProcessed] = useState(null);
  
  useEffect(() => {
    if (data) {
      // 问题：data 变化时，触发新的状态更新
      const result = processData(data);
      setProcessed(result);
    }
  }, [data]);
  
  return <div>{processed}</div>;
}

// 方案 1：在渲染时直接处理，避免 useEffect
function Child({ data }) {
  if (!data) return null;
  const processed = processData(data); // 直接在渲染时计算
  return <div>{processed}</div>;
}

// 方案 2：用 useMemo 缓存处理结果
function Child({ data }) {
  const processed = useMemo(() => {
    if (!data) return null;
    return processData(data);
  }, [data]);
  
  return <div>{processed}</div>;
}

1. 先测量（Profiler）→ 2. 再分析（根因）→ 3. 最后优化（针对性策略）

// Context: 当 value 变化时，所有消费者都会重渲染
<CartContext.Provider value={{ state, dispatch }}>
  {children}
</CartContext.Provider>

// 组件订阅整个 Context
const { state, dispatch } = useContext(CartContext);
// ⚠️ 即使只用 dispatch，state 变化时也会重渲染

// Zustand: 组件只订阅它需要的部分
const items = useCartStore((state) => state.items);
// ✅ 只有 items 变化时才重渲染，其他状态变化不影响

const total = useCartStore((state) => state.total);
// ✅ total 变化时，上面那个组件不会重渲染

// 简化版 Zustand 实现思路
function createStore(reducer) {
  let state = reducer(undefined, { type: '@@INIT' });
  const listeners = new Set(); // 存储所有订阅者
  
  function subscribe(selector, listener) {
    listeners.add({ selector, listener });
  }
  
  function dispatch(action) {
    const oldState = state;
    state = reducer(state, action);
    
    // 通知所有订阅者
    listeners.forEach(({ selector, listener }) => {
      const oldSelected = selector(oldState);
      const newSelected = selector(state);
      
      // 只有选择的部分发生变化时，才触发重渲染
      if (oldSelected !== newSelected) {
        listener();
      }
    });
  }
  
  return { getState: () => state, dispatch, subscribe };
}

// 用 Context 实现细粒度优化，需要手动做很多工作
function ProductList() {
  const { dispatch } = useContext(CartDispatchContext); // 拆分 Context
  return <button onClick={...}>添加</button>;
}

// 用 Zustand，自动获得细粒度更新
function ProductList() {
  const dispatch = useCartStore((state) => state.dispatch); // 自动优化
  return <button onClick={...}>添加</button>;
}

┌─────────────────────────────────────┐
│   Layer 4: 服务端状态缓存层          │
│   (React Query / SWR / RTK Query)   │
│   - 商品列表、订单详情、用户信息     │
│   - 自动缓存、去重、后台更新         │
└─────────────────────────────────────┘
              ↓
┌─────────────────────────────────────┐
│   Layer 3: 全局客户端状态层          │
│   (Zustand / Redux / Jotai)         │
│   - 购物车、主题设置、权限状态       │
│   - 跨组件共享、持久化               │
└─────────────────────────────────────┘
              ↓
┌─────────────────────────────────────┐
│   Layer 2: 组件本地状态层            │
│   (useState / useReducer)           │
│   - 表单输入、模态框、展开/收起      │
│   - 无需共享、频繁更新               │
└─────────────────────────────────────┘
              ↓
┌─────────────────────────────────────┐
│   Layer 1: URL 状态层                │
│   (React Router / searchParams)     │
│   - 筛选条件、分页、排序             │
│   - 可分享、可书签、可后退           │
└─────────────────────────────────────┘

                    ┌─────────────────┐
                    │ 需要这个状态吗？ │
                    └────────┬────────┘
                             │
              ┌──────────────┴──────────────┐
              │                            │
             是                           否
              │                            │
    ┌─────────┴─────────┐          ┌──────┴──────┐
    │ 多个组件需要访问？ │          │ 不需要状态  │
    └─────────┬─────────┘          │ （用常量）  │
              │                    └─────────────┘
    ┌─────────┴─────────┐
    │                  │
   是                 否
    │                  │
┌───┴────┐      ┌──────┴──────┐
│是服务端│      │  局部 UI 状态  │
│数据吗？ │      │ (useState)  │
└───┬────┘      └─────────────┘
    │
┌───┴────┐
│       │
是      否
│       │
│   ┌───┴────────┐
│   │ 需要跨页面 │
│   │ 分享/书签？ │
│   └───┬────────┘
│       │
│   ┌───┴────┐
│   │        │
│  是       否
│   │        │
│   │   ┌────┴─────┐
│   │   │         │
│   │  URL 状态  全局 Store
│   │   │    (Zustand)
│   │   │
│   │ React Query
│   │ / SWR
│
服务端状态缓存

服务器:
  1. 执行组件树（包括 db.query、fs.readFile、marked.parse）
  2. 生成 HTML + 注入数据（<script>window.__INITIAL_DATA__ = {...}</script>）
  3. 发送 HTML 给客户端

客户端:
  1. 下载 HTML → 立即显示（首屏快 ✅）
  2. 下载 JS bundle（可能 500KB+）
  3. **重新执行整个组件树**（包括 marked.parse 等重型库）
  4. 用注入的数据跳过 fetch，但组件函数本身要重新跑一遍
  5. 绑定事件监听器 → 页面可交互

// ✅ Server Component (只在服务器执行)
async function ProductPage({ id }) {
  const product = await db.query('SELECT * FROM products WHERE id = ?', id);
  const description = await fs.readFileSync(`./products/${id}.md`);
  const html = marked.parse(description); // marked 库不需要下载到客户端！
  
  return (
    <div>
      <h1>{product.name}</h1>
      <div dangerouslySetInnerHTML={{ __html: html }} />
      <AddToCartButton productId={id} /> {/* 👈 这是 Client Component */}
    </div>
  );
}

// ✅ Client Component (在客户端执行)
'use client';
function AddToCartButton({ productId }) {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>加入购物车 ({count})</button>;
}

// ✅ Server Component
async function ProductPage({ id }) {
  const product = await db.query('...', id);
  
  return (
    <div>
      <h1>{product.name}</h1>
      {/* 👇 传递 Client Component 作为 children */}
      <AddToCartButton productId={id}>
        <span>点击购买</span> {/* 这个 children 会在客户端渲染 */}
      </AddToCartButton>
    </div>
  );
}

// ✅ Client Component
'use client';
function AddToCartButton({ productId, children }) {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      {children} {/* 这里会渲染 Server Component 传来的 <span> */}
    </button>
  );
}

服务器执行 Server Component:
  1. 执行 db.query、fs.readFile 等服务器代码
  2. 遇到 <AddToCartButton> → 识别为 Client Component
  3. **不执行** AddToCartButton 的代码，只记录它的引用
  4. 将整个组件树序列化为一种特殊格式（RSC Payload）
     - 静态部分：HTML-like 结构
     - Client Component 引用：{"type": "client", "id": "./AddToCartButton.js"}
  5. 发送 Payload 给客户端

客户端接收 Payload:
  1. 解析 RSC Payload
  2. 看到 Client Component 引用 → 下载对应的 JS bundle
  3. 在正确的位置"挂载"Client Component
  4. Client Component 开始正常运行（useState、useEffect、onClick...）

┌─────────────────────────────────────────────────────────────┐
│                      SSR (传统服务端渲染)                    │
├─────────────────────────────────────────────────────────────┤
│ 服务器：执行组件 → 生成 HTML + 注入数据                       │
│ 客户端：下载所有 JS → **重新执行所有组件** → 绑定事件          │
│                                                             │
│ 问题：即使组件只是展示静态内容，客户端也要重新跑一遍代码！     │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│                  RSC (React Server Components)              │
├─────────────────────────────────────────────────────────────┤
│ 服务器：执行 Server Component → 生成 RSC Payload (序列化)    │
│ 客户端：解析 Payload → **只执行 Client Component**           │
│                                                             │
│ 优势：Server Component 的代码和依赖永远不下载到客户端！       │
└─────────────────────────────────────────────────────────