React Hook 之 State Hook

Hook 在 class 内部是不起作用的,但你可以使用它们来取代 class。

Hook 是一个特殊的函数,它可以让你 “钩入” React 的特性。useState 就是在函数组件中 使用 state 特性的 Hook。

import React, { useState } from 'react'

function Example() {
      const [count, setCount] = useState(0)
}

上面代码,首先引入了 state 的 hook,然后在函数内 声明了一个变量 count,然后 useState 赋给这个变量初始值 0。这里的初始值可以是任何数据类型。如果想要再声明一个变量,再调用一次即可。useState 返回值为,当前state以及更新state的函数。即 setCount。我们可以通过 setCount 来更新 count 的值。
这里的 countsetState 相当于 class 里面的 this.state.countthis.setCount。不过,注意,hook里面,这两个值需要成对的获取。

函数中使用变量 count 直接读取即可,例如:
<b> {count} </b>

函数中更新变量。

<button onClick={() => setCount(count+1)}>加1</button>

在需要更新的地方调用方法即可。

const [count, setCount] = useState(0)

上面的写法叫做 数组解构。这意味着我们同时创建了两个变量:count、setCount。count 是 useState 返回的第一个值,setCount 是返回的第二个值。

原文地址:https://www.cnblogs.com/xguoz/p/13458353.html