如何在箭头函数中使用 useState 而不是 hook ？

useState 钩子用于更新 React 组件中的状态。它是一个将初始状态作为参数并返回包含两个条目的数组的钩子。它可以用于一个 React 基于类的组件以及函数式组件（使用函数或const关键字声明）。功能组件在任何代码执行之前加载，而const组件仅在解释器到达该代码行时加载。永远记住，渲染使用函数语法创建的功能组件可以在代码中定义之前完成，而如果它是使用const定义的，则需要在使用之前声明它。

const函数组件也称为箭头函数。通过使用这些函数，我们可以摆脱每次绑定的烦人方法，并且可以非常轻松地访问钩子。

创建反应应用程序：

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

  npx create-react-app foldername

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

  cd foldername

项目结构：它将如下所示。

项目结构

示例 1：我们创建了一个箭头函数App ，其中我们设置了一个初始状态计数，值为 10 和一个用于更新状态值的函数setCount 。我们将onClick 事件传递给我们的按钮组件，当我们单击它时它会更新状态值。当需要更新状态变量时，可以通过直接在 setCount 内部更新状态变量来完成（就像我们在按钮组件中所做的那样）。在下一个示例中，我们将学习如何使用更新函数来做同样的事情。

App.js

import React, { useState } from 'react'
  
const App = () => {
  const [count, setCount] = useState(10);
  
  return (
    

     
Countdown Information
       
You have clicked me {10 - count} times
  
       
      setCount(count - 1)}>
        Please click me {count} more times.
     
     
  )
}
  
export default App

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

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

示例 2：我们创建了两个函数increaseCount和 reductionCount ，它们分别将状态值递增和递减1。两个函数都由onClick 事件触发 并且状态值得到更新。请注意，我们创建了两个更新函数并将它们作为事件处理程序传递到我们的按钮组件中，这表明我们可以如何以不同的方式在箭头函数中使用 useState。

应用程序.js

import React, { useState } from 'react'
  
const App = () => {
  const [count, setCount] = useState(0);
    
  const increaseCount = () => {
    setCount(count + 1);
  }
  const decreaseCount = () => {
    setCount(count - 1); 
  }
    
  return (
    

     
Countdown Information
       
Value is {count}
  
       
     
        Increment 
     
  
     
        Decrement
     
     
  )
}
  
export default App

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

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：