React中如何在不改变页面布局的前提下指定组件渲染顺序

问题核心原因 #

React默认是同步递归渲染的，JSX中排在前面的组件会先执行render逻辑，TopPart包含大量子组件、render耗时长的情况下，整个MyModule组件的虚拟DOM构建会被阻塞，直到TopPart渲染完成才会统一提交到真实DOM，直接导致后面的LowerPart无法优先绘制。

注意：仅靠CSS order属性调整视觉顺序完全无法解决这个问题，CSS只能控制已经渲染到DOM的元素的展示顺序，不会改变JSX的渲染执行顺序。

可行实现方案 #

方案1：useEffect延后挂载（兼容所有React版本，零额外依赖） #

利用React的执行时机特性：useEffect的回调会在当前组件完成首次DOM提交、浏览器完成首屏绘制之后才执行。我们可以先在首屏渲染TopPart位置的占位节点+完整的LowerPart，等首屏绘制完成后再挂载真实的TopPart内容，既保留原有DOM顺序不打乱布局，又能让高优先级的LowerPart优先展示。
示例代码：

import { observer } from 'mobx-react-lite';
import { useState, useEffect } from 'react';
import type { MyModuleProps } from './type';

export default observer(function MyModule(props: MyModuleProps) {
    const [mountTopPart, setMountTopPart] = useState(false);

    useEffect(() => {
        // 如果TopPart渲染极重，可以用requestIdleCallback等浏览器空闲时再挂载，避免阻塞首屏后交互
        // const idleCallbackId = requestIdleCallback(() => setMountTopPart(true));
        // return () => cancelIdleCallback(idleCallbackId);
        setMountTopPart(true);
    }, []);

    return (
         <div>
             {/* 保留原有DOM位置，避免布局错乱：如果要避免布局偏移，可给占位节点设置和TopPart一致的最小高度 */}
             {mountTopPart ? <TopPart /> : <div className="top-part-skeleton" />}
             <LowerPart />
         </div>
    );
});

方案2：React 18+ 并发渲染（官方推荐，体验最优） #

如果项目已经升级到React 18，可以使用并发特性提供的useTransition把TopPart的渲染标记为低优先级任务，React会自动优先完成高优先级的LowerPart渲染和绘制，主线程空闲时再处理TopPart的渲染，支持任务中断，不会阻塞用户交互。
示例代码：

import { observer } from 'mobx-react-lite';
import { useState, useEffect, useTransition, Suspense } from 'react';
import type { MyModuleProps } from './type';

export default observer(function MyModule(props: MyModuleProps) {
    const [isPending, startTransition] = useTransition();
    const [showTop, setShowTop] = useState(false);

    useEffect(() => {
        // 将TopPart的渲染标记为低优先级，不阻塞高优先级内容绘制
        startTransition(() => {
            setShowTop(true);
        });
    }, [startTransition]);

    return (
         <div>
             <Suspense fallback={<div className="top-part-skeleton" />}>
                 {showTop && <TopPart />}
             </Suspense>
             <LowerPart />
         </div>
    );
});

额外优化建议 #

如果TopPart挂载时仍然有明显卡顿，可以配合以下手段进一步优化：

• 用React.lazy对TopPart做代码拆分，减少首屏需要加载的JS体积
• 把TopPart内部的重型同步计算迁移到Web Worker执行，避免阻塞主线程
• 对TopPart内部的重子组件用React.memo做缓存，避免不必要的重复渲染

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