React如何不使用useEffect为useState设置初始随机值

问题原因 #

1. Hydrate不匹配（最常见）：如果你的项目使用了服务端渲染（SSR）、静态站点生成（SSG）或者预渲染能力，服务端生成随机值后渲染出对应的DOM结构返回给前端，前端Hydrate时会重新生成一次随机值，两次随机值大概率不一致。React在Hydrate模式下会优先复用服务端生成的DOM节点，仅更新差异部分，就会出现背景色和文字内容不匹配的异常。
2. 严格模式重复渲染：React 16的开发环境严格模式（<StrictMode>）会故意执行两次函数组件的渲染逻辑，用于检测副作用。你直接将Math.random() < 0.5作为useState的入参，这个表达式会在两次渲染时各执行一次，如果两次结果不同，即使useState只会保留第一次的结果作为初始state，部分场景下React的调和逻辑也可能错误复用旧DOM的部分属性，导致异常。
3. DOM节点错误复用：你条件渲染的两个div结构高度相似，即使添加了key，部分边缘场景下React的调和逻辑仍可能出现识别误差，复用节点时未完全更新所有属性。

无需useEffect的解决方案 #

方案1：复用单个DOM节点（最推荐）

直接将样式和内容作为动态变量绑定到同一个div上，完全规避两个相似节点的调和问题，代码更简洁。同时使用useState函数式初始化，保证随机值仅在组件挂载时计算一次：

import React, {useState} from 'react';

const Loader = () => {
  const [isRed] = useState(() => Math.random() < 0.5);

  return (
    <div className="full-screen-loader">
      <div style={{ backgroundColor: isRed ? "red" : "blue" }}>
        <div>{isRed ? "RED" : "BLUE"}</div>
      </div>
    </div>
  )
};

export default Loader;

方案2：保留双div结构，优化节点识别

如果一定要用两个独立div，可给两个div添加差异化标识（比如不同className、id），确保React能正确识别节点差异，不会错误复用：

import React, {useState} from 'react';

const Loader = () => {
  const [redLoader] = useState(() => Math.random() < 0.5);

  return (
    <div className="full-screen-loader">
      {redLoader ? (
        <div style={{ backgroundColor: "red" }} className="red-loader" key="red">
          <div>RED</div>
        </div>
      ) : (
        <div style={{ backgroundColor: "blue" }} className="blue-loader" key="blue">
          <div>BLUE</div>
        </div>
      )}
    </div>
  )
};

export default Loader;

方案3：SSR场景兼容处理

如果是SSR场景，要避免Hydrate不匹配，可先渲染默认占位内容，待客户端挂载后再渲染随机结果：

import React, {useState, useEffect} from 'react';

const Loader = () => {
  const [isMounted, setIsMounted] = useState(false);
  const [isRed] = useState(() => Math.random() < 0.5);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  if (!isMounted) {
    // 服务端渲染和Hydrate初始阶段返回统一占位，避免不匹配
    return <div className="full-screen-loader" />;
  }

  return (
    <div className="full-screen-loader">
      <div style={{ backgroundColor: isRed ? "red" : "blue" }}>
        <div>{isRed ? "RED" : "BLUE"}</div>
      </div>
    </div>
  )
};

export default Loader;

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