当前位置：首页 > news >正文

react中useEffect函数的详细用法

news 来源：原创 2024/9/29 11:34:40

1、函数介绍

useEffect 是 React 中的一个 Hook，用于在函数组件中处理副作用（如数据获取、订阅、手动更改 DOM 等）。与类组件中的生命周期方法（如 componentDidMount、componentDidUpdate 和 componentWillUnmount）类似，useEffect 让你在函数组件中完成相同的操作。( from chatGPT)

简单来说，useEffect属于组件的生命周期方法。在组件不同的生命周期，我们可以通过useEffect函数来控制执行过程。那么什么是组件的生命周期呢？

2.组件的生命周期

在 React 中，组件的生命周期分为三个主要阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting）。挂载和渲染是关键的生命周期阶段，理解它们对于有效地使用 React 至关重要。

2.1 挂载（Mounting）

载是指组件第一次被插入到 DOM 中的过程。挂载阶段包括以下步骤：

构造函数（Constructor）：组件的构造函数被调用。如果你在类组件中定义了构造函数，那么它会在组件实例化时首先被调用。
getDerivedStateFromProps（静态方法）：在初始化和更新期间调用，允许组件基于输入的 props 来更新状态。它是一个静态方法，不能访问组件实例。
render：渲染方法被调用。它返回要渲染的元素（通常是 JSX）。
componentDidMount：组件已经被挂载到 DOM 中，此时可以执行一些副作用操作，比如数据获取、订阅事件等。

2.2 渲染和更新

渲染（Rendering）

渲染是指组件根据其当前状态和属性生成要显示的元素。每次组件的状态或属性发生变化时，渲染过程都会被触发。渲染阶段包括：

render 方法（类组件）：被调用以生成虚拟 DOM 结构。
函数组件本身：被调用以生成虚拟 DOM 结构。

在每次状态或属性变化时，组件会重新渲染。React 将对比虚拟 DOM（使用 Diff 算法）并更新实际 DOM 以反映变化。

更新（Updating）

更新是指组件的状态或属性发生变化并重新渲染的过程。更新阶段包括以下步骤：

getDerivedStateFromProps（静态方法）：同挂载阶段一样，在属性变化时调用。
shouldComponentUpdate：决定组件是否应该重新渲染。返回 true 表示重新渲染，返回 false 表示跳过更新。
render：渲染方法被调用以生成新的虚拟 DOM 结构。
getSnapshotBeforeUpdate：在 DOM 更新之前被调用，返回的值将作为 componentDidUpdate 的第三个参数。
componentDidUpdate：组件更新并重新渲染到 DOM 之后调用，可执行副作用操作。

2.3 卸载（Unmounting）

卸载是指组件被移出 DOM 的过程。卸载阶段只包括一个方法：

componentWillUnmount：组件即将卸载时调用，可以在这里执行清理操作，例如取消订阅、清除定时器等。

2.4 总结

挂载：组件第一次被插入到 DOM 中时执行。类组件中使用 componentDidMount，函数组件中使用 useEffect（空依赖数组）。
渲染：每次组件的状态或属性变化时，都会重新生成虚拟 DOM 并更新实际 DOM。
更新：状态或属性变化引起组件重新渲染。类组件中使用 componentDidUpdate，函数组件中使用 useEffect（依赖数组）。
卸载：组件被移出 DOM 时执行。类组件中使用 componentWillUnmount，函数组件中通过 useEffect 的清理函数处理。

3、函数的基本用法

有了对组件生命周期的认识，那么就可以利用useEffect函数根据组件不同的生命周期阶段来执行不同的方法。比如：

有的方法只希望在执行一次，即在组件挂载的时候执行一次就够了，后面也不需要再次执行
有的方法希望在组件每次渲染（元素有更新）的时候都执行
有的方法希望在某个依赖的变量发生变化时才会执行
有的方法希望在组件卸载（页面退出的）的时候执行

上面的执行过程都都可以通过useEffect方法做到。

3.1 用法示例

import React, { useState, useEffect } from 'react';function ExampleComponent() {const [count, setCount] = useState(0);useEffect(() => {// 这里的代码相当于 componentDidMount 和 componentDidUpdatedocument.title = `You clicked ${count} times`;// 如果需要清理，可以返回一个函数return () => {// 这里的代码相当于 componentWillUnmountconsole.log('Cleaning up...');};}, [count]); // 依赖数组return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}export default ExampleComponent;

3.2 用法说明

副作用的执行：
- useEffect 的第一个参数是一个函数，它在组件渲染后执行。可以在这个函数内进行副作用操作。
- 如果需要清理副作用，可以在这个函数中返回一个函数，这个返回的函数会在组件卸载或副作用重新执行前调用。
依赖数组：
- useEffect 的第二个参数是一个依赖数组（可以依赖多个变量），表示副作用依赖的变量。当依赖数组中的任何一个变量发生变化时，副作用函数会重新执行。
- 如果依赖数组为空（[]），副作用函数只会在组件挂载和卸载时执行一次，类似于 componentDidMount 和 componentWillUnmount。
- 如果不传依赖数组，副作用函数会在每次组件渲染后执行，类似于 componentDidUpdate。