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 state为0：在函数组件中，我们没有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.count和this.setState类似，唯一区别就是你需要成对的获取它们。如果你不熟悉我们使用的语法，我们会在本章节的底部介绍它。既然我们知道了useState的作用，我们的示例应该更容易理解了：我们声明了一个叫count的state变量，然后把它设为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值：在函数中，我们已经有了setCount和count变量，所以我们不需要this:现在让我们来仔细回顾一下学到的知识，看下我们是否真正理解了。Youclicked{count}times第一行– 引入React 中的useStateHook。它让我们在函数组件中存储内部state。第四行– 在Example组件内部，我们通过调用useStateHook 声明了一个新的state变量。它返回一对值给到我们命名的变量上。我们把变量命名为count，因为它存储的是点击次数。我们通过传0作为useState唯一的参数来将其初始化为0。第二个返回的值本身就是一个函数。它让我们可以更新count的值，所以我们叫它setCount。第九行– 当用户点击按钮后，我们传递一个新的值给setCount。React 会重新渲染Example组件，并把最新的count传给它。你可能注意到我们用方括号定义了一个state变量等号左边名字并不是 React API 的部分，你可以自己取名字：这种 JavaScript 语法叫数组解构。它意味着我们同时创建了fruit和setFruit两个变量，fruit的值为useState返回的第一个值，setFruit是返回的第二个值。它等价于下面的代码：当我们使用useState定义state变量时候，它返回一个有两个值的数组。第一个值是当前的state，第二个值是更新state的函数。使用[0]和[1]来访问有点令人困惑，因为它们有特定的含义。这就是我们使用数组解构的原因。将state变量声明为一对[something, setSomething]也很方便，因为如果我们想使用多个state变量，它允许我们给不同的state变量取不同的名称：在以上组件中，我们有局部变量age，fruit和todos，并且我们可以单独更新它们：你不必使用多个state变量。State变量可以很好地存储对象和数组，因此，你仍然可以将相关数据分为一组。然而，不像class中的this.setState，更新state变量总是替换它而不是合并它。以上就是“ReactHook中如何使用StateHook”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注百云主机行业资讯频道。