React 中的 useState() 是什么？

useState()是一个 Hook，它允许您在功能组件中拥有状态变量。 React 有两种类型的组件，一种是类组件，它是从 React 扩展而来的 ES6 类，另一种是函数式组件。类组件是一个组件，可以具有状态和生命周期方法：类 Message 扩展 React。 useState 钩子是一个特殊的函数，它将初始状态作为参数并返回一个包含两个条目的数组。

语法：第一个元素是初始状态，第二个元素是用于更新状态的函数。

const [state, setState] = useState(initialstate)

如果必须计算初始状态，我们也可以将函数作为参数传递。并且函数返回的值将作为初始状态。

const [sum, setsum] = useState(function generateRandomInteger(){5+7);})

上面的函数是单线函数，它计算两个数字的和，并将设置为初始状态。

导入：要使用 useState，您需要从 react 中导入 useState，如下所示：

import React, { useState } from "react"

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

示例：下面是 useState()函数的实现。

应用程序.js

Javascript

import React, { useState } from "react";
  
function App(props) {
  const [count, setRandomCount] = 
    useState(function generateRandomInteger() {
    return Math.floor(Math.random() * 100);
  });
  function clickHandler(e) {
    setRandomCount(Math.floor(Math.random() * 100));
  }
  return (
    

      
 {count} 
        
      

         Click 
      
  
    
  );
}
  
export default App

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：

解释：第一 count 变量使用随机函数初始化为随机数，setRandomCount 用于更新计数状态。每次我们单击按钮 onClick 时，它都会调用 clickHandler函数，该函数再次使用随机数设置计数变量。