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 变量总是替换它而不是合并它。
总结
怎么使用 hook 在函数组件中创建 state
怎么使用 hook 在函数组件中读取 state
怎么使用 hook 在函数组件中更新 state
hook 是什么?