React 18 并发渲染下直接用 useState 加外部可变数据读取为什么会出现 tearing(界面撕裂)?
React 18 并发渲染下直接用 useState 加外部可变数据读取为什么会出现 tearing(界面撕裂)? 本文先给出可直接复述的结论，再用最小代码说明React 18 并发渲染 tearing 外部 store的工作方式、判断依据、项目边界和常见误区。
核心关键词React 18 并发渲染 tearing 外部 store
面试知识索引 · 分类、标签与搜索
React · 并发编程面试题，35 道完整答案
React · 并发编程面试题第 1 页，显示第 1–35 题，共找到 35 道完整解析，可继续按分类、标签与关键词缩小范围。
35筛选结果
52技术分类
178检索标签
1索引分页
快速定位
清除全部筛选分类、标签与关键词搜索
第 1 页
本页面试问题
按稳定语义路径排序
- 0001
- 0002
React 并发特性下，为什么 Effect 代码要假设状态可能被复用或提交前重试，而不是按一次挂载一次卸载写死？
React 并发特性下，为什么 Effect 代码要假设状态可能被复用或提交前重试，而不是按一次挂载一次卸载写死？ 本文先给出可直接复述的结论，再用最小代码说明React 并发 Effect 可重试 状态复用 正确性的工作方式、判断依据、项目边界和常见误区。
核心关键词React 并发 Effect 可重试 状态复用 正确性 - 0003
React 18 订阅外部 store 时，为什么 useSyncExternalStore 常优于手写 useEffect + setState？
React 18 订阅外部 store 时，为什么 useSyncExternalStore 常优于手写 useEffect + setState？ 本文先给出可直接复述的结论，再用最小代码说明React 18 useSyncExternalStore 外部 store useEffect的工作方式、判断依据、项目边界和常见误区。
核心关键词React 18 useSyncExternalStore 外部 store useEffect - 0004
React 的 useSyncExternalStore 是为解决什么问题而设计的？
React 的 useSyncExternalStore 是为解决什么问题而设计的？ 本文先给出可直接复述的结论，再用最小代码说明React useSyncExternalStore tearing 并发的工作方式、判断依据、项目边界和常见误区。
核心关键词React useSyncExternalStore tearing 并发 - 0005
React 并发渲染中『渲染可中断』具体指什么，中断后工作会被浪费吗？
React 并发渲染中『渲染可中断』具体指什么，中断后工作会被浪费吗？ 本文先给出可直接复述的结论，再用最小代码说明React 并发渲染 可中断 时间切片的工作方式、判断依据、项目边界和常见误区。
核心关键词React 并发渲染 可中断 时间切片 - 0006
用 React DevTools Profiler 的火焰图和排序图如何定位最耗时的组件？
用 React DevTools Profiler 的火焰图和排序图如何定位最耗时的组件？ 本文先给出可直接复述的结论，再用最小代码说明React DevTools Profiler 火焰图 定位慢组件的工作方式、判断依据、项目边界和常见误区。
核心关键词React DevTools Profiler 火焰图 定位慢组件 - 0007
如何诊断一个组件发生了本不该发生的重渲染，根因通常有哪些？
如何诊断一个组件发生了本不该发生的重渲染，根因通常有哪些？ 本文先给出可直接复述的结论，再用最小代码说明React 排查 多余重渲染 原因的工作方式、判断依据、项目边界和常见误区。
核心关键词React 排查 多余重渲染 原因 - 0008
React.memo 的 arePropsEqual 如何编写，为什么不能忽略函数 prop？
通过候选人列表说明 React.memo 自定义比较器需要覆盖全部输出与事件行为，解释函数 prop 导致旧闭包的风险、不可变数据前提，以及有界逐项比较和深比较的成本取舍。
核心关键词React.memo arePropsEqual 自定义比较 - 0009
给 memo 子组件传内联对象或函数为什么会失去优化机会？
解释内联对象与箭头函数每轮产生新引用的原因，用筛选工具栏示例展示 useMemo 和 useCallback 的完整依赖，并讨论减少 props、移动对象创建位置和避免空依赖闭包错误。
核心关键词React.memo 内联对象 函数 props 失效 - 0010
React.memo 在什么条件下能跳过子组件渲染？
用父组件计数与子组件成绩卡的示例解释 React.memo 如何逐项比较 props，区分父级更新、本地状态、Context 和重新挂载，并说明渲染次数为什么不能成为业务正确性的条件。
核心关键词React.memo 跳过重渲染 浅比较 - 0011
React.memo、PureComponent 和 shouldComponentUpdate 有什么区别？
对照函数组件与类组件解释 memo 和 PureComponent 的比较范围，使用独立展开状态演示自身更新，说明 shouldComponentUpdate 与 arePropsEqual 返回值方向，以及迁移时的 state 合并差异。
核心关键词React.memo PureComponent shouldComponentUpdate 区别 - 0012
什么情况下 React.memo 没有收益，甚至增加成本？
什么情况下 React.memo 没有收益，甚至增加成本？ 本文先给出可直接复述的结论，再用最小代码说明React.memo 过度使用 无收益 场景的工作方式、判断依据、项目边界和常见误区。
核心关键词React.memo 过度使用 无收益 场景 - 0013
React 如何决定多个待处理更新的先后顺序，车道优先级模型解决什么问题？
React 如何决定多个待处理更新的先后顺序，车道优先级模型解决什么问题？ 本文先给出可直接复述的结论，再用最小代码说明React 更新优先级 lanes 调度的工作方式、判断依据、项目边界和常见误区。
核心关键词React 更新优先级 lanes 调度 - 0014
React Profiler 组件如何包裹子树，onRender 回调能拿到哪些指标？
React Profiler 组件如何包裹子树，onRender 回调能拿到哪些指标？ 本文先给出可直接复述的结论，再用最小代码说明React Profiler onRender 参数 用法的工作方式、判断依据、项目边界和常见误区。
核心关键词React Profiler onRender 参数 用法 - 0015
Profiler 报告的 actualDuration 与 baseDuration 差异说明什么优化机会？
Profiler 报告的 actualDuration 与 baseDuration 差异说明什么优化机会？ 本文先给出可直接复述的结论，再用最小代码说明Profiler actualDuration baseDuration 区别的工作方式、判断依据、项目边界和常见误区。
核心关键词Profiler actualDuration baseDuration 区别 - 0016
为什么生产环境默认拿不到 React Profiler 数据， profiling 构建有什么开销？
为什么生产环境默认拿不到 React Profiler 数据， profiling 构建有什么开销？ 本文先给出可直接复述的结论，再用最小代码说明React Profiler 生产环境 开销的工作方式、判断依据、项目边界和常见误区。
核心关键词React Profiler 生产环境 开销 - 0017
为什么并发渲染要求组件渲染必须是纯函数，副作用应该放在哪里？
为什么并发渲染要求组件渲染必须是纯函数，副作用应该放在哪里？ 本文先给出可直接复述的结论，再用最小代码说明React 渲染纯函数 副作用 useEffect 并发的工作方式、判断依据、项目边界和常见误区。
核心关键词React 渲染纯函数 副作用 useEffect 并发 - 0018
React 的 render 阶段和 commit 阶段分别做什么，对性能优化有什么意义？
React 的 render 阶段和 commit 阶段分别做什么，对性能优化有什么意义？ 本文先给出可直接复述的结论，再用最小代码说明React render 阶段 commit 阶段 区别的工作方式、判断依据、项目边界和常见误区。
核心关键词React render 阶段 commit 阶段 区别 - 0019
startTransition 标记的非紧急更新在调度上有什么不同的行为？
startTransition 标记的非紧急更新在调度上有什么不同的行为？ 本文先给出可直接复述的结论，再用最小代码说明startTransition 非紧急更新 并发的工作方式、判断依据、项目边界和常见误区。
核心关键词startTransition 非紧急更新 并发 - 0020
并发渲染下直接订阅外部 store 为什么会出现 tearing，useSyncExternalStore 如何解决？
并发渲染下直接订阅外部 store 为什么会出现 tearing，useSyncExternalStore 如何解决？ 本文先给出可直接复述的结论，再用最小代码说明React tearing useSyncExternalStore 外部状态的工作方式、判断依据、项目边界和常见误区。
核心关键词React tearing useSyncExternalStore 外部状态 - 0021
为什么不能把受控输入框的 value 更新包在 startTransition 里？
为什么不能把受控输入框的 value 更新包在 startTransition 里？ 本文先给出可直接复述的结论，再用最小代码说明startTransition 受控输入 不能延迟的工作方式、判断依据、项目边界和常见误区。
核心关键词startTransition 受控输入 不能延迟 - 0022
为什么 transition 不能减少渲染的总工作量，什么场景用它没有收益？
为什么 transition 不能减少渲染的总工作量，什么场景用它没有收益？ 本文先给出可直接复述的结论，再用最小代码说明transition 局限 不减少工作量的工作方式、判断依据、项目边界和常见误区。
核心关键词transition 局限 不减少工作量 - 0023
transition 与 Suspense 配合时如何避免已显示内容被 fallback 骨架屏替换？
transition 与 Suspense 配合时如何避免已显示内容被 fallback 骨架屏替换？ 本文先给出可直接复述的结论，再用最小代码说明transition Suspense fallback 避免闪烁的工作方式、判断依据、项目边界和常见误区。
核心关键词transition Suspense fallback 避免闪烁 - 0024
用 transition 优化搜索输入与用防抖优化有什么本质区别？
用 transition 优化搜索输入与用防抖优化有什么本质区别？ 本文先给出可直接复述的结论，再用最小代码说明React transition 防抖 区别的工作方式、判断依据、项目边界和常见误区。
核心关键词React transition 防抖 区别 - 0025
优化慢列表渲染时，useTransition 和 useDeferredValue 应该如何选择？
优化慢列表渲染时，useTransition 和 useDeferredValue 应该如何选择？ 本文先给出可直接复述的结论，再用最小代码说明useTransition useDeferredValue 选择的工作方式、判断依据、项目边界和常见误区。
核心关键词useTransition useDeferredValue 选择 - 0026
为什么只用 useCallback 而子组件没有 memo，仍然阻止不了子组件重渲染？
为什么只用 useCallback 而子组件没有 memo，仍然阻止不了子组件重渲染？ 本文先给出可直接复述的结论，再用最小代码说明useCallback 配合 memo 才能生效的工作方式、判断依据、项目边界和常见误区。
核心关键词useCallback 配合 memo 才能生效 - 0027
useDeferredValue 在组件首次渲染时是否会产生延迟效果？
useDeferredValue 在组件首次渲染时是否会产生延迟效果？ 本文先给出可直接复述的结论，再用最小代码说明useDeferredValue 首次渲染 相同值的工作方式、判断依据、项目边界和常见误区。
核心关键词useDeferredValue 首次渲染 相同值 - 0028
为什么 useDeferredValue 通常要和 React.memo 配合才能真正看到性能收益？
为什么 useDeferredValue 通常要和 React.memo 配合才能真正看到性能收益？ 本文先给出可直接复述的结论，再用最小代码说明useDeferredValue memo 配合 收益的工作方式、判断依据、项目边界和常见误区。
核心关键词useDeferredValue memo 配合 收益 - 0029
useDeferredValue 返回的滞后值在渲染过程中经历哪两个阶段？
useDeferredValue 返回的滞后值在渲染过程中经历哪两个阶段？ 本文先给出可直接复述的结论，再用最小代码说明useDeferredValue 滞后值 两阶段渲染的工作方式、判断依据、项目边界和常见误区。
核心关键词useDeferredValue 滞后值 两阶段渲染 - 0030
使用 useDeferredValue 时如何判断并提示用户当前展示的是过期内容？
使用 useDeferredValue 时如何判断并提示用户当前展示的是过期内容？ 本文先给出可直接复述的结论，再用最小代码说明useDeferredValue 陈旧内容 isStale 提示的工作方式、判断依据、项目边界和常见误区。
核心关键词useDeferredValue 陈旧内容 isStale 提示 - 0031
什么情况下不该使用 useMemo？
什么情况下不该使用 useMemo？ 本文先给出可直接复述的结论，再用最小代码说明useMemo 不必要的优化 廉价计算的工作方式、判断依据、项目边界和常见误区。
核心关键词useMemo 不必要的优化 廉价计算 - 0032
只在挂载时算一次的昂贵初始值，应该用 useMemo 还是 useState 惰性初始化？
只在挂载时算一次的昂贵初始值，应该用 useMemo 还是 useState 惰性初始化？ 本文先给出可直接复述的结论，再用最小代码说明useMemo useState 惰性初始化 区别的工作方式、判断依据、项目边界和常见误区。
核心关键词useMemo useState 惰性初始化 区别 - 0033
与 props 和 state 无关的常量，放 useMemo 里和提升出组件外有何区别？
与 props 和 state 无关的常量，放 useMemo 里和提升出组件外有何区别？ 本文先给出可直接复述的结论，再用最小代码说明useMemo 模块作用域 常量提升的工作方式、判断依据、项目边界和常见误区。
核心关键词useMemo 模块作用域 常量提升 - 0034
useTransition 返回的 isPending 适合设计什么样的加载反馈？
useTransition 返回的 isPending 适合设计什么样的加载反馈？ 本文先给出可直接复述的结论，再用最小代码说明useTransition isPending 加载反馈的工作方式、判断依据、项目边界和常见误区。
核心关键词useTransition isPending 加载反馈 - 0035
React 什么时候应该用函数式更新，异步任务计数为什么容易出错？
用两个并发保存任务解释函数式更新如何组合加减计数，区分队列中的前一状态与闭包中的其他变量，并说明直接设置确定值仍然合理。
核心关键词React 函数式 updater 异步状态累加