React SSR中实现服务器与客户端一致的随机数组：基于种子确定性洗牌的策略

import React from 'react';

const myArray = [{ id: 1 }, { id: 2 }, { id: 3 }];

// 假设有一个suffleArray函数使用了Math.random()
function suffleArray(arr) {
  const newArr = [...arr];
  for (let i = newArr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [newArr[i], newArr[j]] = [newArr[j], newArr[i]];
  }
  return newArr;
}

export default function Component() {
  // 这里的suffleArray会在服务器和客户端分别执行
  const [randomized] = React.useState(() => suffleArray(myArray));

  React.useEffect(() => {
    // 假设trackValues会记录randomized的值
    // 在这里，randomized在服务器和客户端可能不同
  }, [randomized]);

  return (
    <div>
      {randomized.map(({ id }) => (
        <span key={id}>{id}</span>
      ))}
    </div>
  );
}

/**
 * 创建一个基于种子的伪随机数生成器
 * @param {number} seed 初始种子
 * @returns {function(): number} 返回一个函数，每次调用生成一个0到1之间的伪随机数
 */
function createSeededRandom(seed) {
  // 确保种子是整数且不为0，并进行一些位操作以增加随机性
  let x = seed | 0; // 将种子转换为32位整数
  if (x === 0) x = 1; // 避免种子为0导致序列不变

  return function() {
    x ^= x << 13;
    x ^= x >> 17;
    x ^= x << 5;
    // 将结果转换为0到1之间的浮点数
    return (x >>> 0) / 4294967296; // (x >>> 0) 确保结果为无符号32位整数
  };
}

/**
 * 使用指定的随机数生成器对数组进行洗牌
 * @param {Array<any>} array 需要洗牌的数组
 * @param {function(): number} randomFunc 0到1之间的伪随机数生成函数
 * @returns {Array<any>} 洗牌后的新数组
 */
function seededShuffle(array, randomFunc) {
  const shuffledArray = [...array]; // 创建一个浅拷贝，避免修改原始数组
  let currentIndex = shuffledArray.length;
  let randomIndex;

  // 当还有元素未洗牌时
  while (currentIndex !== 0) {
    // 从剩余元素中随机选取一个
    randomIndex = Math.floor(randomFunc() * currentIndex);
    currentIndex--;

    // 将选取的元素与当前元素交换
    [shuffledArray[currentIndex], shuffledArray[randomIndex]] = [
      shuffledArray[randomIndex],
      shuffledArray[currentIndex],
    ];
  }
  return shuffledArray;
}

// src/components/MyRandomComponent.jsx
import React from 'react';

// 引入之前定义的伪随机数生成器和洗牌函数
// 实际项目中可以放在单独的工具文件中导入
// function createSeededRandom(...) { ... }
// function seededShuffle(...) { ... }

// 假设这些函数已导入或定义在同一文件
function createSeededRandom(seed) {
  let x = seed | 0;
  if (x === 0) x = 1;
  return function() {
    x ^= x << 13; x ^= x >> 17; x ^= x << 5;
    return (x >>> 0) / 4294967296;
  };
}

function seededShuffle(array, randomFunc) {
  const shuffledArray = [...array];
  let currentIndex = shuffledArray.length;
  let randomIndex;
  while (currentIndex !== 0) {
    randomIndex = Math.floor(randomFunc() * currentIndex);
    currentIndex--;
    [shuffledArray[currentIndex], shuffledArray[randomIndex]] = [
      shuffledArray[randomIndex],
      shuffledArray[currentIndex],
    ];
  }
  return shuffledArray;
}

export default function MyRandomComponent({ initialArray, seed }) {
  // 使用 useMemo 钩子确保洗牌逻辑只在 seed 或 initialArray 改变时执行
  // 并且在服务器和客户端使用相同的 seed 产生相同的结果
  const randomizedArray = React.useMemo(() => {
    if (seed === undefined || initialArray === undefined) {
      // 可以在此处添加错误处理或返回默认值
      console.warn("Seed or initialArray is missing for MyRandomComponent.");
      return initialArray;
    }
    const randomGenerator = createSeededRandom(seed);
    return seededShuffle(initialArray, randomGenerator);
  }, [initialArray, seed]); // 依赖项确保当 seed 改变时重新计算

  return (
    <div className="random-list">
      <h3>随机排序的列表:</h3>
      {randomizedArray.map((item) => (
        <div key={item.id} className="list-item">
          ID: {item.id}
        </div>
      ))}
    </div>
  );
}

// src/server/server.js (简化示例)
import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import MyRandomComponent from '../components/MyRandomComponent'; // 导入你的组件

const app = express();
const PORT = 3000;

// 示例数据
const dataToShuffle = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }];

app.get('/', (req, res) => {
  // 1. 在服务器端生成一个唯一的种子
  // 使用 Date.now() 或更复杂的 UUID 生成器来确保每次请求的种子不同
  const seed = Date.now();

  // 2. 将组件渲染为字符串，并传递 seed 和 initialArray props
  const componentHtml = ReactDOMServer.renderToString(
    <MyRandomComponent initialArray={dataToShuffle} seed={seed} />
  );

  // 3. 构建完整的HTML，并将种子注入到客户端可访问的全局变量中
  const html = `
    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>SSR随机数组示例</title>
        <!-- 将种子注入到 window.__INITIAL_SEED__，供客户端水合时使用 -->
        <script>window.__INITIAL_SEED__ = ${seed};</script>
        <style>
          body { font-family: sans-serif; margin: 20px; }
          .random-list { border: 1px solid #eee; padding: 15px; border-radius: 5px; }
          .list-item { background-color: #f9f9f9; margin-bottom: 5px; padding: 8px; border-radius: 3px; }
        </style>
    </head>
    <body>
        <div id="root">${componentHtml}</div>
        <!-- 引入客户端打包后的JS文件 -->
        <script src="/static/client.bundle.js"></script>
    </body>
    </html>
  `;

  res.send(html);
});

// 提供客户端JS文件
app.use('/static', express.static('dist'));

app.listen(PORT, () => {
  console.log(`Server listening on http://localhost:${PORT}`);
});

// src/client/index.js (简化示例)
import React from 'react';
import ReactDOM from 'react-dom/client';
import MyRandomComponent from '../components/MyRandomComponent'; // 导入你的组件

// 示例数据（需要与服务器端保持一致）
const dataToShuffle = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }];

// 从服务器注入的全局变量中获取种子
const initialSeed = window.__INITIAL_SEED__;

const root = ReactDOM.hydrateRoot(
  document.getElementById('root'),
  <MyRandomComponent initialArray={dataToShuffle} seed={initialSeed} />
);