附录B 核心API速查

本附录提供React 19核心API的快速参考，包括Fiber节点属性、Flight协议格式和Hooks API。方便读者在开发和调试时快速查阅。

B.1 Fiber节点属性速查

Fiber节点是React内部的核心数据结构，每个React元素对应一个Fiber节点。本节列出Fiber节点的所有关键属性及其用途。

B.1.1 节点标识属性

属性	类型	说明	示例
`tag`	`WorkTag`	节点类型标识（数字）	`0`(FunctionComponent), `5`(HostComponent)
`key`	`null \| string`	列表中的唯一标识	`"item-1"`, `null`
`elementType`	`any`	React元素的类型	`MyComponent`, `"div"`
`type`	`any`	组件函数/类或元素类型	`function App(){}`, `"div"`
`stateNode`	`any`	对应的实例	DOM节点、类组件实例

WorkTag类型值：

WorkTag	值	说明
`FunctionComponent`	0	函数组件
`ClassComponent`	1	类组件
`HostRoot`	3	根节点
`HostComponent`	5	原生DOM元素
`HostText`	6	文本节点
`Fragment`	7	Fragment
`SuspenseComponent`	13	Suspense组件
`MemoComponent`	14	React.memo包装的组件
`LazyComponent`	16	React.lazy懒加载组件
`OffscreenComponent`	22	离屏组件（内部使用）

B.1.2 树结构关系属性

属性	类型	说明	用途
`return`	`Fiber \| null`	父Fiber节点	向上遍历树
`child`	`Fiber \| null`	第一个子Fiber节点	向下遍历树
`sibling`	`Fiber \| null`	下一个兄弟Fiber节点	横向遍历树
`index`	`number`	在兄弟节点中的索引	列表diff算法
`ref`	`RefObject \| Function \| null`	ref引用	访问DOM或组件实例

树结构示例：

        Parent
          │
          │ child
          ▼
       Child1 ──sibling──▶ Child2 ──sibling──▶ Child3
          │                   │                   │
          │ return            │ return            │ return
          └───────────────────┴───────────────────┘
                        Parent

B.1.3 状态与Props属性

属性	类型	说明	用途
`pendingProps`	`any`	新的props（待应用）	协调时比较
`memoizedProps`	`any`	当前的props（已应用）	保存当前props
`memoizedState`	`any`	当前的state	保存组件状态
`updateQueue`	`UpdateQueue \| null`	更新队列	保存setState等更新
`dependencies`	`Dependencies \| null`	依赖的context等	context订阅

memoizedState的不同含义：

组件类型	memoizedState内容
函数组件	Hooks链表的第一个Hook
类组件	state对象
HostRoot	根元素和待处理更新
SuspenseComponent	Suspense状态信息

B.1.4 副作用标记属性

属性	类型	说明	用途
`flags`	`Flags`	当前节点的副作用标记	标记需要执行的操作
`subtreeFlags`	`Flags`	子树的副作用标记	优化：跳过无副作用子树
`deletions`	`Array<Fiber> \| null`	需要删除的子节点	保存待删除节点
`lanes`	`Lanes`	当前节点的优先级	调度系统使用
`childLanes`	`Lanes`	子树的优先级	优化：跳过低优先级子树

常用Flags标记：

Flag	二进制值	说明	触发时机
`NoFlags`	`0b0000...0000`	无副作用	默认值
`Placement`	`0b0000...0010`	插入DOM	新增节点
`Update`	`0b0000...0100`	更新DOM	props变化
`Deletion`	`0b0000...1000`	删除DOM	节点移除
`ChildDeletion`	`0b0000...10000`	子节点删除	子节点移除
`Ref`	`0b0001...0000`	ref更新	ref变化
`Passive`	`0b0010...0000`	useEffect	异步副作用
`LayoutMask`	`0b0100...0000`	useLayoutEffect	同步副作用

Flags位运算操作：

javascript

// 添加flag
fiber.flags |= Placement;
fiber.flags |= Update;

// 检查flag
if (fiber.flags & Placement) {
  // 需要插入DOM
}

// 移除flag
fiber.flags &= ~Placement;

// 检查多个flags
if (fiber.flags & (Placement | Update)) {
  // 需要插入或更新
}

B.1.5 双缓冲属性

属性	类型	说明	用途
`alternate`	`Fiber \| null`	对应的另一棵树的节点	双缓冲机制

双缓冲机制：

current树 (屏幕显示)          workInProgress树 (正在构建)
     Fiber A  ◀──alternate──▶  Fiber A'
        │                         │
        │ child                   │ child
        ▼                         ▼
     Fiber B  ◀──alternate──▶  Fiber B'

current树：当前屏幕显示的内容
workInProgress树：正在构建的新内容
切换时机：commit阶段完成后，root.current = workInProgress

B.1.6 调试属性（开发环境）

属性	类型	说明	用途
`_debugOwner`	`Fiber \| null`	创建该节点的组件	React DevTools
`_debugSource`	`Source \| null`	源码位置信息	错误堆栈
`_debugHookTypes`	`Array<HookType> \| null`	Hooks类型列表	DevTools显示

B.1.7 完整Fiber节点结构

javascript

// 文件：packages/react-reconciler/src/ReactFiber.js
type Fiber = {
  // 节点标识
  tag: WorkTag,
  key: null | string,
  elementType: any,
  type: any,
  stateNode: any,
  
  // 树结构
  return: Fiber | null,
  child: Fiber | null,
  sibling: Fiber | null,
  index: number,
  ref: null | (((handle: mixed) => void) & {_stringRef: ?string}),
  
  // 状态与Props
  pendingProps: any,
  memoizedProps: any,
  updateQueue: mixed,
  memoizedState: any,
  dependencies: Dependencies | null,
  
  // 副作用
  flags: Flags,
  subtreeFlags: Flags,
  deletions: Array<Fiber> | null,
  
  // 优先级
  lanes: Lanes,
  childLanes: Lanes,
  
  // 双缓冲
  alternate: Fiber | null,
  
  // 性能分析（Profiler模式）
  actualDuration?: number,
  actualStartTime?: number,
  selfBaseDuration?: number,
  treeBaseDuration?: number,
  
  // 调试信息（开发环境）
  _debugOwner?: Fiber | null,
  _debugSource?: Source | null,
  _debugHookTypes?: Array<HookType> | null,
};

B.2 Flight协议格式速查

Flight协议是React Server Components的序列化协议，用于在服务端和客户端之间传输组件树。本节提供Flight协议格式的快速参考。

B.2.1 基本格式

行格式：

<id>:<type><data>\n

id：Chunk的唯一标识符（十六进制数字或字符串）
type：单字符类型标识符（可选）
data：JSON格式的数据

示例：

0:["$","div",null,{"children":"Hello"}]
1:I{"id":"./Button.js","chunks":["client1"],"name":"default"}
S1:"react.suspense"
E2:{"message":"Error occurred"}

B.2.2 Chunk类型

类型标识	名称	说明	格式
无	Model Chunk	普通数据/React Element	`<id>:<json>`
`I`	Import Chunk	模块引用（Client Component）	`<id>:I<json>`
`S`	Symbol Chunk	Symbol定义	`S<id>:"<description>"`
`E`	Error Chunk	错误信息	`E<id>:<json>`
`T`	Hint Chunk	提示（preload等）	`T<id>:<json>`
`D`	Debug Chunk	调试信息	`D<id>:<json>`

B.2.3 React Element格式

标准格式：

json

["$", type, key, props]

"$"：固定标记，表示React Element
type：元素类型（字符串或引用）
key：React key（可以是null）
props：属性对象

示例：

javascript

// 原生DOM元素
["$","div",null,{"className":"container","children":"Hello"}]

// 带key的元素
["$","li","item-1",{"children":"Item 1"}]

// 嵌套children
["$","div",null,{"children":[
  ["$","h1",null,{"children":"Title"}],
  ["$","p",null,{"children":"Content"}]
]}]

// 引用Client Component
["$","@1",null,{"onClick":"..."}]

B.2.4 特殊标记

标记	说明	示例
`"$"`	React Element	`["$","div",null,{}]`
`"@<id>"`	引用其他Chunk	`["$","@1",null,{}]`
`"$S<id>"`	引用Symbol	`["$","$S1",null,{}]`
`"$undefined"`	undefined值	`{"value":"$undefined"}`
`"$L<id>"`	Lazy引用	`"$L1"`
`"$Q<id>"`	Promise引用	`"$Q2"`

B.2.5 Import Chunk（模块引用）

格式：

<id>:I{"id":"<module-path>","chunks":["<chunk-id>"],"name":"<export-name>"}

字段说明：

字段	类型	说明	示例
`id`	string	模块路径	`"./src/Button.js"`
`chunks`	string[]	依赖的webpack chunk	`["client1","common"]`
`name`	string	导出名	`"default"`, `"Button"`
`async`	boolean	是否异步模块（可选）	`true`, `false`

示例：

javascript

// 默认导出
1:I{"id":"./Button.js","chunks":["client1"],"name":"default"}

// 命名导出
2:I{"id":"./utils.js","chunks":["client2"],"name":"formatDate"}

// 多个chunks
3:I{"id":"./Modal.js","chunks":["client3","common"],"name":"default"}

// 使用引用
4:["$","@1",null,{"onClick":"..."}]

B.2.6 Symbol Chunk

格式：

S<id>:"<description>"

常见React Symbol：

Symbol ID	描述	用途
`S1`	`"react.element"`	React Element类型
`S2`	`"react.suspense"`	Suspense组件
`S3`	`"react.fragment"`	Fragment
`S4`	`"react.lazy"`	Lazy组件
`S5`	`"react.memo"`	Memo组件

示例：

javascript

// 定义Symbol
S1:"react.suspense"

// 使用Symbol作为type
2:["$","$S1",null,{"fallback":"Loading...","children":"..."}]

B.2.7 Error Chunk

格式：

E<id>:{"message":"<error-message>","stack":"<stack-trace>"}

示例：

javascript

// 错误信息
E1:{"message":"Component failed to render","stack":"Error: ...\n  at ..."}

// 引用错误
2:["$","div",null,{"children":"$E1"}]

B.2.8 完整示例

React组件：

jsx

// Server Component
async function ProductPage({ id }) {
  const product = await db.getProduct(id);
  return (
    <div>
      <h1>{product.name}</h1>
      <AddToCartButton productId={id} />
    </div>
  );
}

// Client Component
'use client';
function AddToCartButton({ productId }) {
  return <button>Add to Cart</button>;
}

生成的Flight数据：

1:I{"id":"./AddToCartButton.js","chunks":["client1"],"name":"default"}
2:["$","h1",null,{"children":"Laptop"}]
3:["$","@1",null,{"productId":123}]
4:["$","div",null,{"children":["@2","@3"]}]
0:@4

解析过程：

行1：定义Client Component引用（AddToCartButton）
行2：h1元素，内容为"Laptop"
行3：引用@1（AddToCartButton），传入props
行4：div元素，包含@2和@3两个子元素
行0：根元素，引用@4

B.2.9 Flight协议流程图

B.2.10 调试技巧

查看Flight数据：

javascript

// 服务端：拦截Flight输出
const stream = renderToReadableStream(<App />);
const reader = stream.getReader();
const decoder = new TextDecoder();

while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  console.log('Flight chunk:', decoder.decode(value));
}

客户端：查看解析结果：

javascript

// 在浏览器DevTools中
// Network标签 -> 查找RSC请求 -> Response标签
// 可以看到原始的Flight数据

常见问题排查：

问题	可能原因	解决方法
客户端报错"Cannot read properties of undefined"	Client Component引用错误	检查Import Chunk的id和chunks
组件不显示	Chunk引用循环	检查@引用是否形成循环
数据丢失	序列化失败	检查是否包含不可序列化的值（函数、Symbol等）
性能问题	Chunk过大	拆分组件，减少单个Chunk的大小

B.3 Hooks API速查

Hooks是React函数组件的核心特性。本节提供所有内置Hooks的快速参考。

B.3.1 状态Hooks

useState

签名：

typescript

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>]

用途：为函数组件添加状态

示例：

javascript

const [count, setCount] = useState(0);
const [user, setUser] = useState(() => loadUser());

// 更新state
setCount(1);                    // 直接设置
setCount(c => c + 1);          // 函数式更新

注意事项：

初始state只在首次渲染时使用
函数式初始state只执行一次
setState不会合并对象，需要手动合并

useReducer

签名：

typescript

function useReducer<S, A>(
  reducer: (state: S, action: A) => S,
  initialState: S,
  init?: (initialState: S) => S
): [S, Dispatch<A>]

用途：复杂状态管理，类似Redux

示例：

javascript

const [state, dispatch] = useReducer(reducer, initialState);

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

dispatch({ type: 'increment' });

B.3.2 副作用Hooks

useEffect

签名：

typescript

function useEffect(
  effect: () => (void | (() => void)),
  deps?: DependencyList
): void

用途：执行副作用（异步执行）

示例：

javascript

// 每次渲染后执行
useEffect(() => {
  document.title = `Count: ${count}`;
});

// 仅在count变化时执行
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

// 仅在挂载时执行
useEffect(() => {
  const subscription = subscribe();
  return () => subscription.unsubscribe(); // 清理函数
}, []);

执行时机：

在浏览器绘制之后异步执行
清理函数在下次effect执行前或组件卸载时执行

useLayoutEffect

签名：

typescript

function useLayoutEffect(
  effect: () => (void | (() => void)),
  deps?: DependencyList
): void

用途：同步执行副作用，在DOM变更后立即执行

示例：

javascript

useLayoutEffect(() => {
  // 测量DOM尺寸
  const rect = divRef.current.getBoundingClientRect();
  setHeight(rect.height);
}, []);

与useEffect的区别：

useLayoutEffect在DOM变更后同步执行
useEffect在浏览器绘制后异步执行
useLayoutEffect会阻塞浏览器绘制

useInsertionEffect

签名：

typescript

function useInsertionEffect(
  effect: () => (void | (() => void)),
  deps?: DependencyList
): void

用途：在DOM变更前插入样式（CSS-in-JS库使用）

示例：

javascript

useInsertionEffect(() => {
  // 插入<style>标签
  const style = document.createElement('style');
  style.textContent = `.my-class { color: red; }`;
  document.head.appendChild(style);
  return () => style.remove();
}, []);

B.3.3 性能优化Hooks

useMemo

签名：

typescript

function useMemo<T>(
  factory: () => T,
  deps: DependencyList
): T

用途：缓存计算结果

示例：

javascript

const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b);
}, [a, b]);

注意事项：

仅在deps变化时重新计算
不要在useMemo中执行副作用
不要过度使用，简单计算不需要缓存

useCallback

签名：

typescript

function useCallback<T extends Function>(
  callback: T,
  deps: DependencyList
): T

用途：缓存函数引用

示例：

javascript

const handleClick = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

// 等价于
const handleClick = useMemo(() => {
  return () => doSomething(a, b);
}, [a, b]);

使用场景：

传递给优化的子组件（React.memo）
作为useEffect的依赖

React.memo

签名：

typescript

function memo<P>(
  Component: ComponentType<P>,
  propsAreEqual?: (prevProps: P, nextProps: P) => boolean
): ComponentType<P>

用途：缓存组件，避免不必要的重新渲染

示例：

javascript

const MemoizedComponent = React.memo(function MyComponent({ value }) {
  return <div>{value}</div>;
});

// 自定义比较函数
const MemoizedComponent = React.memo(MyComponent, (prevProps, nextProps) => {
  return prevProps.id === nextProps.id;
});

B.3.4 引用Hooks

useRef

签名：

typescript

function useRef<T>(initialValue: T): MutableRefObject<T>

用途：保存可变值，不触发重新渲染

示例：

javascript

// 访问DOM
const inputRef = useRef(null);
<input ref={inputRef} />
inputRef.current.focus();

// 保存可变值
const countRef = useRef(0);
countRef.current += 1;

// 保存上一次的值
const prevValue = useRef();
useEffect(() => {
  prevValue.current = value;
}, [value]);

特点：

修改ref.current不会触发重新渲染
ref.current在整个组件生命周期中保持不变

useImperativeHandle

签名：

typescript

function useImperativeHandle<T>(
  ref: Ref<T>,
  createHandle: () => T,
  deps?: DependencyList
): void

用途：自定义暴露给父组件的ref值

示例：

javascript

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();
  
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    getValue: () => {
      return inputRef.current.value;
    }
  }), []);
  
  return <input ref={inputRef} />;
});

// 父组件使用
const ref = useRef();
<FancyInput ref={ref} />
ref.current.focus();

B.3.5 Context Hooks

useContext

签名：

typescript

function useContext<T>(context: Context<T>): T

用途：读取context值

示例：

javascript

const ThemeContext = createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Button</button>;
}

// Provider
<ThemeContext.Provider value="dark">
  <ThemedButton />
</ThemeContext.Provider>

注意事项：

context值变化时，组件会重新渲染
使用React.memo优化不必要的渲染

B.3.6 并发Hooks

useTransition

签名：

typescript

function useTransition(): [boolean, (callback: () => void) => void]

用途：标记低优先级更新，避免阻塞UI

示例：

javascript

const [isPending, startTransition] = useTransition();

function handleClick() {
  startTransition(() => {
    // 低优先级更新
    setSearchResults(filterLargeList(query));
  });
}

return (
  <>
    <input onChange={e => setQuery(e.target.value)} />
    {isPending && <Spinner />}
    <Results data={searchResults} />
  </>
);

特点：

startTransition中的更新是低优先级的
可以被高优先级更新打断
isPending表示transition是否进行中

useDeferredValue

签名：

typescript

function useDeferredValue<T>(value: T): T

用途：延迟更新值，保持UI响应

示例：

javascript

const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);

return (
  <>
    <input value={query} onChange={e => setQuery(e.target.value)} />
    <Results query={deferredQuery} />
  </>
);

特点：

deferredQuery会延迟更新
输入框保持响应，Results延迟渲染
类似于debounce，但由React自动管理

B.3.7 其他Hooks

useId

签名：

typescript

function useId(): string

用途：生成唯一ID，支持SSR

示例：

javascript

function NameFields() {
  const id = useId();
  return (
    <>
      <label htmlFor={`${id}-firstName`}>First Name</label>
      <input id={`${id}-firstName`} />
      
      <label htmlFor={`${id}-lastName`}>Last Name</label>
      <input id={`${id}-lastName`} />
    </>
  );
}

特点：

服务端和客户端生成相同的ID
不要用于列表的key

useDebugValue

签名：

typescript

function useDebugValue<T>(
  value: T,
  format?: (value: T) => any
): void

用途：在React DevTools中显示自定义Hook的标签

示例：

javascript

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);
  
  // 在DevTools中显示
  useDebugValue(isOnline ? 'Online' : 'Offline');
  
  // 延迟格式化
  useDebugValue(date, date => date.toDateString());
  
  return isOnline;
}

useSyncExternalStore

签名：

typescript

function useSyncExternalStore<T>(
  subscribe: (callback: () => void) => () => void,
  getSnapshot: () => T,
  getServerSnapshot?: () => T
): T

用途：订阅外部store（Redux、MobX等）

示例：

javascript

function useStore(store) {
  return useSyncExternalStore(
    store.subscribe,
    store.getSnapshot,
    store.getServerSnapshot
  );
}

const store = {
  state: { count: 0 },
  listeners: new Set(),
  subscribe(callback) {
    this.listeners.add(callback);
    return () => this.listeners.delete(callback);
  },
  getSnapshot() {
    return this.state;
  },
  setState(newState) {
    this.state = newState;
    this.listeners.forEach(listener => listener());
  }
};

function Counter() {
  const state = useStore(store);
  return <div>{state.count}</div>;
}

B.3.8 React 19新增Hooks

use

签名：

typescript

function use<T>(promise: Promise<T> | Context<T>): T

用途：读取Promise或Context（可以在条件语句中使用）

示例：

javascript

// 读取Promise
function Comments({ commentsPromise }) {
  const comments = use(commentsPromise);
  return comments.map(comment => <div>{comment.text}</div>);
}

// 读取Context（可以在条件中使用）
function Button() {
  if (condition) {
    const theme = use(ThemeContext);
    return <button className={theme}>Button</button>;
  }
  return <button>Default</button>;
}

特点：

可以在条件语句和循环中使用
读取Promise时会suspend
是唯一可以在条件中使用的Hook

useFormStatus

签名：

typescript

function useFormStatus(): {
  pending: boolean,
  data: FormData | null,
  method: string | null,
  action: string | null
}

用途：获取表单提交状态（用于Server Actions）

示例：

javascript

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Submitting...' : 'Submit'}
    </button>
  );
}

function Form() {
  async function handleSubmit(formData) {
    'use server';
    await saveData(formData);
  }
  
  return (
    <form action={handleSubmit}>
      <input name="name" />
      <SubmitButton />
    </form>
  );
}

useFormState

签名：

typescript

function useFormState<S>(
  action: (state: S, formData: FormData) => Promise<S>,
  initialState: S
): [S, (formData: FormData) => void]

用途：管理表单状态（用于Server Actions）

示例：

javascript

async function updateName(prevState, formData) {
  'use server';
  const name = formData.get('name');
  if (!name) {
    return { error: 'Name is required' };
  }
  await saveName(name);
  return { success: true };
}

function Form() {
  const [state, formAction] = useFormState(updateName, { error: null });
  
  return (
    <form action={formAction}>
      <input name="name" />
      {state.error && <p>{state.error}</p>}
      <button type="submit">Submit</button>
    </form>
  );
}

useOptimistic

签名：

typescript

function useOptimistic<S>(
  state: S,
  updateFn: (currentState: S, optimisticValue: any) => S
): [S, (optimisticValue: any) => void]

用途：乐观更新UI

示例：

javascript

function TodoList({ todos }) {
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo) => [...state, { ...newTodo, pending: true }]
  );
  
  async function handleAdd(formData) {
    const newTodo = { id: Date.now(), text: formData.get('text') };
    addOptimisticTodo(newTodo);
    await saveTodo(newTodo);
  }
  
  return (
    <>
      {optimisticTodos.map(todo => (
        <div key={todo.id} style={{ opacity: todo.pending ? 0.5 : 1 }}>
          {todo.text}
        </div>
      ))}
      <form action={handleAdd}>
        <input name="text" />
        <button>Add</button>
      </form>
    </>
  );
}

B.3.9 Hooks使用规则

规则1：只在顶层调用Hooks

javascript

// ✗ 错误：在条件语句中
function Bad({ condition }) {
  if (condition) {
    const [state, setState] = useState(0); // 错误！
  }
}

// ✓ 正确：在顶层
function Good({ condition }) {
  const [state, setState] = useState(0);
  if (condition) {
    // 使用state
  }
}

规则2：只在React函数中调用Hooks

javascript

// ✗ 错误：在普通函数中
function helper() {
  const [state, setState] = useState(0); // 错误！
}

// ✓ 正确：在组件或自定义Hook中
function useCustomHook() {
  const [state, setState] = useState(0); // 正确
  return state;
}

function Component() {
  const value = useCustomHook(); // 正确
}

规则3：自定义Hook必须以"use"开头

javascript

// ✗ 错误：不以use开头
function customHook() {
  const [state, setState] = useState(0);
  return state;
}

// ✓ 正确：以use开头
function useCustomHook() {
  const [state, setState] = useState(0);
  return state;
}

B.3.10 Hooks对比表

Hook	用途	触发重新渲染	执行时机	常见用途
useState	状态管理	是	-	组件状态
useReducer	复杂状态	是	-	复杂状态逻辑
useEffect	副作用	否	渲染后异步	数据获取、订阅
useLayoutEffect	同步副作用	否	DOM变更后同步	DOM测量
useInsertionEffect	样式插入	否	DOM变更前	CSS-in-JS
useMemo	缓存值	否	渲染时	昂贵计算
useCallback	缓存函数	否	渲染时	传递给子组件
useRef	可变引用	否	-	DOM引用、可变值
useContext	读取context	是	-	全局状态
useTransition	并发更新	是	-	低优先级更新
useDeferredValue	延迟值	是	-	延迟渲染
useId	生成ID	否	-	可访问性
use	读取资源	是	-	Promise、Context

B.3.11 Hook数据结构

Hook对象：

typescript

type Hook = {
  memoizedState: any,        // 当前状态
  baseState: any,            // 基础状态
  baseQueue: Update | null,  // 基础更新队列
  queue: any,                // 更新队列
  next: Hook | null,         // 下一个Hook
};

Effect对象：

typescript

type Effect = {
  tag: HookFlags,                    // Effect类型标记
  inst: { destroy: (() => void) | void },  // 清理函数
  create: () => (() => void) | void, // effect函数
  deps: Array<any> | null,           // 依赖数组
  next: Effect,                      // 下一个Effect
};

Hooks链表：

fiber.memoizedState -> Hook1 -> Hook2 -> Hook3 -> null
                         │        │        │
                         ▼        ▼        ▼
                      state1   state2   effect

本附录小结

本附录提供了React 19核心API的快速参考：

Fiber节点属性：包括节点标识、树结构、状态、副作用等属性，是理解React内部工作原理的基础
Flight协议格式：详细说明了RSC的序列化协议，包括各种Chunk类型和特殊标记
Hooks API：涵盖所有内置Hooks的签名、用途和示例，包括React 19新增的Hooks

建议读者将本附录作为日常开发和调试的参考手册，配合正文章节深入理解React的实现原理。

附录B 核心API速查 ​

B.1 Fiber节点属性速查 ​

B.1.1 节点标识属性 ​

B.1.2 树结构关系属性 ​

B.1.3 状态与Props属性 ​

B.1.4 副作用标记属性 ​

B.1.5 双缓冲属性 ​

B.1.6 调试属性（开发环境） ​

B.1.7 完整Fiber节点结构 ​

B.2 Flight协议格式速查 ​

B.2.1 基本格式 ​

B.2.2 Chunk类型 ​

B.2.3 React Element格式 ​

B.2.4 特殊标记 ​

B.2.5 Import Chunk（模块引用） ​

B.2.6 Symbol Chunk ​

B.2.7 Error Chunk ​

B.2.8 完整示例 ​

B.2.9 Flight协议流程图 ​

B.2.10 调试技巧 ​

B.3 Hooks API速查 ​

B.3.1 状态Hooks ​

useState ​

useReducer ​

B.3.2 副作用Hooks ​

useEffect ​

useLayoutEffect ​

useInsertionEffect ​

B.3.3 性能优化Hooks ​

useMemo ​

useCallback ​

React.memo ​

B.3.4 引用Hooks ​

useRef ​

useImperativeHandle ​

B.3.5 Context Hooks ​

useContext ​

B.3.6 并发Hooks ​

useTransition ​

useDeferredValue ​

B.3.7 其他Hooks ​

useId ​

useDebugValue ​

useSyncExternalStore ​

B.3.8 React 19新增Hooks ​

use ​

useFormStatus ​

useFormState ​

useOptimistic ​

B.3.9 Hooks使用规则 ​

B.3.10 Hooks对比表 ​

B.3.11 Hook数据结构 ​

本附录小结 ​

附录B 核心API速查

B.1 Fiber节点属性速查

B.1.1 节点标识属性

B.1.2 树结构关系属性

B.1.3 状态与Props属性

B.1.4 副作用标记属性

B.1.5 双缓冲属性

B.1.6 调试属性（开发环境）

B.1.7 完整Fiber节点结构

B.2 Flight协议格式速查

B.2.1 基本格式

B.2.2 Chunk类型

B.2.3 React Element格式

B.2.4 特殊标记

B.2.5 Import Chunk（模块引用）

B.2.6 Symbol Chunk

B.2.7 Error Chunk

B.2.8 完整示例

B.2.9 Flight协议流程图

B.2.10 调试技巧

B.3 Hooks API速查

B.3.1 状态Hooks

useState

useReducer

B.3.2 副作用Hooks

useEffect

useLayoutEffect

useInsertionEffect

B.3.3 性能优化Hooks

useMemo

useCallback

React.memo

B.3.4 引用Hooks

useRef

useImperativeHandle

B.3.5 Context Hooks

useContext

B.3.6 并发Hooks

useTransition

useDeferredValue

B.3.7 其他Hooks

useId

useDebugValue

useSyncExternalStore

B.3.8 React 19新增Hooks

use

useFormStatus

useFormState

useOptimistic

B.3.9 Hooks使用规则

B.3.10 Hooks对比表

B.3.11 Hook数据结构

本附录小结