如何在 React Js 中添加 useState

在 React Js 中，useState 是一个非常重要的 React Hook。它可以用来在函数式组件中添加状态。在这篇文章中，我们将向您展示如何在 React Js 中添加 useState。

步骤

以下是在 React Js 中添加 useState 的步骤：

1. 导入 useState

首先，我们需要从 react 包中导入 useState，它是一个 React Hooks。

import React, { useState } from 'react';

2. 在组件中使用 useState

然后，在您的组件中使用 useState。

function MyComponent() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

在上面的代码中，我们通过调用 useState，创建了一个名为 count 的 state 变量和一个名为 setCount 的更新它的函数。 useState 的参数是 count 的初始值。

3. 更新 state

为了更新 state，我们需要使用 setCount 函数。

<button onClick={() => setCount(count + 1)}>Click me</button>

在上面的代码中，我们通过调用 setCount，将 count 值加一。

示例

您可以查看下面的完整示例：

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

结论

useState 是一个非常简单但重要的 React Hook，可帮助我们将状态添加到我们的函数组件中。在使用 useState 时需要注意的是，state 是不可变的，因此我们需要使用函数更新它。