React记忆游戏：数组随机化并分配颜色至元素的方法

核心实现步骤 #

用React的状态管理和副作用钩子就能搞定数组随机化与颜色分配，具体操作如下：

1. 初始化状态存储洗牌后的颜色数组
   用useState保存洗牌后的颜色数据，初始值设为空数组，后续通过洗牌方法填充：

import { useState, useEffect } from 'react';

// 你的原始颜色数组（10组颜色，每组2个，共20个元素）
const originalColors = [
  '#ff5733', '#ff5733', '#33ff57', '#33ff57',
  '#3357ff', '#3357ff', '#ff33a6', '#ff33a6',
  '#ffc300', '#ffc300', '#8e44ad', '#8e44ad',
  '#1abc9c', '#1abc9c', '#e74c3c', '#e74c3c',
  '#3498db', '#3498db', '#2ecc71', '#2ecc71'
];

const MemoryGame = () => {
  const [shuffledColors, setShuffledColors] = useState([]);

2. 用useEffect在组件挂载时执行洗牌
   把你已有的洗牌方法放在useEffect里，确保组件首次渲染时完成数组随机化并更新状态：

// 你的洗牌方法（这里用Fisher-Yates算法示例，可替换成你已有的）
  const shuffleArray = (array) => {
    const newArray = [...array];
    for (let i = newArray.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
    }
    return newArray;
  };

  useEffect(() => {
    // 组件挂载时洗牌并更新状态
    const shuffled = shuffleArray(originalColors);
    setShuffledColors(shuffled);
  }, []); // 空依赖数组确保只执行一次

3. 动态渲染色块并分配颜色
   通过map遍历洗牌后的数组，为每个div元素设置对应背景色，注意给每个元素加唯一key：

return (
    <div className="game-board">
      {shuffledColors.map((color, index) => (
        <div
          key={index}
          className="color-card"
          style={{ backgroundColor: color }}
        ></div>
      ))}
    </div>
  );
};

export default MemoryGame;

关键说明 #

• 洗牌算法：示例用的Fisher-Yates是高效公平的随机方式，如果你已有自己的洗牌方法，直接替换shuffleArray函数即可。
• useEffect依赖：空数组作为依赖，保证洗牌只在组件首次渲染时执行一次，避免重复随机化。
• 动态样式：通过style属性直接把颜色值绑定到div背景色上，实现动态分配。

后续扩展提示（供参考） #

之后要实现点击显示颜色、匹配检查功能时，可以新增状态：

• 记录已翻转卡片信息的数组
• 匹配成功的计数
• 卡片的翻转状态（比如用对象存储每个卡片的color和isFlipped属性）

内容的提问来源于stack exchange，提问作者Militant.Rectangle