在 React 中生成一个随机数

使用 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(含)范围内的数字。

在 React 中生成一个随机数

如果不需要生成特定范围内的数字,而只是需要一个随机数,则可以直接使用 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() 等方法时应始终执行的操作,因为如果我们在卸载组件时不进行清理,我们的应用程序会出现内存泄漏。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » 在 React 中生成一个随机数