5分钟学会 useState()

:)

这是最常用的 React Hook 之一。阅读本文，你将能够正确使用它。

如何使用它？

要使用这个钩子，首先需要从 React 导入它。

import React, { useState } from 'react';

用法

在 ES6 中，我们引入了一个叫做数组解构的功能。如果你知道如何解构数组，你就可以非常轻松地使用这个钩子。我来给你举个例子。

const [ data, setData ] = useState('');

因此，在这个数组中，第一个索引是一个状态变量。第二个索引是一个函数，它具有更改状态变量值的权限。在 useState 下，您可以存储任何类型的数据，这些数据的值将存储在状态变量下。您可以使用名为“setData”的函数更改状态变量的值。您可以为状态变量和函数指定任意名称。

我知道你有点困惑。等一下，我给你举一个简单的例子。

import React, { useState } from "react";

const App = () => {
  const [data, setData] = useState("Hello world");
  return (
    <>
      {data} // now the value will be hello world and after clicking on the button, the value will be I am a web developer
      <button
        onClick={() => {
          setData("I am a web developer");
        }}
      >
        Change value
      </button>
    </>
  );
};
export default App;

看看我在顶部写的代码。首先，我从“react”导入了 React 和 useState。然后，我将“Hello world”存储在名为“data”的状态变量下。接下来，我通过调用一个函数来改变状态变量的值，该函数会在按钮点击时改变状态变量的值。这就是它的工作原理。

你可以在这个 useState 下存储任何内容。你可以存储字符串、对象、数组、数字、布尔值等等。只需将它们写入 useState 即可。然后，你只需调用状态变量即可使用它们。你还可以使用函数更改变量。

import React, { useState } from "react";

const App = () => {
  const [data, setData] = useState({
    name: "Ratul",
    age: 16
  });
  return (
    <>
      Name is : {data.name} and age is: {data.age}
      <button
        onClick={() => {
          setData({
            name: "Jack",
            age: 21
          });
        }}
      >
        Chnage Value
      </button>
    </>
  );
};
export default App;

在这段代码中，我把一个对象存储在 state 变量下。然后在 body 中渲染它们。点击按钮时，我会更改对象下的值。这些值存储在 state 变量下。我只需使用 state 函数就能轻松更改它们。很简单！现在我们将创建一个小项目。

迷你项目

尝试创建一个包含两个按钮的项目。其中一个按钮会增加“x”的值，另一个按钮会减少“x”的值。并且该值不能低于 0。这意味着最低值将为 0。所以，您可以使用 useState() hook 亲自尝试一下。

import React, { useState } from "react";

const App = () => {
  const [data, setData] = useState(0);
  return (
    <>
      <button
        onClick={() => {
          setData(data + 1);
        }}
      >
        Increament
      </button>
      {data}
      <button
        onClick={() => {
          setData(data - 1);
          if (data === 0) {
            setData(data);
          }
        }}
      >
        Decrement
      </button>
    </>
  );
};
export default App;

首先，我创建了一个状态，它包含一个状态变量和一个函数。然后我存储了一个数字 0，这是我们状态变量的初始值。我们可以用这个函数更新它。现在我们的条件是，按钮会递增数字的值。所以我在点击递增按钮时调用了一个函数，它只会将状态变量的值加 1。另一个条件是，按钮会将数字的值减 1，并且该值不能小于 0，也就是数字不能为负数。所以我们只是将状态变量的值减 1。并且设置一个条件，如果值变为 0，它将保持为 0，不会改变。就这样。

感谢您阅读这篇文章。希望您喜欢。如果您发现任何疑惑或错误的细节，请在讨论中告诉我。请务必关注我，以便收到所有类似的信息文章。

:)

文章来源：https://dev.to/developeratul/learn-usestate-in-5minutes-4j7h