React Hook中如何使用State Hook


今天小编给大家分享一下ReactHook中如何使用StateHook的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。Hook 简介章节中使用下面的例子介绍了 Hook:Youclicked{count}times我们将通过将这段代码与一个等价的class示例进行比较来开始学习 Hook。如果你之前在 React 中使用过class,这段代码看起来应该很熟悉:Youclicked{this.state.count}timesstate初始值为{ count: 0 },当用户点击按钮后,我们通过调用this.setState()来增加state.count。整个章节中都将使用该class的代码片段做示例。复习一下, React 的函数组件是这样的:或是这样:你之前可能把它们叫做“无状态组件”。但现在我们为它们引入了使用 Reactstate的能力,所以我们更喜欢叫它”函数组件”。Hook 在class内部是不起作用的。但你可以使用它们来取代class。在新示例中,首先引入 React 中useState的 HookHook 是什么?Hook 是一个特殊的函数,它可以让你“钩入” React 的特性。例如,useState是允许你在 React 函数组件中添加state的 Hook。稍后我们将学习其他 Hook。什么时候我会用 Hook?如果你在编写函数组件并意识到需要向其添加一些state,以前的做法是必须将其转化为class。现在你可以在现有的函数组件中使用 Hook。在class中,我们通过在构造函数中设置this.state{ count: 0 }来初始化count state0:在函数组件中,我们没有this,所以我们不能分配或读取this.state。我们直接在组件中调用useStateHook:调用 useState 方法的时候做了什么?它定义一个 “state变量”。我们的变量叫count, 但是我们可以叫他任何名字,比如banana。这是一种在函数调用时保存变量的方式 ——useState是一种新方法,它与class里面的this.state提供的功能完全相同。一般来说,在函数退出后变量就会”消失”,而state中的变量会被 React 保留。useState 需要哪些参数?useState()方法里面唯一的参数就是初始state。不同于class的是,我们可以按照需要使用数字或字符串对其进行赋值,而不一定是对象。在示例中,只需使用数字来记录用户点击次数,所以我们传了0作为变量的初始state。(如果我们想要在state中存储两个不同的变量,只需调用useState()两次即可。)useState 方法的返回值是什么?返回值为:当前state以及更新state的函数。这就是我们写const [count, setCount] = useState()的原因。这与class里面this.state.countthis.setState类似,唯一区别就是你需要成对的获取它们。如果你不熟悉我们使用的语法,我们会在本章节的底部介绍它。既然我们知道了useState的作用,我们的示例应该更容易理解了:我们声明了一个叫countstate变量,然后把它设为0。React 会在重复渲染时记住它当前的值,并且提供最新的值给我们的函数。我们可以通过调用setCount来更新当前的count注意你可能想知道:为什么叫useState而不叫createState?“Create” 可能不是很准确,因为state只在组件首次渲染的时候被创建。在下一次重新渲染时,useState返回给我们当前的state。否则它就不是state了!这也是 Hook 的名字总是以use开头的一个原因。我们将在后面的 Hook 规则中了解原因。当免费云主机域名我们想在class中显示当前的count,我们读取this.state.count:Youclicked{this.state.count}times在函数中,我们可以直接用count:Youclicked{count}times在class中,我们需要调用this.setState()来更新count值:在函数中,我们已经有了setCountcount变量,所以我们不需要this:现在让我们来仔细回顾一下学到的知识,看下我们是否真正理解了。Youclicked{count}times第一行– 引入React 中的useStateHook。它让我们在函数组件中存储内部state第四行– 在Example组件内部,我们通过调用useStateHook 声明了一个新的state变量。它返回一对值给到我们命名的变量上。我们把变量命名为count,因为它存储的是点击次数。我们通过传0作为useState唯一的参数来将其初始化为0。第二个返回的值本身就是一个函数。它让我们可以更新count的值,所以我们叫它setCount第九行– 当用户点击按钮后,我们传递一个新的值给setCount。React 会重新渲染Example组件,并把最新的count传给它。你可能注意到我们用方括号定义了一个state变量等号左边名字并不是 React API 的部分,你可以自己取名字:这种 JavaScript 语法叫数组解构。它意味着我们同时创建了fruitsetFruit两个变量,fruit的值为useState返回的第一个值,setFruit是返回的第二个值。它等价于下面的代码:当我们使用useState定义state变量时候,它返回一个有两个值的数组。第一个值是当前的state,第二个值是更新state的函数。使用[0][1]来访问有点令人困惑,因为它们有特定的含义。这就是我们使用数组解构的原因。将state变量声明为一对[something, setSomething]也很方便,因为如果我们想使用多个state变量,它允许我们给不同的state变量取不同的名称:在以上组件中,我们有局部变量agefruittodos,并且我们可以单独更新它们:你不必使用多个state变量。State变量可以很好地存储对象和数组,因此,你仍然可以将相关数据分为一组。然而,不像class中的this.setState,更新state变量总是替换它而不是合并它。以上就是“ReactHook中如何使用StateHook”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注百云主机行业资讯频道。

相关推荐: HTML标题怎么定义

这篇文章将为大家详细讲解有关HTML标题怎么定义,小编觉得挺实用的,因此分享给大免费云主机域名家做个参考,希望大家阅读完这篇文章后可以有所收获。HTML 标题HTML 标题(Heading)是通过实例关于“HTML标题怎么定义”这篇文章就分享到这里了,希望以上…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 01/24 11:26
下一篇 01/24 11:27

相关推荐