迹忆客 专注技术分享

使用 Math.random() 函数在 React 中生成一个随机数，例如 Math.floor(Math.random() * (max - min + 1)) + min。 Math.random 函数返回 0 到小于 1 范围内的数字，但也可用于生成特定范围内的数字。

import {useState} from 'react';

const App = () => {
  const [num, setNum] = useState(0);

  function randomNumberInRange(min, max) {
    // 👇️ 获取 min（含）和 max（含）之间的数字
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  const handleClick = () => {
    setNum(randomNumberInRange(1, 5));
  };

  return (
    <div>
      <h2>number is: {num}</h2>
      <button onClick={handleClick}>Generate random number</button>
    </div>
  );
};

export default App;

上面的代码片段使用 Math.random() 函数生成 1（含）到 5（含）范围内的数字。

如果不需要生成特定范围内的数字，而只是需要一个随机数，则可以直接使用 Math.random() 函数。

console.log(Math.random()); // 👉️ 0.9349907593750104
console.log(Math.random()); // 👉️ 0.1028502928025743
console.log(Math.random()); // 👉️ 0.9268013352071363

如果我们需要每 N 秒生成一个随机数并在组件中渲染，请使用 useEffect 挂钩设置间隔。

import {useEffect, useState} from 'react';

const App = () => {
  const [num, setNum] = useState(0);

  function randomNumberInRange(min, max) {
    // 👇️ 获取 min（含）和 max（含）之间的数字
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  useEffect(() => {
    const interval = setInterval(() => {
      // 👇️ 生成 1 到 10 之间的随机数
      setNum(randomNumberInRange(1, 10));
    }, 1000); // 👈️ 每秒执行一次

    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <div>
      <h2>number is: {num}</h2>
    </div>
  );
};

export default App;

上面的示例使用 setInterval() 方法每 1 秒调用一次函数。

我们传递给 setInterval() 方法的第二个参数是函数调用之间的延迟（以毫秒为单位）。如果不传递延迟参数，则默认为 0。

在函数中，我们生成一个 1 到 10 之间的随机数并更新状态变量。

我们从 useEffect 钩子返回的函数在组件卸载时运行。

我们使用 clearInterval() 方法来取消我们使用 setInterval 设置的重复动作。

这是我们在使用 setInterval() 或 addEventListener() 等方法时应始终执行的操作，因为如果我们在卸载组件时不进行清理，我们的应用程序会出现内存泄漏。