Skip to main content

State Hook

Hook 是什么?

Hook 是一个函数,可以让你在函数组件中使用一些 React 的特性(state/生命周期),它们通常以use开头。

声明 state 变量

类组件中:

class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
}

函数组件中:

import React, { useState } from "react";

function Example() {
// 声明一个叫 “count” 的 state 变量。
const [count, setCount] = useState(0);

return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}

那么调用 useState 的时候做了什么?它定义一个 “state 变量”。我们的变量叫 count, 但是我们可以叫他任何名字。这是一种在函数调用时保存变量的方式 —— useState 是一种新方法,它与 class 里面的 this.state 提供的功能完全相同。一般来说,在函数退出后变量就会”消失”,而 state 中的变量会被 React 保留。也就是说每次组件重新渲染 state 会保留上次的状态。

useState 接收的参数useState() 方法里面唯一的参数就是初始 state。

useState 方法的返回值是什么? 返回值为:当前 state 以及更新 state 的函数。

我们声明了一个叫 count 的 state 变量,然后把它设为 0。React 会在重复渲染时记住它当前的值,并且提供最新的值给我们的函数。我们可以通过调用 setCount 来更新当前的 count。

读取 state

class 组件:this.state.xxx

hook: 直接通过 useState 返回的元组的第一个元素来获取

更新 state

class 组件: this.setState

hook: setState 函数(即 useState 返回的元组的第二个元素)

然而,不像 class 中的 this.setState,更新 state 变量总是替换它而不是合并它。

总结

  1. 怎么使用 hook 在函数组件中创建 state

  2. 怎么使用 hook 在函数组件中读取 state

  3. 怎么使用 hook 在函数组件中更新 state

  4. hook 是什么?