React初始化DOM加载前设置背景色，避免默认颜色闪烁

你的问题根源在于异步fetch颜色的时机太晚：组件先渲染了默认的粉色背景，等fetch完成后才更新颜色，导致视觉闪烁。以下是几种可行的解决方案：

方案1：直接导入颜色文件（推荐） #

把colors.json从public目录移到src目录下，这样可以直接同步导入，无需异步fetch，组件初始化时就能直接生成随机颜色，完全避免闪烁。

修改后的App.js代码：

import React, { useState } from "react";
import colorsData from "./colors.json"; // 导入颜色文件

const App = () => {
  // 初始化时直接生成随机颜色，不用默认粉色
  const [backgroundColor] = useState(() => {
    const colorValues = Object.values(colorsData);
    return colorValues[Math.floor(Math.random() * colorValues.length)].color1;
  });

  return (
    <div style={{ backgroundColor, minHeight: "100vh" }}>
      <h1>color content</h1>
      <h1>color content</h1>
      <h1>color content</h1>
      <h1>color content</h1>
      <h1>color content</h1>
      <h1>color content</h1>
    </div>
  );
};
export default App;

方案2：在React渲染前预获取颜色 #

如果必须保留public目录下的colors.json，可以在index.js中先fetch颜色，再渲染App组件，确保渲染时已经有了目标颜色：

修改index.js：

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

// 先fetch颜色
fetch("/colors.json")
  .then(res => res.json())
  .then(colorsData => {
    const colorValues = Object.values(colorsData);
    const randomColor = colorValues[Math.floor(Math.random() * colorValues.length)].color1;
    
    // 渲染App时传递颜色作为props
    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(
      <React.StrictMode>
        <App initialColor={randomColor} />
      </React.StrictMode>
    );
  })
  .catch(err => {
    console.error("Failed to fetch colors:", err);
    // 出错时渲染默认颜色的App
    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(
      <React.StrictMode>
        <App initialColor="pink" />
      </React.StrictMode>
    );
  });

然后修改App.js接收props：

import React, { useState } from "react";

const App = ({ initialColor }) => {
  const [backgroundColor] = useState(initialColor);

  return (
    <div style={{ backgroundColor, minHeight: "100vh" }}>
      <h1>color content</h1>
      <h1>color content</h1>
      <h1>color content</h1>
      <h1>color content</h1>
      <h1>color content</h1>
      <h1>color content</h1>
    </div>
  );
};
export default App;

方案3：用HTML内联脚本提前设置背景色 #

在public/index.html中添加内联脚本，提前获取颜色并设置body的背景色，React渲染时复用这个颜色，保持视觉一致：

修改index.html的<head>部分：

<head>
  <!-- 其他head内容 -->
  <script>
    // 提前获取颜色并设置body背景
    fetch('/colors.json')
      .then(res => res.json())
      .then(colorsData => {
        const colorValues = Object.values(colorsData);
        const randomColor = colorValues[Math.floor(Math.random() * colorValues.length)].color1;
        document.body.style.backgroundColor = randomColor;
        // 把颜色存在全局变量，供React使用
        window.__INITIAL_BACKGROUND_COLOR__ = randomColor;
      })
      .catch(() => {
        document.body.style.backgroundColor = 'pink';
        window.__INITIAL_BACKGROUND_COLOR__ = 'pink';
      });
  </script>
</head>

然后修改App.js：

import React, { useState } from "react";

const App = () => {
  // 用全局变量的颜色初始化state
  const [backgroundColor] = useState(window.__INITIAL_BACKGROUND_COLOR__ || "pink");

  return (
    <div style={{ backgroundColor, minHeight: "100vh" }}>
      <h1>color content</h1>
      <h1>color content</h1>
      <h1>color content</h1>
      <h1>color content</h1>
      <h1>color content</h1>
      <h1>color content</h1>
    </div>
  );
};
export default App;

关键思路总结 #

• 避免在组件渲染后才异步获取颜色，尽量同步获取或预获取颜色
• 确保React初始渲染时的颜色和页面加载时的颜色一致，消除视觉差异

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