在本文中，我们将研究如何利用React应用中的Usestate钩子，因为它是您需要熟悉的最基本概念之一。

usestate钩子也可以在React Native中使用，因此通常，几乎所有概念都可以翻译成移动世界。

反应中的钩子是什么？

钩子是React 16.8中的新添加。他们让您在不编写课程的情况下使用状态和其他React功能。

钩子是使您进入函数组件中的反应状态和生命周期特征的函数。钩子在课堂内不工作。

反应中的美国是什么？

USESTATE HONK允许您添加状态为React功能组件。它返回一个状态值，以及更新它的函数。

USESTATE挂钩是将状态添加到React中功能组件的一种方法。它接受一个参数，即初始状态，并返回一个具有两个值的数组：当前状态和更新它的函数。

创建React应用程序

要开始，您将需要创建一个React应用程序。如果您已经有一个React应用程序，则可以跳过此步骤。

首先，安装Create-React-App包：

npm install -g create-react-app

然后，创建一个新的React App：

create-react-app my-app

基本的USESTATE代码示例

现在，我们已经设置了一个React应用程序，让我们查看如何使用Usestate钩子的基本示例。

在此示例中，我们将创建一个显示计数的组件。单击时，它将具有一个按钮，该按钮将增加计数。

首先，让我们创建一个名为Counter的新组件：

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};

export default Counter;

此代码创建一个称为Counter的组件，该组件用当前计数呈现<p>元素，并在单击时会增加计数的按钮。

useState挂钩用于将状态添加到组件中。它接受一个参数，即初始状态，并返回一个具有两个值的数组：当前状态和更新它的函数。

在此示例中，我们使用数组破坏性语法将当前状态分配给count变量，以及将状态更新为setCount变量的函数。

count变量持有当前状态，该状态初始化为0。setCount函数用于更新状态。它接受一个参数，这是国家的新价值。在此示例中，我们通过count + 1将计数增加1。

usestate的高级用例

美国钩可用于将更复杂的状态存储在反应组件中。例如，您可以使用它来存储数组或对象。

让我们查看一个如何使用Usestate钩存储数组的示例。在此示例中，我们将创建一个呈现项目列表的组件。单击时，它将有一个按钮，该按钮将在列表中添加新项目。

首先，让我们创建一个名为List的新组件：

import React, { useState } from 'react';

const List = () => {
  const [items, setItems] = useState([]);

  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={() => setItems([...items, 'new item'])}>
        Add item
      </button>
    </div>
  );
};

export default List;

此代码创建一个称为List的组件，该组件呈现一个项目列表。它使用useState钩将数组存储在items变量中。 setItems功能用于更新状态。

在此示例中，我们使用传播运算符将新项目添加到数组中。传播操作员使用现有项目以及新项目创建一个新数组。

USESTATE的警告

Usestate钩子有一些警告，您应该注意。

首先，只有在调用setState函数时才会更新状态。如果您以相同的值调用setState，则状态将不会更新。

第二，当道具或上下文更改时，状态不会自动更新。您将需要使用useEffect钩子来响应道具或上下文的变化来更新状态。

最后，状态不会自动传给儿童组件。您将需要使用useContext钩将状态传递给儿童组件。

结论

在本教程中，我们研究了如何在React中使用Usestate钩子。我们涵盖了Usestate钩子的基础知识以及一些高级用例。我们还查看了Usestate钩子的一些警告。

使用useState hook是将状态添加到React功能组件的好方法。它易于使用，允许您在不编写类的情况下添加状态。