React 18中hook函数详解之useState和useEffect

前言

React创建组件的方式有三种，分别是函数式组件、类组件，还有createElement组件。react v16.8版本之前函数式组件是没有状态的。但是，自16.8以后得版本有个hook函数，函数式组件也有了状态，反而类组件没有多少人写了，原因在于生命周期很麻烦，也难记。笔者近几年写React项目已经很少使用类组件了。接下来，详细探讨下hook函数，为什么会有那么神奇的效果？

一、常用的Hook有哪些？

React Hooks 是 React v16.8 之后推出的函数式组件状态管理方案。它是为了解决状态复用、类组件写法麻烦等原因而提出的，Hook函数本质是闭包。Hooks 主要是利用闭包来保存状态，使用链表保存一系列 Hooks，将链表中的第一个 Hook 与 Fiber 关联。在 Fiber 树更新时，就能从 Hooks 中计算出最终输出的状态和执行相关的副作用。Hook函数带来便利有逻辑复用、业务代码更聚合、写法更简洁。

常用的Hook函数useState、useEffect、useRef、useCallback、useMemo、useReducer、useLayoutEffect

二、useState详解

useState是React自带的一个Hook函数，使用useState可声明内部状态变量。useState接收的参数为状态初始值或状态初始化方法，它返回一个数组。数组的第一项是当前状态值，每次渲染其状态值可能都会不同；第二项是可改变对应状态值的set函数，在useState初始化后该函数不会变化。

useState的类型为：

function useState<S>(initialState:S|(() => S )): [S,Dispatch <SetStateAction <S>>];

initialState仅在组件初始化时生效，后续的渲染将忽略initialState：

const [value, setValue] = useState("");
const [count, setCount] = useState(value);

如上例中的value，当初始值传入另一个状态并初始化后，另一个状态函数将不再依赖value的值。

在 class 中，我们需要调用 this.setState() 来更新 count 值,在函数式组件中，我们已经有了 setCount 和 count 变量，所以我们不需要 this:

import {useState} from "react";
const Example = () => {const [count, setCount] = useState(0);return (<div><button onClick={() => {setCount(count+1)}}>点击更新count：{count}     </button></div>)
}

类似于setState，单击按钮时调用setCount更新了状态值count。当调用setCount后，组件会重新渲染，count的值会得到更新。

当传入初始状态为函数时，其仅执行一次，类似于类组件中的构造函数：

useState返回的更新函数也可使用函数式更新：

setCount(preCount => preCount + 1)

如果新的state需要依赖先前的 state 计算得出，那么可以将回调函数当作参数传递给setState。该回调函数将接收先前的state，并将返回的值作为新的state进行更新。

在组件生命周期或React合成事件中，setState是异步；在setTimeout或者原生dom事件中，setState是同步。

为什么react大部分情况setState是异步的呢？假如所有setState是同步的，意味着每执行一次setState时（有可能一个同步代码中，多次setState），都重新vnode diff + dom修改，这对性能来说是极为不好的。如果是异步，则可以把一个同步代码中的多个setState合并成一次组件更新。

三、useEffect详解

useEffect函数会在组件渲染完毕后，执行和渲染无关的副作用，如数据获取，设置订阅以及手动更改 React 组件中的 DOM 等。

有了useEffect，我们可以在函数组件中实现像类组件中的生命周期那样某个阶段做某件事情,具有:

componentDidMount
componentDidUpdate
componentWillUnmount

基本用法：

useEffect(() => {console.log('这是一个不含依赖数组的useEffect，每次render都会执行！')
})

useEffect接受一个回调函数和一个可选的依赖项数组。回调函数会在组件挂载、更新和卸载时执行，根据依赖项的不同情况选择执行。如果依赖项为空数组，那么回调函数只会在组件挂载和卸载时执行一次。如果依赖项中包含某个状态或属性，那么只有在这个状态或属性发生变化时才会执行回调函数。

useEffect的规则

没有传第二个参数时，在每次 render 之后都会执行 useEffect中的内容
useEffect接受第二个参数来控制跳过执行，下次 render 后如果指定的值没有变化就不会执行
useEffect 是在 render 之后浏览器已经渲染结束才执行
useEffect 的第二个参数是可选的，类型是一个数组
根据第二个参数的不同情况，useEffect具有不同作用

下面是useEffect的一些常见用法：

1、获取数据和执行网络请求：

import React, { useState, useEffect } from 'react';
import axios from 'axios';function MyComponent() {const [data, setData] = useState([]);useEffect(() => {const fetchData = async () => {const result = await axios.get('/api/data');setData(result.data);}fetchData();}, []);return (<div>{data.map((item) => <div key={item.id}>{item.name}</div>)}</div>);
}export default MyComponent;

2、订阅事件：

import { useEffect } from 'react';function MyComponent() {useEffect(() => {const subscription = myEventEmitter.subscribe('event', () => {// 处理事件逻辑});return () => {subscription.unsubscribe();};}, []);return <div>My Component</div>;
}

3、执行清理操作：

import { useEffect, useState } from 'react';function MyComponent() {const [timer, setTimer] = useState(null);useEffect(() => {const id = setInterval(() => {// 处理定时器逻辑}, 1000);setTimer(id);return () => {clearInterval(timer);};}, []);return <div>My Component</div>;
}

4、使用第三方库：

import { useEffect } from 'react';
import moment from 'moment';function MyComponent() {useEffect(() => {moment.locale('zh-cn');}, []);return <div>{moment().format('LLLL')}</div>;
}

需要注意的是，useEffect回调函数中的操作可能会对应用程序的性能产生影响。如果回调函数执行的操作很耗费资源，那么可能会导致应用程序变慢。因此，需要谨慎使用useEffect，并在需要时进行性能优化。

在使用React Hooks时，需要遵守以下准则及特性要求。