如何拆分React应用中的长任务？Chrome性能分析场景

为什么这些组件会在同一个任务里渲染？ #

1. React默认同步渲染机制：React在非并发模式下，会把同一次更新触发的所有组件渲染工作放在一个宏任务中同步执行。只要是同一次状态/路由更新影响到的组件（比如Layout及其子组件、Footer），都会被一次性调度完成，不会自动拆分任务。
2. 共享状态/更新触发源：如果Layout和Footer依赖同一个全局状态、路由变化或者顶层组件的状态更新，那么这次更新会同时触发两者的重新渲染，所有渲染逻辑会被打包进同一个长任务。
3. 未启用并发特性：如果你的应用还在使用旧版的ReactDOM.render（而非createRoot），或者没有使用startTransition/useDeferredValue等并发API，React无法将渲染工作拆分为多个小任务。

拆分长任务的可行方案 #

• 标记非紧急更新为过渡任务：用startTransition包裹非关键的更新逻辑（比如路由切换、非首屏内容的渲染），React会将这部分渲染工作拆分为多个不阻塞主线程的小任务。示例：

import { startTransition } from 'react';
import { useNavigate } from 'react-router-dom';

function Navbar() {
  const navigate = useNavigate();

  const handleRouteChange = (path) => {
    startTransition(() => {
      navigate(path);
    });
  };

  return <button onClick={() => handleRouteChange('/dashboard')}>Dashboard</button>;
}

• 延迟非关键组件的渲染：对于Footer这类非首屏必需的组件，使用useDeferredValue让它在主渲染任务完成后再进行渲染：

import { useDeferredValue } from 'react';

function App() {
  const deferredFooter = useDeferredValue(<Footer />);

  return (
    <>
      <Layout>
        <Navbar />
        <Sidebar />
        <Routes />
      </Layout>
      {deferredFooter}
    </>
  );
}

• 拆分状态依赖范围：检查Layout和Footer是否共享不必要的状态。如果Footer的渲染依赖仅和自身相关，将状态下移到Footer组件内部，避免因Layout的更新触发Footer的同步渲染。

• 启用React并发模式：确保应用使用ReactDOM.createRoot进行渲染（React 18+），这是使用所有并发特性的前提：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

内容的提问来源于stack exchange，提问作者Nemus