React SSR与客户端一致性：实现可预测的数组随机化

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

// 假设 suffleArray 内部使用了 Math.random()
// function suffleArray(arr) { /* ... 使用 Math.random() 洗牌 ... */ }

export default function Component() {
    // 在服务器和客户端首次渲染时都会执行 suffleArray
    // 但如果 suffleArray 依赖 Math.random()，两次执行结果会不同
    const [randomized] = React.useState(() => suffleArray(myArray));

    React.useEffect(() => {
        // 客户端副作用，例如跟踪值
        // trackValues(randomized);
    }, [randomized]);

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

/**
 * 创建一个基于种子的确定性随机数生成器。
 * @param {number} seed 初始种子。
 * @returns {function(): number} 一个函数，每次调用返回一个 [0, 1) 范围内的伪随机数。
 */
function createSeededRandom(seed) {
    let s = seed % 2147483647; // 确保种子在合理范围内
    if (s <= 0) s += 2147483646; // 避免种子为0或负数

    return function() {
        // LCG算法: Xn+1 = (aXn + c) mod m
        // 这里的参数是常用的数值，可以提供相对好的伪随机性
        s = (s * 16807) % 2147483647;
        return (s - 1) / 2147483646; // 将结果归一化到 [0, 1)
    };
}

/**
 * 使用确定性随机数生成器洗牌数组。
 * @param {Array<any>} array 待洗牌的数组。
 * @param {number} seed 用于初始化随机数生成器的种子。
 * @returns {Array<any>} 洗牌后的新数组。
 */
function shuffleArrayDeterministic(array, seed) {
    const random = createSeededRandom(seed); // 创建基于种子的随机数生成器
    const shuffledArray = [...array]; // 创建数组副本，避免修改原数组

    for (let i = shuffledArray.length - 1; i > 0; i--) {
        // 生成一个 [0, i] 范围内的随机索引
        const j = Math.floor(random() * (i + 1));
        // 交换元素
        [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
    }
    return shuffledArray;
}

import React from 'react';

// 假设 createSeededRandom 和 shuffleArrayDeterministic 函数已定义并可用

// 模拟服务器端注入的种子，或者从 URL 参数获取
// 在实际应用中，服务器会在渲染时生成一个唯一的种子，并将其作为 prop 传递
// 或者注入到 window 对象，例如：
// <script>window.__INITIAL_SEED__ = ${serverGeneratedSeed};</script>
// const initialSeed = typeof window !== 'undefined' ? window.__INITIAL_SEED__ : /* 服务器端生成 */;

export default function MyRandomComponent({ myArray, initialSeed }) {
    // 使用 useState 的初始化函数，确保在服务器和客户端的首次渲染时
    // 都使用相同的 initialSeed 来执行确定性洗牌
    const [randomizedArray] = React.useState(() => {
        if (typeof initialSeed === 'undefined' || initialSeed === null) {
            console.warn("Seed not provided. Using a fallback seed (current time). " +
                         "This might lead to SSR mismatch if not handled carefully.");
            // 在开发环境或测试中提供一个 fallback，但在生产环境中应确保种子始终被提供
            return shuffleArrayDeterministic(myArray, new Date().getTime());
        }
        return shuffleArrayDeterministic(myArray, initialSeed);
    });

    React.useEffect(() => {
        // 客户端侧的副作用，例如跟踪值或日志
        // console.log("Client-side randomized array:", randomizedArray.map(item => item.id));
    }, [randomizedArray]);

    return (
        <div>
            <h2>随机化列表（SSR一致性）</h2>
            {
                randomizedArray.map(({ id }) => (
                    <div key={id}>ID: {id}</div>
                ))
            }
        </div>
    );
}

// 示例用法（在服务器端或客户端父组件中）
// const data = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }];
// const serverGeneratedSeed = Math.floor(Math.random() * 1000000); // 每次页面加载生成一个新种子
// <MyRandomComponent myArray={data} initialSeed={serverGeneratedSeed} />