21:I[82591,["8500","static/chunks/8500-01a63dafd809e317.js","9304","static/chunks/9304-8d5d436fe7c94e16.js","7019","static/chunks/7019-14927e506b89eb47.js","8976","static/chunks/8976-2e6983735a6edc4e.js","3265","static/chunks/3265-fd4eae634e948c4f.js","1750","static/chunks/1750-fbdecb7fdfbedc02.js","2623","static/chunks/2623-eea13fee2ab568aa.js","8437","static/chunks/8437-5e456dd2e7c2468a.js","622","static/chunks/622-42e41432bd6994e0.js","3625","static/chunks/3625-83a937e0a1e501ea.js","3227","static/chunks/3227-5950e934b7cd3931.js","3133","static/chunks/3133-9fb39eaee1e47b4c.js","6495","static/chunks/6495-b9b477b9fdf7b8c8.js","4395","static/chunks/app/(web)/(routes)/(web)/flashcards/%5Btrack%5D/%5Bnode%5D/page-14943b4210c1f7e9.js"],"default"] 22:T756,

答案：B

应选择 B。JSX 是 JavaScript 的语法扩展，通常由 Babel、TypeScript 或其他构建工具转换为 jsx、jsxs 等运行时调用，旧转换方式则可能生成 React.createElement 调用。这些调用创建的是用于描述界面结构的 React 元素，而不是立即操作浏览器 DOM。之后由 React 根据元素树协调并提交实际界面变更。

逐项解析

A（错误）：浏览器的 JavaScript 解析器通常不能直接执行 JSX。它看起来类似 HTML，但具有 JavaScript 表达式、组件和属性命名等独立语义，需要预先转换。
B（正确）：该表述同时涵盖新版 JSX runtime 与旧版 createElement 转换方式，也正确区分了 React 元素描述和最终真实 DOM 节点。
C（错误）：JSX 的编译结果只是普通 JavaScript 调用，并不会在构建阶段获得运行时 DOM 环境，也不会直接生成或缓存用户浏览器中的节点。
D（错误）：首字母大写的 JSX 标签可以表示 React 组件，编译结果会把组件标识符作为元素类型传入，并不要求开发者手动调用组件函数。

易错点

React 元素、组件实例和真实 DOM 是三个不同概念。尤其不要把 JSX 编译等同于模板字符串拼接，也不要直接调用函数组件来替代 JSX。

23:T7ab,

答案：C

JSX 中花括号里的内容先按普通 JavaScript 表达式求值。count && <strong>...</strong> 在 count 为 0 时返回数值 0，而 React 会渲染数字，因此先出现“0”，但不会创建 strong 元素。第二个表达式 count === 0 为 true，于是返回并渲染 em 元素及文本“空”。最终 div 的可见内容顺序是数字 0 后接“空”，这也是用逻辑与进行条件渲染时常见的零值陷阱。

逐项解析

A（错误）：该选项错误。第二个表达式确实会渲染“空”，但第一个逻辑与表达式的结果是可渲染的数字 0，而不是会被 React 忽略的 false。
B（错误）：该选项错误。第一个表达式贡献了数字 0，但 count === 0 的判断也成立，因此 em 元素同样会被创建并显示其文本内容。
C（正确）：该选项正确。React 会忽略布尔值、null 和 undefined 这类空节点，却会把数值 0 当作正常文本节点渲染，随后再渲染 em 中的“空”。
D（错误）：该选项错误。两个表达式都产生了可见输出：前者最终是数字文本节点 0，后者最终是包含“空”的 em 元素，并非都被过滤。

易错点

不要把 JavaScript 中的假值与 React 中不渲染的值完全等同。数量可能为零时，更稳妥的写法是 count > 0 ? <strong>{count}</strong> : null。

24:Td58,核心结论：`React` `Hooks` 不应只按“用过哪些”罗列名称，更重要的是说明每个 `Hook` 解决什么问题、依赖关系如何管理，以及何时不应使用。常见内置 `Hook` 可以分为状态管理、副作用、上下文、性能优化、引用与命令式能力、并发渲染辅助等几类。状态管理方面，`useState` 适合相互独立、更新逻辑简单的局部状态；`useReducer` 更适合状态字段关联紧密、更新分支较多，或者希望将状态转换逻辑集中管理的场景。状态更新可能被批处理，下一次渲染前不能假设闭包中的状态已经同步变化。若新状态依赖旧状态，应使用函数式更新，例如 `setCount(value => value + 1)`。副作用方面，`useEffect` 用于把组件与网络请求、订阅、定时器、浏览器 `API` 等外部系统同步。它不是生命周期方法的机械替代品。依赖数组应完整描述副作用读取的响应式值，清理函数则负责取消订阅、清除定时器或忽略过期请求。`useLayoutEffect` 会在 `DOM` 更新后、浏览器绘制前同步执行，适合测量布局或避免视觉闪烁，但会阻塞绘制，普通副作用应优先使用 `useEffect`。引用方面，`useRef` 返回跨渲染保持稳定的可变对象，可保存 `DOM` 节点、定时器编号或不参与界面渲染的数据；修改 `ref.current` 不会触发重新渲染。`useImperativeHandle` 通常配合 `ref` 暴露受控的命令式接口，但应谨慎使用，优先选择声明式的属性和状态传递。性能优化方面，`useMemo` 缓存计算结果，`useCallback` 缓存函数引用。二者是性能优化手段，不是业务正确性的保证，也不是所有变量和函数都需要包裹。只有当计算确实昂贵，或稳定引用能够减少子组件渲染、避免重复订阅时才有价值。依赖项频繁变化时，缓存本身可能没有收益。数据共享与并发能力方面，`useContext` 读取最近一层 `Provider` 提供的值，适合主题、语言和登录信息等跨层数据；高频变化的大对象可能导致较大范围的消费组件重新渲染。`useTransition` 可以把非紧急状态更新标记为 `Transition`，使输入等紧急交互保持响应；`useDeferredValue` 则为某个值提供可延迟更新的版本。它们改善的是更新优先级和交互体验，不会自动减少计算量。`useId` 用于生成适合服务端渲染和客户端水合的稳定标识，不能拿来生成列表的业务 `key`。工程中还常封装 `useDebounce`、`useRequest`、`useLocalStorage`、`useUpdateEffect` 和 `useEventListener`。自定义 `Hook` 的价值是复用带状态的行为及其清理逻辑，而不是简单包装一行 `API`。实现时要遵守 `Hooks` 规则：只能在 `React` 函数组件或自定义 `Hook` 顶层调用，不能放入条件、循环或普通回调中。常见误区包括：用 `useEffect` 计算本可在渲染阶段直接得到的数据；遗漏依赖以“阻止重复执行”；用 `useMemo` 掩盖错误状态设计；把 `useRef` 当作会驱动视图更新的状态。面试追问通常包括：`useEffect` 的清理时机是什么、闭包为何会读取旧状态、`useMemo` 与 `useCallback` 有何区别、`useState` 与 `useReducer` 如何选择，以及如何设计一个能够取消请求并避免竞态的 `useRequest`。25:Tf7c,

核心结论：React Hooks 不应只按“用过哪些”罗列名称，更重要的是说明每个 Hook 解决什么问题、依赖关系如何管理，以及何时不应使用。常见内置 Hook 可以分为状态管理、副作用、上下文、性能优化、引用与命令式能力、并发渲染辅助等几类。

状态管理方面，useState 适合相互独立、更新逻辑简单的局部状态；useReducer 更适合状态字段关联紧密、更新分支较多，或者希望将状态转换逻辑集中管理的场景。状态更新可能被批处理，下一次渲染前不能假设闭包中的状态已经同步变化。若新状态依赖旧状态，应使用函数式更新，例如 setCount(value => value + 1)。

副作用方面，useEffect 用于把组件与网络请求、订阅、定时器、浏览器 API 等外部系统同步。它不是生命周期方法的机械替代品。依赖数组应完整描述副作用读取的响应式值，清理函数则负责取消订阅、清除定时器或忽略过期请求。useLayoutEffect 会在 DOM 更新后、浏览器绘制前同步执行，适合测量布局或避免视觉闪烁，但会阻塞绘制，普通副作用应优先使用 useEffect。

引用方面，useRef 返回跨渲染保持稳定的可变对象，可保存 DOM 节点、定时器编号或不参与界面渲染的数据；修改 ref.current 不会触发重新渲染。useImperativeHandle 通常配合 ref 暴露受控的命令式接口，但应谨慎使用，优先选择声明式的属性和状态传递。

性能优化方面，useMemo 缓存计算结果，useCallback 缓存函数引用。二者是性能优化手段，不是业务正确性的保证，也不是所有变量和函数都需要包裹。只有当计算确实昂贵，或稳定引用能够减少子组件渲染、避免重复订阅时才有价值。依赖项频繁变化时，缓存本身可能没有收益。

数据共享与并发能力方面，useContext 读取最近一层 Provider 提供的值，适合主题、语言和登录信息等跨层数据；高频变化的大对象可能导致较大范围的消费组件重新渲染。useTransition 可以把非紧急状态更新标记为 Transition，使输入等紧急交互保持响应；useDeferredValue 则为某个值提供可延迟更新的版本。它们改善的是更新优先级和交互体验，不会自动减少计算量。useId 用于生成适合服务端渲染和客户端水合的稳定标识，不能拿来生成列表的业务 key。

工程中还常封装 useDebounce、useRequest、useLocalStorage、useUpdateEffect 和 useEventListener。自定义 Hook 的价值是复用带状态的行为及其清理逻辑，而不是简单包装一行 API。实现时要遵守 Hooks 规则：只能在 React 函数组件或自定义 Hook 顶层调用，不能放入条件、循环或普通回调中。

常见误区包括：用 useEffect 计算本可在渲染阶段直接得到的数据；遗漏依赖以“阻止重复执行”；用 useMemo 掩盖错误状态设计；把 useRef 当作会驱动视图更新的状态。面试追问通常包括：useEffect 的清理时机是什么、闭包为何会读取旧状态、useMemo 与 useCallback 有何区别、useState 与 useReducer 如何选择，以及如何设计一个能够取消请求并避免竞态的 useRequest。

26:T15b6,## 核心结论 `JSBridge` 适用于网页被嵌入原生应用，并且网页需要使用浏览器沙箱之外的受控能力，或者原生应用需要向网页主动同步状态的场景。典型情况包括混合应用中的登录态共享、设备信息读取、相机与相册调用、定位、文件选择、原生导航、支付、分享、消息推送回传以及页面生命周期通知。是否引入桥接层取决于网页与宿主之间是否存在稳定、明确的跨运行时通信需求。普通网站如果只使用标准浏览器能力，就不应为了形式统一而依赖原生桥，否则页面会失去独立运行能力，并增加平台适配、安全审计和版本兼容成本。 ## 典型工程场景在混合应用中，部分页面由网页实现，以获得较快的业务迭代速度；账户体系、导航框架和系统能力则由原生应用维护。网页需要获取当前用户的临时身份凭据、关闭当前原生页面、打开系统相册或调起分享面板时，可以通过 `JSBridge` 请求原生端完成操作。另一类需求是原生端主动通知网页。例如应用从后台恢复、网络状态变化、主题切换、定位结果更新或原生支付完成后，原生端需要向网页派发事件。桥接层可提供统一的订阅与取消订阅机制，使页面无需了解不同操作系统的具体接口。对于包含多个业务页面的大型应用，桥接层还可以作为能力治理入口。原生能力统一注册到白名单中，网页通过版本化协议调用，日志系统记录调用耗时、成功率和错误码。这样比每个页面分别注入任意对象更容易维护和审计。 ## 不同技术中的边界网页与原生 `WebView` 之间的通信是最典型的 `JSBridge` 场景。`React Native`、`Weex` 和小程序也存在脚本运行时与原生能力之间的通信机制，但不能把它们完全等同于传统网页中的桥接实现。它们可能具有自己的渲染架构、线程模型、序列化协议和组件系统，只能说共享了跨运行时调用这一思想。浏览器中的 `postMessage()` 也属于消息通信机制，可用于窗口、框架或工作线程之间传递数据，但它并不天然提供相机、文件或支付等原生应用能力。标准网页能力足够时，应优先使用浏览器标准接口，因为它们通常具备更清晰的权限模型和更好的可移植性。 ## 设计示例业务层最好面向一个与平台无关的接口，并在非宿主环境中提供明确的降级行为： ```ts type ShareOptions = { title: string; url: string; }; type NativeBridge = { invoke(method: string, params?: unknown): Promise; }; declare global { interface Window { AppBridge?: NativeBridge; } } export async function sharePage(options: ShareOptions): Promise { if (window.AppBridge) { await window.AppBridge.invoke('share', options); return; } if (navigator.share) { await navigator.share(options); return; } throw new Error('Share capability is unavailable'); } ``` 该示例先使用宿主提供的桥，独立浏览器环境则尝试标准分享接口；两者都不可用时返回明确错误。这样可以避免业务代码直接访问某个平台注入的全局对象，也便于测试和迁移。单次能力检测和调用分派的时间复杂度通常为 `O(1)`，示例本身只使用常量级额外空间，即 `O(1)`。真实桥接实现如果维护多个未完成请求，则空间消耗会随并发请求数线性增长。 ## 引入桥接层的代价每增加一个桥接接口，就增加一项跨版本契约。网页可能先发布而用户仍使用旧版应用，也可能原生应用已经升级而缓存页面仍是旧版本。因此接口需要能力探测、版本约束、参数默认值和明确的“不支持”错误，而不能只比较一个全局应用版本。桥接调用还存在序列化和线程切换成本。高频动画、逐帧手势坐标或大量二进制数据不适合通过普通消息桥反复传递。此类功能应减少通信次数、批量发送数据，或者交由同一运行时完成。安全方面，桥接能力必须按最小权限暴露。原生端不能信任网页传入的地址、文件路径、账户编号或方法名；加载远程页面时还应限制可信来源，并防范导航到不受信任页面后桥对象仍然可用。 ## 常见误区 - 认为只要是移动端网页就需要 `JSBridge`。纯浏览器页面通常不需要原生桥。 - 把桥接层当作任意调用原生代码的反射入口。生产实现应使用显式白名单。 - 只考虑功能调用，不处理页面刷新、应用退后台、调用超时和用户拒绝授权。 - 没有准备浏览器降级方案，导致页面离开应用后完全不可用。 - 通过桥高频传递大对象，忽略序列化、复制和线程切换成本。 ## 面试追问 - 哪些能力应优先使用浏览器标准接口？已有稳定标准、权限模型清晰且满足业务要求的能力应优先使用标准接口。 - 如何判断宿主是否支持某项能力？使用能力查询或方法级探测，而不是只判断桥对象是否存在。 - 网页版本比应用更新时怎么办？服务端下发页面时结合最低能力要求，同时让网页提供降级路径和明确提示。 - 为什么支付等敏感操作不能只依赖网页校验？网页环境可被修改，最终参数、身份和业务状态必须由原生端及服务端再次验证。27:T1e19,

核心结论

JSBridge 适用于网页被嵌入原生应用，并且网页需要使用浏览器沙箱之外的受控能力，或者原生应用需要向网页主动同步状态的场景。典型情况包括混合应用中的登录态共享、设备信息读取、相机与相册调用、定位、文件选择、原生导航、支付、分享、消息推送回传以及页面生命周期通知。

是否引入桥接层取决于网页与宿主之间是否存在稳定、明确的跨运行时通信需求。普通网站如果只使用标准浏览器能力，就不应为了形式统一而依赖原生桥，否则页面会失去独立运行能力，并增加平台适配、安全审计和版本兼容成本。

典型工程场景

在混合应用中，部分页面由网页实现，以获得较快的业务迭代速度；账户体系、导航框架和系统能力则由原生应用维护。网页需要获取当前用户的临时身份凭据、关闭当前原生页面、打开系统相册或调起分享面板时，可以通过 JSBridge 请求原生端完成操作。

另一类需求是原生端主动通知网页。例如应用从后台恢复、网络状态变化、主题切换、定位结果更新或原生支付完成后，原生端需要向网页派发事件。桥接层可提供统一的订阅与取消订阅机制，使页面无需了解不同操作系统的具体接口。

对于包含多个业务页面的大型应用，桥接层还可以作为能力治理入口。原生能力统一注册到白名单中，网页通过版本化协议调用，日志系统记录调用耗时、成功率和错误码。这样比每个页面分别注入任意对象更容易维护和审计。

不同技术中的边界

网页与原生 WebView 之间的通信是最典型的 JSBridge 场景。React Native、Weex 和小程序也存在脚本运行时与原生能力之间的通信机制，但不能把它们完全等同于传统网页中的桥接实现。它们可能具有自己的渲染架构、线程模型、序列化协议和组件系统，只能说共享了跨运行时调用这一思想。

浏览器中的 postMessage() 也属于消息通信机制，可用于窗口、框架或工作线程之间传递数据，但它并不天然提供相机、文件或支付等原生应用能力。标准网页能力足够时，应优先使用浏览器标准接口，因为它们通常具备更清晰的权限模型和更好的可移植性。

设计示例

业务层最好面向一个与平台无关的接口，并在非宿主环境中提供明确的降级行为：

type ShareOptions = {
  title: string;
  url: string;
};

type NativeBridge = {
  invoke(method: string, params?: unknown): Promise<unknown>;
};

declare global {
  interface Window {
    AppBridge?: NativeBridge;
  }
}

export async function sharePage(options: ShareOptions): Promise<void> {
  if (window.AppBridge) {
    await window.AppBridge.invoke('share', options);
    return;
  }

  if (navigator.share) {
    await navigator.share(options);
    return;
  }

  throw new Error('Share capability is unavailable');
}

该示例先使用宿主提供的桥，独立浏览器环境则尝试标准分享接口；两者都不可用时返回明确错误。这样可以避免业务代码直接访问某个平台注入的全局对象，也便于测试和迁移。

单次能力检测和调用分派的时间复杂度通常为 O(1)，示例本身只使用常量级额外空间，即 O(1)。真实桥接实现如果维护多个未完成请求，则空间消耗会随并发请求数线性增长。

引入桥接层的代价

每增加一个桥接接口，就增加一项跨版本契约。网页可能先发布而用户仍使用旧版应用，也可能原生应用已经升级而缓存页面仍是旧版本。因此接口需要能力探测、版本约束、参数默认值和明确的“不支持”错误，而不能只比较一个全局应用版本。

桥接调用还存在序列化和线程切换成本。高频动画、逐帧手势坐标或大量二进制数据不适合通过普通消息桥反复传递。此类功能应减少通信次数、批量发送数据，或者交由同一运行时完成。

安全方面，桥接能力必须按最小权限暴露。原生端不能信任网页传入的地址、文件路径、账户编号或方法名；加载远程页面时还应限制可信来源，并防范导航到不受信任页面后桥对象仍然可用。

常见误区

认为只要是移动端网页就需要 JSBridge。纯浏览器页面通常不需要原生桥。
把桥接层当作任意调用原生代码的反射入口。生产实现应使用显式白名单。
只考虑功能调用，不处理页面刷新、应用退后台、调用超时和用户拒绝授权。
没有准备浏览器降级方案，导致页面离开应用后完全不可用。
通过桥高频传递大对象，忽略序列化、复制和线程切换成本。

面试追问

哪些能力应优先使用浏览器标准接口？已有稳定标准、权限模型清晰且满足业务要求的能力应优先使用标准接口。
如何判断宿主是否支持某项能力？使用能力查询或方法级探测，而不是只判断桥对象是否存在。
网页版本比应用更新时怎么办？服务端下发页面时结合最低能力要求，同时让网页提供降级路径和明确提示。
为什么支付等敏感操作不能只依赖网页校验？网页环境可被修改，最终参数、身份和业务状态必须由原生端及服务端再次验证。

8:[["$","header",null,{"className":"learn-hero","children":["$","div",null,{"className":"learn-hero-inner mx-auto max-w-[1320px] px-4 sm:px-6","children":[["$","nav",null,{"className":"flex items-center gap-1.5 text-[12.5px]","style":{"color":"var(--learn-text-dim)"},"aria-label":"面包屑","children":[["$","$L1a",null,{"href":"/flashcards","className":"inline-flex items-center gap-1","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-chevron-left size-3.5","aria-hidden":true,"children":[["$","path","1wnfg3",{"d":"m15 18-6-6 6-6"}],"$undefined"]}],"知识卡片"]}],["$","span",null,{"aria-hidden":true,"children":"/"}],["$","$L1a",null,{"href":"/flashcards/react","children":"React"}]]}],["$","div",null,{"className":"mt-4","children":["$","span",null,{"className":"learn-chip learn-chip-accent","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-sparkles size-3.5","aria-hidden":true,"children":[["$","path","1s2grr",{"d":"M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"}],["$","path","1rf3ol",{"d":"M20 2v4"}],["$","path","gwowj6",{"d":"M22 4h-4"}],["$","circle","6kqj1y",{"cx":"4","cy":"20","r":"2"}],"$undefined"]}],"React"]}]}],["$","h1",null,{"className":"learn-title-mark mt-4 text-[27px] leading-[1.25] font-semibold tracking-tight sm:text-[34px]","children":"初级 08"}],["$","p",null,{"className":"mt-3 max-w-[640px] pl-4 text-[14.5px] leading-[1.8]","style":{"color":"var(--learn-text-dim)"},"children":"React初级题库第 8 组，共 7 张卡片。"}],["$","dl",null,{"className":"learn-num mt-5 flex flex-wrap items-center gap-x-6 gap-y-2 text-[13px]","style":{"color":"var(--learn-text-dim)"},"children":[["$","div",null,{"className":"inline-flex items-center gap-1.5","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-layers size-3.5","aria-hidden":true,"children":[["$","path","zw3jo",{"d":"M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"}],["$","path","1wduqc",{"d":"M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"}],["$","path","kqbvx6",{"d":"M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"}],"$undefined"]}],["$","dt",null,{"className":"sr-only","children":"卡片数"}],["$","dd",null,{"children":[7," 张卡"]}]]}],["$","div",null,{"className":"inline-flex items-center gap-1.5","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-clock3 lucide-clock-3 size-3.5","aria-hidden":true,"children":[["$","path","135r8i",{"d":"M12 6v6h4"}],["$","circle","1mglay",{"cx":"12","cy":"12","r":"10"}],"$undefined"]}],["$","dt",null,{"className":"sr-only","children":"预估时长"}],["$","dd",null,{"children":["约 ",8," 分钟"]}]]}],null]}]]}]}],["$","div",null,{"className":"mx-auto max-w-[1320px] px-4 pt-8 pb-16 sm:px-6","children":["$","div",null,{"className":"grid gap-6 lg:grid-cols-[minmax(0,1fr)_300px]","children":[["$","div",null,{"className":"max-w-[860px] min-w-0","children":[["$","$L21",null,{"node":{"id":"react-g1-08","trackKey":"react","title":"初级 08","summary":"React初级题库第 8 组，共 7 张卡片。","prerequisites":[],"cardCount":7,"estimatedMinutes":8,"preview":false,"bankCategory":"React","sourceType":"bank"},"trackTitle":"React","cards":[{"id":"bank-3d32a27a6a7c7352000cc66c74d46249","trackKey":"react","nodeId":"react-g1-08","type":"choice","difficulty":1,"prompt":"对于一个受控文本输入框，下列哪种实现能够在用户输入时正常更新显示值？","promptDetail":"组件使用 `const` [`name`, `setName`] = `useState('')` 保存输入内容。","hints":[],"answer":"应选择 A。","keyPoints":["答案：A","逐项解析"],"explanation":"## 答案：A\n\n应选择 `A`。受控输入框的当前值由 `React` 状态通过 `value` 属性决定，`onChange` 则需要把用户输入同步回状态，形成单一数据来源。只提供 `value` 而不更新状态会使输入只读；`defaultValue` 仅用于设置非受控输入的初始值；直接给渲染快照中的变量赋值既不符合状态模型，也不会触发重新渲染。\n\n### 逐项解析\n\n- **A（正确）**：`value` 始终读取 `name`，`onChange` 又通过状态更新保存新的输入值。下一次渲染会将新状态传回 `input`，构成完整的受控数据流。\n\n- **B（错误）**：提供 `value` 后，`React` 状态成为输入值来源，但这里没有可用的更新处理器。用户键入内容后，界面仍会被当前 `name` 值约束。\n\n- **C（错误）**：`defaultValue` 只在初始化非受控输入时提供默认内容，之后 `DOM` 自己维护值。`name` 后续变化不保证同步到输入框，因此不属于受控实现。\n\n- **D（错误）**：`name` 是本次渲染获得的状态值，不能用赋值代替 `setName`。即使局部变量允许修改，也不会通知 `React` 安排新的组件渲染。\n\n### 易错点\n\n输入框通常不应在生命周期中从非受控切换为受控，或反向切换。受控 `value` 应保持类型一致，文本输入常用空字符串表示暂无内容。","tags":["react"],"readMore":{"title":"在题库里看这道题","path":"/weapp-interview/3d32a27a6a7c7352000cc66c74d46249"},"sourceType":"bank","sourcePath":"cloudbase://questionList/3d32a27a6a7c7352000cc66c74d46249","sourceAnchor":"","sourceHash":"","generatorVersion":1,"contentVersion":1,"bankQuestionId":"3d32a27a6a7c7352000cc66c74d46249","bankUpdateTime":"2026-08-12T14:03:01.591Z","options":[{"id":"a","text":" setName(e.target.value)} />","correct":true},{"id":"b","text":"","correct":false},{"id":"c","text":" setName(e.target.value)} />","correct":false},{"id":"d","text":" name = e.target.value} />","correct":false}],"explanationHtml":"

答案：A

应选择 A。受控输入框的当前值由 React 状态通过 value 属性决定，onChange 则需要把用户输入同步回状态，形成单一数据来源。只提供 value 而不更新状态会使输入只读；defaultValue 仅用于设置非受控输入的初始值；直接给渲染快照中的变量赋值既不符合状态模型，也不会触发重新渲染。

逐项解析

\n
A（正确）：value 始终读取 name，onChange 又通过状态更新保存新的输入值。下一次渲染会将新状态传回 input，构成完整的受控数据流。
\n
\n
B（错误）：提供 value 后，React 状态成为输入值来源，但这里没有可用的更新处理器。用户键入内容后，界面仍会被当前 name 值约束。
\n
\n
C（错误）：defaultValue 只在初始化非受控输入时提供默认内容，之后 DOM 自己维护值。name 后续变化不保证同步到输入框，因此不属于受控实现。
\n
\n
D（错误）：name 是本次渲染获得的状态值，不能用赋值代替 setName。即使局部变量允许修改，也不会通知 React 安排新的组件渲染。
\n

易错点

输入框通常不应在生命周期中从非受控切换为受控，或反向切换。受控 value 应保持类型一致，文本输入常用空字符串表示暂无内容。

\n","promptHtml":"对于一个受控文本输入框，下列哪种实现能够在用户输入时正常更新显示值？","promptDetailHtml":"

组件使用 const [name, setName] = useState('') 保存输入内容。

\n","answerHtml":"应选择 A。","hintsHtml":[],"keyPointsHtml":["答案：A","逐项解析"],"followUpHtml":"","followUpAnswerHtml":"","optionsHtml":{"a":"<input value={name} onChange={e => setName(e.target.value)} />","b":"<input value={name} />","c":"<input defaultValue={name} onChange={e => setName(e.target.value)} />","d":"<input value={name} onChange={e => name = e.target.value} />"}},{"id":"bank-43af56d46a7c734f00019a6b3799f694","trackKey":"react","nodeId":"react-g1-08","type":"choice","difficulty":1,"prompt":"关于现代 React 中 JSX 的本质，下列说法哪一项最准确？","promptDetail":"假设项目使用支持新版 `JSX` `transform` 的编译工具，并且 `JSX` 中没有自定义编译指令。","hints":[],"answer":"应选择 B。","keyPoints":["答案：B","逐项解析"],"explanation":"## 答案：B\n\n应选择 `B`。`JSX` 是 `JavaScript` 的语法扩展，通常由 `Babel`、`TypeScript` 或其他构建工具转换为 `jsx`、`jsxs` 等运行时调用，旧转换方式则可能生成 `React.createElement` 调用。这些调用创建的是用于描述界面结构的 `React` 元素，而不是立即操作浏览器 `DOM`。之后由 `React` 根据元素树协调并提交实际界面变更。\n\n### 逐项解析\n\n- **A（错误）**：浏览器的 `JavaScript` 解析器通常不能直接执行 `JSX`。它看起来类似 `HTML`，但具有 `JavaScript` 表达式、组件和属性命名等独立语义，需要预先转换。\n\n- **B（正确）**：该表述同时涵盖新版 `JSX` `runtime` 与旧版 `createElement` 转换方式，也正确区分了 `React` 元素描述和最终真实 `DOM` 节点。\n\n- **C（错误）**：`JSX` 的编译结果只是普通 `JavaScript` 调用，并不会在构建阶段获得运行时 `DOM` 环境，也不会直接生成或缓存用户浏览器中的节点。\n\n- **D（错误）**：首字母大写的 `JSX` 标签可以表示 `React` 组件，编译结果会把组件标识符作为元素类型传入，并不要求开发者手动调用组件函数。\n\n### 易错点\n\n`React` 元素、组件实例和真实 `DOM` 是三个不同概念。尤其不要把 `JSX` 编译等同于模板字符串拼接，也不要直接调用函数组件来替代 `JSX`。","tags":["react"],"readMore":{"title":"在题库里看这道题","path":"/weapp-interview/43af56d46a7c734f00019a6b3799f694"},"sourceType":"bank","sourcePath":"cloudbase://questionList/43af56d46a7c734f00019a6b3799f694","sourceAnchor":"","sourceHash":"","generatorVersion":1,"contentVersion":1,"bankQuestionId":"43af56d46a7c734f00019a6b3799f694","bankUpdateTime":"2026-08-12T14:03:01.591Z","options":[{"id":"a","text":"JSX 是浏览器原生支持的一种 HTML 模板语法","correct":false},{"id":"b","text":"JSX 通常会在构建阶段转换为创建 React 元素描述的 JavaScript 调用","correct":true},{"id":"c","text":"JSX 编译后会直接生成真实 DOM 节点并缓存起来","correct":false},{"id":"d","text":"JSX 只能表达原生标签，组件必须通过普通函数调用使用","correct":false}],"explanationHtml":"$22","promptHtml":"关于现代 React 中 JSX 的本质，下列说法哪一项最准确？","promptDetailHtml":"

假设项目使用支持新版 JSX transform 的编译工具，并且 JSX 中没有自定义编译指令。

\n","answerHtml":"应选择 B。","hintsHtml":[],"keyPointsHtml":["答案：B","逐项解析"],"followUpHtml":"","followUpAnswerHtml":"","optionsHtml":{"a":"JSX 是浏览器原生支持的一种 HTML 模板语法","b":"JSX 通常会在构建阶段转换为创建 React 元素描述的 JavaScript 调用","c":"JSX 编译后会直接生成真实 DOM 节点并缓存起来","d":"JSX 只能表达原生标签，组件必须通过普通函数调用使用"}},{"id":"bank-43af56d46a7c734f00019a6c416acc38","trackKey":"react","nodeId":"react-g1-08","type":"choice","difficulty":1,"prompt":"关于 React 合成事件中的事件传播，下列处理方式哪一项能够阻止事件继续冒泡到 React 父元素处理器？","promptDetail":"父元素和子按钮都声明了 `onClick`，要求点击按钮时只执行按钮自己的 `React` `onClick`。","hints":[],"answer":"应选择 A。","keyPoints":["答案：A","逐项解析"],"explanation":"## 答案：A\n\n应选择 `A`。`React` 向处理器提供符合统一接口的事件对象，调用 `stopPropagation` 可以停止该事件沿传播路径继续到达父级 `React` 事件处理器。`preventDefault` 解决的是浏览器默认行为，不负责阻止传播；返回 `false` 也不是 `React` 约定的传播控制方式。现代 `React` 中事件对象通常也不再需要通过 `persist` 保留。\n\n### 逐项解析\n\n- **A（正确）**：`stopPropagation` 的职责就是阻止事件继续传播，因此子按钮处理完成后，父元素注册的冒泡阶段 `React` `onClick` 不会因该次传播而执行。\n\n- **B（错误）**：`preventDefault` 用于取消链接跳转、表单提交等可取消的默认行为。默认行为与事件冒泡是两个维度，调用它不会自动阻止父处理器。\n\n- **C（错误）**：`React` 事件处理器不会把返回 `false` 解释为同时取消默认行为和冒泡。需要哪种控制，就应显式调用对应的事件对象方法。\n\n- **D（错误）**：`persist` 在旧版事件池机制下用于延长事件对象的可用期，它不改变捕获或冒泡路径，而且现代 `React` 中通常已经没有调用它的必要。\n\n### 易错点\n\n停止 `React` 树中的事件传播不等于能够任意屏蔽所有原生监听器；混用原生事件、捕获阶段监听器和多个 `React` 根节点时，应明确监听位置与阶段。","tags":["react"],"readMore":{"title":"在题库里看这道题","path":"/weapp-interview/43af56d46a7c734f00019a6c416acc38"},"sourceType":"bank","sourcePath":"cloudbase://questionList/43af56d46a7c734f00019a6c416acc38","sourceAnchor":"","sourceHash":"","generatorVersion":1,"contentVersion":1,"bankQuestionId":"43af56d46a7c734f00019a6c416acc38","bankUpdateTime":"2026-08-12T14:03:01.591Z","options":[{"id":"a","text":"在按钮的 onClick 中调用 event.stopPropagation()","correct":true},{"id":"b","text":"在按钮的 onClick 中调用 event.preventDefault()","correct":false},{"id":"c","text":"让按钮的 onClick 返回 false","correct":false},{"id":"d","text":"在按钮的 onClick 结束后调用 event.persist()","correct":false}],"explanationHtml":"

答案：A

应选择 A。React 向处理器提供符合统一接口的事件对象，调用 stopPropagation 可以停止该事件沿传播路径继续到达父级 React 事件处理器。preventDefault 解决的是浏览器默认行为，不负责阻止传播；返回 false 也不是 React 约定的传播控制方式。现代 React 中事件对象通常也不再需要通过 persist 保留。

逐项解析

\n
A（正确）：stopPropagation 的职责就是阻止事件继续传播，因此子按钮处理完成后，父元素注册的冒泡阶段 React onClick 不会因该次传播而执行。
\n
\n
B（错误）：preventDefault 用于取消链接跳转、表单提交等可取消的默认行为。默认行为与事件冒泡是两个维度，调用它不会自动阻止父处理器。
\n
\n
C（错误）：React 事件处理器不会把返回 false 解释为同时取消默认行为和冒泡。需要哪种控制，就应显式调用对应的事件对象方法。
\n
\n
D（错误）：persist 在旧版事件池机制下用于延长事件对象的可用期，它不改变捕获或冒泡路径，而且现代 React 中通常已经没有调用它的必要。
\n

易错点

停止 React 树中的事件传播不等于能够任意屏蔽所有原生监听器；混用原生事件、捕获阶段监听器和多个 React 根节点时，应明确监听位置与阶段。

\n","promptHtml":"关于 React 合成事件中的事件传播，下列处理方式哪一项能够阻止事件继续冒泡到 React 父元素处理器？","promptDetailHtml":"

父元素和子按钮都声明了 onClick，要求点击按钮时只执行按钮自己的 React onClick。

\n","answerHtml":"应选择 A。","hintsHtml":[],"keyPointsHtml":["答案：A","逐项解析"],"followUpHtml":"","followUpAnswerHtml":"","optionsHtml":{"a":"在按钮的 onClick 中调用 event.stopPropagation()","b":"在按钮的 onClick 中调用 event.preventDefault()","c":"让按钮的 onClick 返回 false","d":"在按钮的 onClick 结束后调用 event.persist()"}},{"id":"bank-43af56d46a7c735100019a6e760022b0","trackKey":"react","nodeId":"react-g1-08","type":"choice","difficulty":1,"prompt":"渲染可重新排序的消息列表时，哪一项最适合作为 React 元素的 key？","promptDetail":"```css\nmessages 会被插入、删除和拖拽排序；每条消息结构为 { id, text, createdAt }，其中 id 在整个列表生命周期内唯一且稳定。\n```","hints":[],"answer":"应选择 C。","keyPoints":["答案：C","逐项解析"],"explanation":"## 答案：C\n\n应选择 `C`。`key` 帮助 `React` 在同一父节点下识别列表项跨渲染的身份，从而在插入、删除和重排时把既有组件状态与正确的数据项对应起来。稳定且唯一的业务 `id` 能表达这种身份。数组下标会随排序改变，随机值每次都变，可能重复的文本也无法可靠地区分兄弟节点。\n\n### 逐项解析\n\n- **A（错误）**：下标描述的是当前位置而不是消息身份。列表重排后，同一个下标可能对应另一条消息，使输入状态或局部组件状态被错误地复用。\n\n- **B（错误）**：随机 `key` 在每次渲染时都会变化，`React` 会把原节点视为已删除并创建新节点，导致组件状态丢失、`Effect` 重新执行并增加提交成本。\n\n- **C（正确）**：稳定唯一的 `id` 与消息实体绑定，在列表位置变化后仍保持不变，因此 `React` 可以可靠匹配同一条消息对应的元素和组件状态。\n\n- **D（错误）**：文本不是可靠身份字段，多条消息可能内容相同，内容编辑时它也会变化。重复或不稳定的 `key` 都可能破坏协调过程中的匹配。\n\n### 易错点\n\n`key` 只需在同一组兄弟节点之间唯一，并不会作为普通 `prop` 自动传入子组件。若组件需要该 `id`，应另外显式传递相应属性。","tags":["react"],"readMore":{"title":"在题库里看这道题","path":"/weapp-interview/43af56d46a7c735100019a6e760022b0"},"sourceType":"bank","sourcePath":"cloudbase://questionList/43af56d46a7c735100019a6e760022b0","sourceAnchor":"","sourceHash":"","generatorVersion":1,"contentVersion":1,"bankQuestionId":"43af56d46a7c735100019a6e760022b0","bankUpdateTime":"2026-08-12T14:03:01.591Z","options":[{"id":"a","text":"当前数组下标 index","correct":false},{"id":"b","text":"每次渲染时调用 Math.random()","correct":false},{"id":"c","text":"消息自身稳定且唯一的 id","correct":true},{"id":"d","text":"消息可能重复的 text","correct":false}],"explanationHtml":"

答案：C

应选择 C。key 帮助 React 在同一父节点下识别列表项跨渲染的身份，从而在插入、删除和重排时把既有组件状态与正确的数据项对应起来。稳定且唯一的业务 id 能表达这种身份。数组下标会随排序改变，随机值每次都变，可能重复的文本也无法可靠地区分兄弟节点。

逐项解析

\n
A（错误）：下标描述的是当前位置而不是消息身份。列表重排后，同一个下标可能对应另一条消息，使输入状态或局部组件状态被错误地复用。
\n
\n
B（错误）：随机 key 在每次渲染时都会变化，React 会把原节点视为已删除并创建新节点，导致组件状态丢失、Effect 重新执行并增加提交成本。
\n
\n
C（正确）：稳定唯一的 id 与消息实体绑定，在列表位置变化后仍保持不变，因此 React 可以可靠匹配同一条消息对应的元素和组件状态。
\n
\n
D（错误）：文本不是可靠身份字段，多条消息可能内容相同，内容编辑时它也会变化。重复或不稳定的 key 都可能破坏协调过程中的匹配。
\n

易错点

key 只需在同一组兄弟节点之间唯一，并不会作为普通 prop 自动传入子组件。若组件需要该 id，应另外显式传递相应属性。

\n","promptHtml":"渲染可重新排序的消息列表时，哪一项最适合作为 React 元素的 key？","promptDetailHtml":"

messages 会被插入、删除和拖拽排序；每条消息结构为 { id, text, createdAt }，其中 id 在整个列表生命周期内唯一且稳定。\n

","answerHtml":"应选择 C。","hintsHtml":[],"keyPointsHtml":["答案：C","逐项解析"],"followUpHtml":"","followUpAnswerHtml":"","optionsHtml":{"a":"当前数组下标 index","b":"每次渲染时调用 Math.random()","c":"消息自身稳定且唯一的 id","d":"消息可能重复的 text"}},{"id":"bank-7f33a8796a7c73550011489c2e25754a","trackKey":"react","nodeId":"react-g1-08","type":"choice","difficulty":1,"prompt":"以下 JSX 在 count 为 0 时会渲染出什么可见内容？","promptDetail":"```js\nfunction Result({ count }) {\n return (\n

\n {count && {count}}\n {count === 0 && 空}\n

\n );\n}\n```","hints":[],"answer":"JSX 中花括号里的内容先按普通 JavaScript 表达式求值。","keyPoints":["答案：C","逐项解析"],"explanation":"## 答案：C\n\n`JSX` 中花括号里的内容先按普通 `JavaScript` 表达式求值。`count` && <`strong`>... 在 `count` 为 0 时返回数值 0，而 `React` 会渲染数字，因此先出现“0”，但不会创建 `strong` 元素。第二个表达式 `count` === 0 为 `true`，于是返回并渲染 `em` 元素及文本“空”。最终 `div` 的可见内容顺序是数字 0 后接“空”，这也是用逻辑与进行条件渲染时常见的零值陷阱。\n\n### 逐项解析\n\n- **A（错误）**：该选项错误。第二个表达式确实会渲染“空”，但第一个逻辑与表达式的结果是可渲染的数字 0，而不是会被 `React` 忽略的 `false`。\n\n- **B（错误）**：该选项错误。第一个表达式贡献了数字 0，但 `count` === 0 的判断也成立，因此 `em` 元素同样会被创建并显示其文本内容。\n\n- **C（正确）**：该选项正确。`React` 会忽略布尔值、`null` 和 `undefined` 这类空节点，却会把数值 0 当作正常文本节点渲染，随后再渲染 `em` 中的“空”。\n\n- **D（错误）**：该选项错误。两个表达式都产生了可见输出：前者最终是数字文本节点 0，后者最终是包含“空”的 `em` 元素，并非都被过滤。\n\n### 易错点\n\n不要把 `JavaScript` 中的假值与 `React` 中不渲染的值完全等同。数量可能为零时，更稳妥的写法是 `count` > 0 ? <`strong`>{`count`} : `null`。","tags":["react"],"readMore":{"title":"在题库里看这道题","path":"/weapp-interview/7f33a8796a7c73550011489c2e25754a"},"sourceType":"bank","sourcePath":"cloudbase://questionList/7f33a8796a7c73550011489c2e25754a","sourceAnchor":"","sourceHash":"","generatorVersion":1,"contentVersion":1,"bankQuestionId":"7f33a8796a7c73550011489c2e25754a","bankUpdateTime":"2026-08-12T14:03:01.591Z","options":[{"id":"a","text":"只显示“空”","correct":false},{"id":"b","text":"只显示数字“0”","correct":false},{"id":"c","text":"先显示数字“0”，随后显示“空”","correct":true},{"id":"d","text":"div 内没有任何可见内容","correct":false}],"explanationHtml":"$23","promptHtml":"以下 JSX 在 count 为 0 时会渲染出什么可见内容？","promptDetailHtml":"

function Result({ count }) {\n  return (\n    <div>\n      {count && <strong>{count}</strong>}\n      {count === 0 && <em>空</em>}\n    </div>\n  );\n}\n

","answerHtml":"JSX 中花括号里的内容先按普通 JavaScript 表达式求值。","hintsHtml":[],"keyPointsHtml":["答案：C","逐项解析"],"followUpHtml":"","followUpAnswerHtml":"","optionsHtml":{"a":"只显示“空”","b":"只显示数字“0”","c":"先显示数字“0”，随后显示“空”","d":"div 内没有任何可见内容"}},{"id":"bank-7f33a8796a7c959a0011b93d6c4cf741","trackKey":"react","nodeId":"react-g1-08","type":"recall","difficulty":1,"prompt":"React Hooks 的常见类型、使用场景与选择原则","hints":[],"answer":"React Hooks 不应只按“用过哪些”罗列名称，更重要的是说明每个 Hook 解决什么问题、依赖关系如何管理，以及何时不应使用。","keyPoints":[],"explanation":"$24","tags":["react"],"readMore":{"title":"在题库里看这道题","path":"/weapp-interview/7f33a8796a7c959a0011b93d6c4cf741"},"sourceType":"bank","sourcePath":"cloudbase://questionList/7f33a8796a7c959a0011b93d6c4cf741","sourceAnchor":"","sourceHash":"","generatorVersion":1,"contentVersion":1,"bankQuestionId":"7f33a8796a7c959a0011b93d6c4cf741","bankUpdateTime":"2026-08-12T15:47:30.583Z","explanationHtml":"$25","promptHtml":"React Hooks 的常见类型、使用场景与选择原则","promptDetailHtml":"","answerHtml":"React Hooks 不应只按“用过哪些”罗列名称，更重要的是说明每个 Hook 解决什么问题、依赖关系如何管理，以及何时不应使用。","hintsHtml":[],"keyPointsHtml":[],"followUpHtml":"","followUpAnswerHtml":"","optionsHtml":{}},{"id":"bank-7f33a8796a7c963d0011bb993295dfa3","trackKey":"react","nodeId":"react-g1-08","type":"recall","difficulty":1,"prompt":"JSBridge 适用于哪些工程场景","hints":[],"answer":"JSBridge 适用于网页被嵌入原生应用，并且网页需要使用浏览器沙箱之外的受控能力，或者原生应用需要向网页主动同步状态的场景。","keyPoints":["核心结论","典型工程场景","不同技术中的边界","设计示例","引入桥接层的代价","常见误区"],"explanation":"$26","tags":["react"],"readMore":{"title":"在题库里看这道题","path":"/weapp-interview/7f33a8796a7c963d0011bb993295dfa3"},"sourceType":"bank","sourcePath":"cloudbase://questionList/7f33a8796a7c963d0011bb993295dfa3","sourceAnchor":"","sourceHash":"","generatorVersion":1,"contentVersion":1,"bankQuestionId":"7f33a8796a7c963d0011bb993295dfa3","bankUpdateTime":"2026-08-12T15:47:30.583Z","explanationHtml":"$27","promptHtml":"JSBridge 适用于哪些工程场景","promptDetailHtml":"","answerHtml":"JSBridge 适用于网页被嵌入原生应用，并且网页需要使用浏览器沙箱之外的受控能力，或者原生应用需要向网页主动同步状态的场景。","hintsHtml":[],"keyPointsHtml":["核心结论","典型工程场景","不同技术中的边界","设计示例","引入桥接层的代价","常见误区"],"followUpHtml":"","followUpAnswerHtml":"","optionsHtml":{}}]}],"$L28"]}],"$L29"]}]}],"$L2a"]

对于一个受控文本输入框，下列哪种实现能够在用户输入时正常更新显示值？

1对于一个受控文本输入框，下列哪种实现能够在用户输入时正常更新显示值？

2关于现代 React 中 JSX 的本质，下列说法哪一项最准确？

3关于 React 合成事件中的事件传播，下列处理方式哪一项能够阻止事件继续冒泡到 React 父元素处理器？

4渲染可重新排序的消息列表时，哪一项最适合作为 React 元素的 key？

5以下 JSX 在 count 为 0 时会渲染出什么可见内容？

6React Hooks 的常见类型、使用场景与选择原则

7JSBridge 适用于哪些工程场景