React 专题

interface Fiber {
  // 静态结构
  tag: WorkTag              // 函数组件 / 类组件 / 原生元素 ...
  type: any                 // 函数 / 类 / 标签名
  key: string | null

  // 树结构（链表代替递归栈）
  return: Fiber | null      // 父节点
  child: Fiber | null       // 第一个子节点
  sibling: Fiber | null     // 下一个兄弟节点

  // 工作状态
  alternate: Fiber | null  // 双缓冲：当前帧 ↔ 工作帧
  pendingProps: any
  memoizedProps: any
  memoizedState: any        // Hooks 链表头（函数组件）

  // 副作用
  flags: SideEffectFlags    // Placement / Update / Deletion ...
  subtreeFlags: number      // 子树副作用汇总（快速跳过无变化子树）
  updateQueue: UpdateQueue | null
}

current 树  ← 屏幕上正在显示的
    ↕  alternate
workInProgress 树  ← 正在构建的下一帧

// 每个 Hook 是链表节点
interface Hook {
  memoizedState: any    // 当前值
  queue: UpdateQueue    // 待更新队列（useState）
  next: Hook | null     // 下一个 Hook
}

// Fiber.memoizedState → Hook1 → Hook2 → Hook3 → null

// useState 本质是 useReducer 的语法糖
const [state, dispatch] = useReducer(basicStateReducer, initialState)

dispatch(action)
  ↓
创建 Update 对象，加入 Hook.queue 环形链表
  ↓
调度渲染（scheduleUpdateOnFiber）
  ↓
下次渲染时，从 queue 中取出所有 update，逐个 reduce
  ↓
得到新 memoizedState

Commit 阶段详细顺序:
├── Before Mutation
│   └── useInsertionEffect 回调
├── Mutation
│   └── 执行 DOM 操作（插入/更新/删除）
└── Layout
    ├── useLayoutEffect 回调
    ├── ref 回调
    └── ↓ 浏览器绘制后
        └── useEffect 回调（异步调度）

// useRef 返回 { current: initialValue }
// 修改 .current 不触发渲染
// 在整个生命周期中保持引用稳定

// 典型用途
const inputRef = useRef<HTMLInputElement>(null)  // DOM 引用
const prevValueRef = useRef(props.value)          // 上一次的值
const timerRef = useRef<number>()                 // 存储 ID

const ThemeContext = createContext<'light' | 'dark'>('light')

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Page />
    </ThemeContext.Provider>
  )
}

function Button() {
  const theme = useContext(ThemeContext) // "dark"
}

// 命名：use 前缀
function useWindowSize() {
  const [size, setSize] = useState({ width: 0, height: 0 })

  useEffect(() => {
    const handler = () => setSize({ width: innerWidth, height: innerHeight })
    handler()
    window.addEventListener('resize', handler)
    return () => window.removeEventListener('resize', handler)
  }, [])

  return size
}

const [isPending, startTransition] = useTransition()

function handleSearch(input: string) {
  // 紧急更新：输入框立即响应
  setSearchInput(input)

  // 非紧急更新：搜索结果可以延迟
  startTransition(() => {
    setSearchQuery(input) // 可被点击/输入等高优更新打断
  })
}

const [search, setSearch] = useState('')
const deferredSearch = useDeferredValue(search)

// deferredSearch 是 search 的延迟版本
// 当有更高优先级更新时，deferredSearch 保持旧值
// 空闲时自动更新为新值

<Suspense fallback={<Spinner />}>
  <AsyncData /> {/* 内部 throw Promise 触发 Suspense */}
</Suspense>

SSR 流式渲染流程:
├── 服务端发送 HTML 骨架
├── 遇到 Suspense 边界 → 先发送 fallback
├── 异步数据就绪 → 流式发送真实内容（替换 fallback）
└── 客户端 Hydration 同样按 Suspense 边界渐进

Server Component
  ├── 可直接 async/await 获取数据
  ├── 可导入其他 Server Component
  ├── 可将 Client Component 作为子组件渲染
  └── 不可使用 useState / useEffect / 事件处理

Client Component
  ├── 可使用全部 Hooks
  ├── 可处理用户交互
  ├── 不可导入 Server Component
  │   （可接收 Server Component 作为 children / props）
  └── 数据通过 props / Client Hook 获取

// React.lazy + Suspense
const HeavyChart = React.lazy(() => import('./HeavyChart'))

function Dashboard() {
  return (
    <Suspense fallback={<Skeleton />}>
      <HeavyChart />
    </Suspense>
  )
}

import { FixedSizeList } from 'react-window'

function BigList({ items }) {
  return (
    <FixedSizeList height={600} itemCount={items.length} itemSize={50}>
      {({ index, style }) => (
        <div style={style}>{items[index].name}</div>
      )}
    </FixedSizeList>
  )
}

组件内状态 → useState/useReducer
├── 跨层级但范围小 → useContext + useReducer
│   └── 问题：Context 值变 → 所有消费者重渲染
├── 多组件频繁共享 → Zustand / Jotai
│   └── 优势：按订阅粒度更新，不重渲染无关组件
└── 大型应用 + 时间旅行 → Redux Toolkit
    └── 配合 RTK Query 可统一服务端状态

class ErrorBoundary extends React.Component<
  { children: React.ReactNode; fallback?: React.ReactNode },
  { hasError: boolean; error?: Error }
> {
  state = { hasError: false, error: undefined }

  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error }
  }

  componentDidCatch(error: Error, info: React.ErrorInfo) {
    logErrorToService(error, info.componentStack)
  }

  render() {
    if (this.state.hasError) return this.props.fallback ?? <h1>出错了</h1>
    return this.props.children
  }
}

// 使用
<ErrorBoundary fallback={<ErrorPage />}>
  <App />
</ErrorBoundary>