React 进阶

问题：一个组件的渲染错误导致整个页面崩溃

用户操作 → 某个子组件抛出错误 → 整个组件树卸载 → 白屏

解决：Error Boundary 捕获错误，只卸载出错的子树，其余部分正常运行

用户操作 → 某个子组件抛出错误 → Error Boundary 捕获 → 显示降级 UI → 其余组件正常

┌───────────────────────────────────────┐
│         ThemeProvider (Context)        │  ← value 变了
└─────────────────┬─────────────────────┘
                  │
      ┌───────────┼───────────┐
      ▼           ▼           ▼
  ┌──────┐   ┌──────┐   ┌──────┐
  │Comp A│   │Comp B│   │Comp C│   ← 全部 re-render，即使只用了部分数据
  └──────┘   └──────┘   └──────┘

// 问题：Context 值变化时，所有 Consumer 都会 re-render
const ThemeContext = createContext({ theme: "light", lang: "zh" });

// CompA 只用了 theme，CompB 只用了 lang
// 但 theme 变化时，CompB 也会 re-render（即使 lang 没变）

// 解决方案 1：拆分 Context
const ThemeContext = createContext("light");
const LangContext = createContext("zh");
// theme 变化时，只有 ThemeContext 的 Consumer re-render

// 解决方案 2：用 useMemo 稳定 Context 值
function App() {
  const [theme, setTheme] = useState("light");
  const value = useMemo(() => ({ theme, setTheme }), [theme]);
  return <ThemeContext.Provider value={value}>...</ThemeContext.Provider>;
}

// 解决方案 3：使用原子化状态库（Jotai、Zustand）
// 精准订阅，只有用到的组件 re-render

// 服务端组件：只在服务端运行，不发送 JS 到客户端
async function UserProfile({ userId }) {
  const user = await db.query("SELECT * FROM users WHERE id = ?", [userId]);
  return <div>{user.name}</div>;
  // 客户端只收到渲染结果，不需要这个组件的代码
}

// 关键规则：服务端组件可以导入客户端组件，但客户端组件不能导入服务端组件
// 客户端组件可以接收服务端组件作为 children prop

// 客户端组件（另一个文件）：发送到客户端，需要 Hydration
"use client"; // 必须是该文件的第一条语句，且在 import 之前

import { useState } from "react";

function LikeButton() {
  const [liked, setLiked] = useState(false);
  return (
    <button onClick={() => setLiked(!liked)}>{liked ? "Liked" : "Like"}</button>
  );
}

// 受控组件：React 是"单一数据源"
function ControlledInput() {
  const [value, setValue] = useState("");
  return (
    <input
      value={value} // React 控制值
      onChange={(e) => setValue(e.target.value)} // 每次输入都更新 state
    />
  );
}
// 优势：实时验证、动态禁用、格式化输入

// 非受控组件：DOM 自己管理值
function UncontrolledInput() {
  const inputRef = useRef();
  const handleSubmit = () => {
    console.log(inputRef.current.value); // 提交时才从 DOM 读取值
  };
  return <input ref={inputRef} defaultValue="初始值" />;
}
// 优势：集成非 React 代码、文件上传、性能敏感场景

Vue 的 keep-alive 思路：
  组件实例自带状态 → 切走时缓存实例 → 切回时恢复实例 + 状态

React 的设计思路：
  状态属于数据层（Redux/Zustand） → 组件只是状态的"视图" → 卸载重建无所谓

并发模式的调度行为：

React：我预渲染了 TabB 的内容，但用户没点过去，我决定丢弃它
  → 如果有 keep-alive，这个"丢弃"就变成了"缓存"，语义冲突

React：用户切换到 TabB，但优先级不够高，我先中断渲染去做更重要的事
  → 如果有 keep-alive，缓存的实例可能和当前 props 不同步

function TabContainer() {
  // 状态在父组件，子组件卸载不影响
  const [tabAData, setTabAData] = useState([]);
  const [tabBData, setTabBData] = useState([]);
  const [activeTab, setActiveTab] = useState("A");

  return (
    <>
      <TabBar active={activeTab} onChange={setActiveTab} />
      {activeTab === "A" && <TabA data={tabAData} onChange={setTabAData} />}
      {activeTab === "B" && <TabB data={tabBData} onChange={setTabBData} />}
    </>
  );
  // Tab 切换时组件会卸载重建，但数据不丢失
}

import { useRef, useState } from "react";

function KeepAlive({ children, activeKey }) {
  const cacheRef = useRef(new Map());

  // 缓存当前活跃的组件
  if (!cacheRef.current.has(activeKey)) {
    cacheRef.current.set(activeKey, children);
  }

  // 渲染所有缓存的组件，用 display 控制显隐
  return (
    <>
      {Array.from(cacheRef.current.entries()).map(([key, vnode]) => (
        <div
          key={key}
          style={{ display: key === activeKey ? "block" : "none" }}
        >
          {vnode}
        </div>
      ))}
    </>
  );
}

// 使用
function App() {
  const [activeTab, setActiveTab] = useState("A");
  return (
    <KeepAlive activeKey={activeTab}>
      {activeTab === "A" ? <TabA /> : <TabB />}
    </KeepAlive>
  );
}

# react-activation：最接近 Vue keep-alive 的实现
npm install react-activation

# 使用
import { AliveScope, KeepAlive } from 'react-activation';

function App() {
  return (
    <AliveScope>
      <KeepAlive name="TabA">
        <TabA />
      </KeepAlive>
      <KeepAlive name="TabB">
        <TabB />
      </KeepAlive>
    </AliveScope>
  );
}

import {
  useRef,
  useEffect,
  useCallback,
  createContext,
  useContext,
} from "react";

const KeepAliveContext = createContext();

// 提供缓存容器
function AliveScope({ children }) {
  const cacheRef = useRef(new Map());

  const keep = useCallback((id, dom) => {
    cacheRef.current.set(id, dom);
  }, []);

  const release = useCallback((id) => {
    cacheRef.current.delete(id);
  }, []);

  return (
    <KeepAliveContext.Provider value={{ keep, release, cache: cacheRef }}>
      {children}
      <div id="alive-container" style={{ display: "none" }}>
        {/* 缓存的 DOM 节点存放在这里 */}
      </div>
    </KeepAliveContext.Provider>
  );
}

// 缓存组件的 DOM
function KeepAlive({ id, children }) {
  const containerRef = useRef();
  const { keep, release, cache } = useContext(KeepAliveContext);

  useEffect(() => {
    const container = document.getElementById("alive-container");
    const cachedDom = cache.current.get(id);

    if (cachedDom) {
      // 从缓存中恢复 DOM
      containerRef.current.appendChild(cachedDom);
    }

    return () => {
      // 卸载时把 DOM 移到缓存容器，而不是销毁
      if (containerRef.current?.firstChild) {
        container.appendChild(containerRef.current.firstChild);
      }
    };
  }, [id]);

  return <div ref={containerRef}>{children}</div>;
}

// Suspense 的核心机制（伪代码，便于理解流程，函数名并非源码中的真实 API）
function renderRoot(root) {
  try {
    // 尝试渲染组件树
    workLoopSync();
  } catch (thrownValue) {
    // 如果组件 throw 了一个 Promise（thenable）
    if (isThenable(thrownValue)) {
      // 在 Fiber 树上向上查找最近的 Suspense boundary
      const suspenseBoundary = findNearestSuspenseBoundary();
      // 将该 boundary 标记为挂起，本次提交渲染 fallback
      markSuspenseBoundarySuspended(suspenseBoundary);
      // 等待 Promise resolve 后重新调度该 boundary 的渲染
      thrownValue.then(() => {
        scheduleUpdateOnFiber(suspenseBoundary);
      });
    }
  }
}