React useState Hook 会立即更新吗？

我们如何在 React 中使用 useState 钩子？

useState是最近版本的 React 中引入的 API/Hook。由于它是一个钩子，它让我们可以钩入 React 特性，准确地说是 React 提供的状态特性。

在 React 的早期版本中，如果我们想给任何组件一个状态，那么我们需要将该组件转换为基于类的组件，但是 使用useState钩子，我们可以在我们的功能组件中给出一个状态。但是， useState钩子不能在类中使用，也不应该在普通 JavaScript 函数中使用，以进行全面验证。我们如下使用useState钩子并提取状态和更新状态的函数。 useState唯一需要的是初始状态。

挂钩更新如何工作？

React 通过按调用顺序对它们进行排队来跟踪状态。 React 将所有要进行的更改排队并在组件重新渲染后更新，这不是立即的。这就是 React 如何知道哪个值对应哪个状态。每次组件尝试重新渲染时，它都会按照队列进行。

创建反应应用程序：

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

  npx create-react-app foldername

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

  cd foldername

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

项目结构

文件名：App.js

App.js

import React, { useState } from "react"
  
export default function App() {
  
  // State for username
  const [name, setName] = useState("jon doe");
  
  // Function to change name
  function changeName(e) {
    setName(e.target.value);
  }
  
  return (
    

      
Your agent name is :
      
{name}
      
      change
    
  )
}

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

npm start

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

说明：如您所见，我们使用setState方法更新状态，该方法是从钩子useState中提取的。所以更新我们没有使用this.name或类似this.setname的东西。

您可能想知道是否没有基于类的组件，或者这涉及到 react 是如何知道我们指的是哪个状态，因为代码中会有很多状态，如下所示：

const [name, setName] = useState("jon");
const [surname, setSurname] = useState("doe");
const [age,setAge] = useState(23);

React 不会立即更新，尽管乍一看似乎是立即更新。 React 通过按调用顺序对它们进行排队来跟踪状态。 React 将所有要进行的更改排队并在组件重新渲染后更新，这不是立即的。这就是 React 知道哪个值对应哪个状态的方式。每次组件尝试重新渲染时，它都会按照队列进行。

示例：如果我们的组件按照姓名、姓氏和年龄等顺序更新状态，那么它会将这些更改放入队列中，并且不会在遇到这些状态时立即更新这些状态。一旦功能组件结束，它会重新渲染组件并按照将它们放入队列的顺序更新状态。这种方式 React 保持了状态的完整性，并允许我们使用useState钩子在我们的功能组件中使用状态。

setName("James");    // First state on queue
setSurname("Bond");     // Second state on queue
setAge(23);             // Third state on queue

// End of the component function

// After that re-render happens and state actually updates

参考资料： https://reactjs.org/docs/hooks-rules.html