在 React 中生成一个随机数

作者

在 React 中生成一个随机数

Generate a random number in React

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

应用程序.js
import {useState} from 'react';

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

  function randomNumberInRange(min, max) {
    // 👇️ get number between min (inclusive) and max (inclusive)
    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()直接使用该函数。

应用程序.js
console.log(Math.random()); // 👉️ 0.9349907593750104
console.log(Math.random()); // 👉️ 0.1028502928025743
console.log(Math.random()); // 👉️ 0.9268013352071363

如果您需要每 N 秒生成一个随机数并将其呈现在您的组件中，请使用useEffect钩子来设置间隔。

应用程序.js
import {useEffect, useState} from 'react';

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

  function randomNumberInRange(min, max) {
    // 👇️ get number between min (inclusive) and max (inclusive)
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  useEffect(() => {
    const interval = setInterval(() => {
      // 👇️ generate random number between 1 and 10
      setNum(randomNumberInRange(1, 10));
    }, 1000); // 👈️ runs every 1 second

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

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

export default App;

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

我们传递给该setInterval()方法的第二个参数是函数调用之间的延迟（以毫秒为单位）。

如果您不为 传递参数delay，则默认为0。

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

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

我们使用
clearInterval()
方法来取消我们使用setInterval.

这是您在使用setInterval()
或之类的方法时应该始终做的事情addEventListener()，因为如果您在卸载组件时不清理，您的应用程序就会发生内存泄漏。

–

发表评论