如何在ReactJS中使用hook来管理状态？

Question

我正在尝试使用钩子来管理 ReactJS 应用程序中的状态。我有一个功能组件，我想使用 useState 挂钩来管理其状态。但是，我不确定如何正确使用这个钩子以及如何使用它更新状态。谁能提供一个简单的例子来说明如何在功能组件中使用 useState 钩子？

我尝试在我的功能组件中使用 useState 钩子，如下所示：

const [state, setState] = useState(initialState);

但我不确定如何使用此钩子更新状态。我尝试这样做：

setState(newState);

但似乎不起作用。

Answer 1

import { useState } from "react";
import ReactDOM from "react-dom/client";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
    </>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);

考虑上面的示例，其中

useState

钩子在名为

FavoriteColor

的 React 功能组件中使用。

useState

钩子是 React 中的一项功能，允许您向功能组件添加状态。

让我们分解一下代码：

1. 进口声明：

   import { useState } from "react";
   import ReactDOM from "react-dom/client";
   

   useState

   函数是从“react”库导入的。该函数是一个允许功能组件管理状态的钩子。

   ReactDOM

   导入用于渲染 React 组件。

2. 功能组件：

   function FavoriteColor() {
     const [color, setColor] = useState("red");
   

   在

   FavoriteColor

   组件内，调用

   useState

   钩子，初始状态为“红色”。

   useState

   钩子返回一个包含两个元素的数组：当前状态值 (

   color

   ) 和用于更新状态的函数 (

   setColor

   )。

3. 组件渲染：

   return (
     <>
       <h1>My favorite color is {color}!</h1>
       <button
         type="button"
         onClick={() => setColor("blue")}
       >Blue</button>
     </>
   )
   

   该组件呈现一个显示当前颜色状态的

   h1

   元素和一个按钮。单击按钮时，会触发

   onClick

   处理程序，并调用

   setColor("blue")

   ，将颜色状态更新为“蓝色”。

4. ReactDOM.createRoot 和渲染：

   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(<FavoriteColor />);
   

   ReactDOM.createRoot

   用于为应用程序创建根，并调用

   render

   方法将

   FavoriteColor

   组件渲染到根中。

综上所述，

useState

组件中使用了

FavoriteColor

钩子来管理和更新颜色状态。单击该按钮时，颜色状态将发生更改，并且组件将使用更新的颜色值重新渲染。这是一个简单的示例，说明

useState

钩子如何支持在 React 应用程序的功能组件中使用状态。

访问此：https://www.w3schools.com/react/showreact.asp?filename=demo2_react_usestate_update