标准答案

  1. 并发渲染不是多线程渲染,而是 React 可以在渲染工作之间切换优先级。
  2. 低优先级更新可以被中断或延后,高优先级输入、点击等交互能更快响应。
  3. React 18 暴露了 useTransition、useDeferredValue、自动批处理等与并发能力相关的 API 和行为。
  4. 渲染阶段可能被重复调用或被丢弃,所以组件渲染必须是纯函数式的,不能在 render 里执行副作用。
  5. 严格模式在开发环境中会更容易暴露不纯渲染、effect 清理不完整等问题。

题目解析

这道题容易被答成“React 变快了”。更准确的说法是 React 有了更强的调度能力,可以让重要交互优先。

并发能力不会自动解决所有性能问题。组件拆分、状态位置、memo、虚拟滚动仍然重要。

如果组件在渲染阶段发请求、改全局变量或依赖一次性副作用,并发渲染下更容易出现问题。

代码示例

下面用 startTransition 把结果页切换标记为非紧急更新。

TSX
function SearchTabs() {
  const [tab, setTab] = useState('all')
  const [isPending, startTransition] = useTransition()

  function switchTab(nextTab: string) {
    startTransition(() => {
      setTab(nextTab)
    })
  }

  return (
    <>
      {isPending ? <span>切换中</span> : null}
      <TabPanel activeTab={tab} onChange={switchTab} />
    </>
  )
}

常见误区

  • 把并发渲染理解成浏览器多线程同时渲染多个组件。
  • 渲染阶段写副作用,遇到重复渲染或中断时出现不可预测行为。
  • 以为升级 React 18 后不需要再做组件拆分和性能分析。

作者信息