react如何生成随机数
生成随机数的方法
在React中生成随机数可以利用JavaScript内置的Math.random()方法，结合不同需求进行封装或扩展。以下是几种常见实现方式：
基础随机数生成
使用Math.random()生成0到1之间的浮点数：
const randomNumber = Math.random(); // 0 ≤ n < 1生成指定范围的随机整数（如1-100）：
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
const randomInt = getRandomInt(1, 100);结合React状态管理
在组件中使用useState存储随机数，通过按钮触发更新：
import React, { useState } from 'react';
function RandomGenerator() {
const [randomNum, setRandomNum] = useState(0);
const generateRandom = () => {
setRandomNum(Math.floor(Math.random() * 100));
};
return (
<div>
<p>随机数: {randomNum}</p>
<button onClick={generateRandom}>生成</button>
</div>
);
}随机数组或列表项
从数组中随机选择一个元素：
const items = ['A', 'B', 'C', 'D'];
const randomItem = items[Math.floor(Math.random() * items.length)];打乱数组顺序（Fisher-Yates算法）：
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}使用第三方库
如需更复杂的随机数生成（如UUID），可引入库如uuid：
npm install uuid使用示例：
import { v4 as uuidv4 } from 'uuid';
const uniqueId = uuidv4(); // 生成唯一标识符注意事项
- 避免在渲染过程中直接调用
Math.random()，可能导致不必要的重新渲染。 - 如需加密安全随机数，应使用
crypto.getRandomValues()而非Math.random()。 - 随机数生成可能影响性能，高频操作建议使用防抖/节流优化。
