API✅

说一下 React 中有哪些内置 API?

答案

框架无关的 API 在 react 包中,包含

API	说明
hooks API	提供一系列可以注入函数组件的 API，如 `useState`、`useEffect` 等
act	用于 react 组件测试
cache	用于缓存计算结果
captureOwnerStack	用于捕获组件的所有者堆栈信息, 只在调试模式可用
createContext	用于创建上下文对象, 通过 `Provider` 和 `Consumer` 组件来共享数据，函数组件通过 `useContext` 消费。注意在 React 19 后可以直接使用返回的值作为 Provider, 详见 Provider
lazy	用于实现组件的懒加载
memo	用于优化函数组件的性能，避免不必要的重新渲染, 组件属性会进行浅比较，相等则跳过渲染
startTransition	用于在 React 中标记状态更新为非紧急，从而允许更高优先级的更新先执行，实现渲染调度
use	用来从 Promise 或 Component 中获取值, 配合服务端 API 和 Suspense 使用
experimental_taintObjectReference	用于标记对象引用为不安全，实验性质只能在 `react@experimental` 中使用
experimental_taintUniqueValue	用于标记唯一值为不安全，`react@experimental` 中使用
unstable_addTransitionType	用于在过渡中添加新的类型, `react@experimental` 中使用

ReactDOM 包中 API 如下

API	说明
hooks API	目前只有 useFormStatus 用于表单处理
createRoot	用于创建 React 根节点, 通过 `createRoot` 创建的根节点可以使用新的并发特性
hydrateRoot	用于在服务端渲染的基础上重新激活 React 组件
createPortal	用于创建 React Portal, 可以将子组件渲染到 DOM 的其他位置
flushSync	用于强制同步更新 React 组件的状态
preconnect	预连接到外部资源, 提高性能
prefetchDNS	预获取 DNS 信息, 提高性能
preinit	预初始化资源
preinitModule	预初始化 ESM 资源
preload	预加载资源
preloadModule	预加载 ESM 模块
服务端API	用于 SSR
prerender	将 React Tree 渲染为 HTML 字符串，使用 Web Stream
prerenderToNodeStream	将 React Tree 渲染为 HTML 字符串，使用 Node Stream

此外 ReactDOM 还包括一些历史遗留的 API, 罗列如下

API	说明
Children	用来更安全的遍历 props.children 属性，包括 `map`、`forEach`、`count` 等方法
cloneElement	用于复制一个已有的 React 元素，并返回一个新的 React 元素，同时可以修改它的一些属性
Component	用于创建类组件, 通过继承 `React.Component` 类来创建一个新的组件类
createElement	用于创建 React 元素, 通过传入类型、属性和子元素来创建一个新的 React 元素
createRef	用于创建一个 ref 对象, 可以在类组件中使用，函数组件可以直接使用 useRef
forwardRef	用于在函数组件中获取子组件的 ref, 解决函数组件无法直接使用 ref 的问题，在 React19 中已经不需要此包裹了
isValidElement	用于判断一个对象是否是一个有效的 React 元素
PureComponent	用于创建一个纯组件, 通过继承 `React.PureComponent` 类来创建一个新的组件类，自动进行浅比较

面试官视角

这只是个热身问题，面试官会通过面试者回答问题的方式来判断面试者对 React API 的了解程度。比如面试者会如何分类这些 API, 分类方式体现了面试者的理解程度。此外通过面试者自行说明常用的 API 可以进一步下探追问细节。作为面试者没必要全部记住这些 API，重点是熟悉常用 API ，有自己的归纳和总结即可。

createElement 和 cloneElement 的区别？

答案

维度	createElement	cloneElement
主要用途	创建 React 元素	克隆并修改 React 元素
参数	type, props, children	element, props, children
返回值	新 React 元素	新 React 元素
典型场景	组件渲染、JSX 编译	复用/增强已有元素

补充说明

createElement 是 React 创建虚拟 DOM 的底层方法，JSX 会被编译为 createElement 调用。它用于生成新的 React 元素，通常不直接手写。
cloneElement 用于基于已有的 React 元素进行克隆，并可追加/覆盖 props 或 children，常用于高阶组件、插槽、动态增强子组件等场景。
两者都返回新的 React 元素，原元素不会被修改。

// createElement 示例
const el = React.createElement('button', { type: 'button' }, 'Click')

// cloneElement 示例
const newEl = React.cloneElement(el, { disabled: true }, 'New Text')

延伸阅读

说一下 React 中有哪些内置 API?​

createElement 和 cloneElement 的区别？​

说一下 React 中有哪些内置 API?

createElement 和 cloneElement 的区别？