Posted on 

初探React Hook

useState

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React, { useState } from 'react';

function App() {
const [count, setCount] = useState(0);

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

解释

代码示例实现了在p标签显示变量count的值,通过button的onClick 调用setCount 来更新count的值。

useState方法会定义一个state变量,并返回当前state和更新这个state的函数。因此我们使用它时,需要通过解构赋值的方法来获得它的两个返回值: 例如const [count, setCount] = useState(0);

useState方法只需要一个初始state的参数,可以是数字或字符串,例如例子中的0

useEffect

Effect Hook 可以让你在函数组件中执行副作用操作

例如:

1
2
3
4
5
6
// import ...
// () => ...
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
})

副作用(副效应)

所谓的“副作用”,举个通俗一点的例子,假如感冒了本来吃点药就没事了,但是吃了药发现身体过敏了,而这个“过敏”就是副作用。 放到React中,本来只是想渲染DOM展示到页面上,但除了DOM之外还有数据,而这些数据必须从外部的数据源中获取,这个“获取外部数据源”的过程就是副作用。

比如上述例子中,将标题改为”点击的次数“就是副作用。

依赖项——控制useEffect的调用

先看一个”错误“的代码:

1
2
3
4
5
6
7
// import ...
// () => ...
const [count, setCount] = useState(0);
useEffect(() => {
setCount(count + 1);
document.title = `You clicked ${count} times`;
})

在之前的示例的基础上,添加了setCount。乍一看没有问题,在渲染DOM时会先调用setCountcount加一,再修改标题。

但实际的结果是,setCount无限循环,光是这个最简单的函数,运行几秒就会让浏览器开始卡顿。

这个出乎意料的结果原因在于:useEffect 会在每个呈现周期中运行,在每次setCount后, 由于count的更新, UI需要更新以显示其值,而由于UI更新,useEffect再次运行,调用setCount,从而造成了无限循环。

解决方法就是:依赖项。

如果不希望useEffect()在每次渲染都执行,就可以使用依赖项。只有依赖项改变,才会重新渲染。

对于最简单的需求(例如上面的例子,我们只希望执行一次这样的动作),可以简单的将依赖项设为空数组:

1
2
3
4
5
6
7
// import ...
// () => ...
const [count, setCount] = useState(0);
useEffect(() => {
setCount(count + 1);
document.title = `You clicked ${count} times`;
}, [])

这个数组的值不会改变,也就自然只会被渲染一次了。

开往-友链接力
A member of 开往-友链接力

This site was deployed by @OasisLee using Stellar.

本站由Vercel提供托管与Serverless支持 | PlanetScale提供数据库支持