React页面刷新时组件初始居底后恢复正常的排查与修复

你看到的短时间布局错乱是典型的FOUC（无样式内容闪烁，Flash of Unstyled Content）：页面初始渲染阶段，组件的DOM结构已经被React挂载到页面上，但对应组件的CSS Modules样式还没完成加载和注入，浏览器只能用默认的原生样式渲染内容，就会出现侧边栏、内容区错位到页面底部的问题；等样式加载完成注入到样式表后，布局就会立刻恢复正常。

这个异常和你按组件拆分CSS文件的目录结构没有因果关系，问题根源是构建工具的样式加载策略：
大部分React生态的构建工具（Vite、CRA等）默认会将CSS Modules和对应组件的JS代码打包到同一个chunk中，采用运行时动态注入的方式加载样式。如果是开发环境，模块热替换的逻辑会进一步放大样式加载的延迟，FOUC现象会更明显；如果生产构建没有正确配置CSS抽离，线上环境也会出现同样的问题。

• 开启构建工具的全局CSS抽离配置。生产构建下将所有组件的CSS Modules代码抽离为独立的静态CSS文件，在入口HTML的<head>标签中通过<link>标签提前引入，保证CSS在DOM渲染前就完成加载，从根源避免无样式渲染的阶段。Vite、CRA的生产构建默认都带这个能力，如果你修改过默认配置注意不要关闭CSS抽离特性。
• 核心布局样式内联到入口HTML。把控制侧边栏、内容区整体排版的核心布局样式（比如外层容器的flex布局规则、侧边栏固定宽度、内容区自适应规则）直接写到入口HTML的内联<style>标签中，不需要等组件CSS加载就能保证基础布局正确，哪怕细节样式晚加载也不会出现内容跑到底部的严重错位。
• 增加首屏渲染锁定逻辑。在应用根DOM节点上默认添加hidden属性或者设置visibility: hidden，等首屏所有组件和对应样式都加载完成后，再移除隐藏状态展示页面，用户完全感知不到中间的样式错乱阶段。
• 首屏组件避免异步加载。侧边栏、内容区这类首屏必须展示的组件，不要使用React.lazy或者动态import的方式异步引入，直接用静态import语法导入，构建工具会自动把这部分组件的CSS归到首屏优先加载的资源列表中，缩短样式加载的等待时间。

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