标签：从头开始 单击 状态 钩子 useState 使用 组件 usestate 我们

关于一切 使用状态（） 从头开始反应钩子

在 react js 中，我们有两种类型的组件。

1. 功能组件
2. 类组件

类组件是有状态组件，而功能组件是无状态组件。

那是什么意思？？

国家是 一个内置的 React 对象，用于包含有关组件的数据或信息 .组件的状态会随着时间而改变；每当它发生变化时，组件都会重新渲染。所以我们的 UI 会自动更新。

在类组件中，我们使用渲染。因此，当组件的状态发生变化时，UI 会重新渲染并更新。

为了在类组件中获得状态的好处，我们使用 this.state 。

拥有状态是很棒的功能。

这是一个功能组件的示例。在这里，当我们单击按钮时，a 的值应更改为 Rushvik，并且我们应该在控制台中看到“单击”消息和名称。

但是猜猜看，a 的值发生了变化，您可以在 console.log 输出中看到。但是 UI “hello dipesh”消息没有改变。意味着组件没有被重新渲染。这是因为功能组件是无状态的。

因此，为了使它们有状态，引入了 React 钩子。这将帮助我们在功能组件中使用状态。

今天我们在 React hooks 中的第一课是“useState()”。

这就像类组件中的 this.state 一样，它使我们能够在功能组件中使用状态。

让我们更多地了解它。

为了使用它，我们只需要从 react 导入 useState 。在上面的示例中，我们可以观察到 usestate 在 if 条件中使用。但这会给我们带来一个严重的错误。

所以反应规则书说

仅在顶层调用 Hooks

不要在循环、条件或嵌套函数中调用 Hook。 相反，在任何提前返回之前，始终在 React 函数的顶层使用 Hooks。通过遵循此规则，您可以确保每次渲染组件时都以相同的顺序调用 Hook。这就是允许 React 在多个之间正确保留 Hooks 状态的原因 使用状态 和 使用效果 来电。

您将在未来了解更多关于它们的信息。

所以记住上面的规则，因为它非常重要。

所以 当我们使用 usestate 时，组件会在其状态发生变化时重新渲染。

如果我控制使用状态，我们会看到两件事。

它有两件事，一是它的状态。其他是改变其状态的功能。所以，让我们对其进行解构。

在函数中，您可以观察到几件事。

首先，我将 usestate 解构为名称 setname。然后通过在 useState() 中提及它，我将 name 的初始值指定为 dipesh。

我们提到的任何内容都将成为初始值。我们甚至可以将其留空。

Name 是变量的状态，setName 用于改变它的状态。代替 setName 你可以使用任何东西，但是按照惯例，我们按照上面的方式编写。

Before click

After click

此处名称已通过单击按钮更改。这意味着当名称的状态发生变化时组件已经渲染。

我们 一般来说 在 usestate() 中使用四种类型的值。

1. 细绳
2. 布尔值
3. 大批
4. 目的

下面是我在 usestate 中使用布尔值的示例。当标志为真时打印名称，当标志为假时显示空白。最初标志为假。

Initial state

after a click

让我们在 usestate 中使用数字。

THE UI OUTPUT

每当我们单击 + 时，数字会增加，当我们单击时 - 数字会减少。

观察上面的递增和递减函数。

但是这种方法存在一个问题。

如果我们将增量更改为单击两次，如下所示，它不起作用。

通过一键点击，即使在进行上述更改后，数字也会增加 1。这是因为，先前的状态不是被设置状态所采用。所以为了避免这种情况，我们使用prestate。

现在，在此更改之后，每次单击都会将数字增加 2。

这里要注意的一点是，神奇的不在 prevState 变量中，而是归功于 ES6 特性箭头函数。

您可以使用任何变量代替 preState，功能是相同的。您可以阅读有关箭头函数的更多信息以更好地理解它。

在 useState() 中使用数组

Name submission form

The browser output

在 addNames 函数中，我们直接推送值。但这是一个不好的做法。相反，我们必须做如下。

我们在这里使用扩展运算符。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/27336/16351110

标签：从头开始,单击,状态,钩子,useState,使用,组件,usestate,我们
来源： https://www.cnblogs.com/amboke/p/16683619.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。