react hooks的useEffect:

React 的 useEffect Hook 用于在函数组件中执行副作用操作(例如数据获取、订阅事件等),它类似于类组件中的生命周期方法 componentDidMountcomponentDidUpdatecomponentWillUnmount 的组合。

useEffect 接收一个回调函数和一个可选的依赖数组。

复制代码
import { useEffect } from 'react';

useEffect(() => {
  // 在这里执行副作用操作

  // 返回一个清除函数(可选)
  return () => {
    // 在组件销毁之前执行清除操作
  };
}, [依赖数组]);

回调函数作为参数传递给 useEffect,它将在组件渲染后执行,每次组件更新时也会重新执行。

依赖数组是一个可选的参数,在数组中指定的依赖发生变化时, useEffect 将重新执行回调函数。如果省略了依赖数组,则每次组件更新时都会重新执行回调函数。

在回调函数中,我们可以进行各种副作用操作,比如订阅事件、发送网络请求、操作 DOM 等。

返回的清除函数(可选)将在组件销毁之前执行,用于清理副作用操作,比如取消订阅、清除定时器等。

以下是几个使用 useEffect 的示例:

  1. 基本用法:在组件渲染后执行副作用操作。

    import { useEffect } from 'react';

    function MyComponent() {
    useEffect(() => {
    console.log('Component rendered');

    复制代码
     return () => {
       console.log('Component cleanup');
     };

    }, []);

    return null;
    }

  2. 使用依赖项:在依赖项发生变化时执行副作用操作。

    import { useEffect, useState } from 'react';

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

    useEffect(() => {
    console.log(Count changed: ${count});

    复制代码
     return () => {
       console.log('Component cleanup');
     };

    }, [count]);

    return (


    <button onClick={() => setCount(count + 1)}>Increment</button>

    );
    }

  3. 清理副作用操作:在组件销毁前执行清除操作。

    import { useEffect } from 'react';

    function MyComponent() {
    useEffect(() => {
    const subscription = subscribeToEvents();

    复制代码
     return () => {
       unsubscribeFromEvents(subscription);
     };

    }, []);

    return null;
    }

在这个例子中,我们订阅了一些事件,返回的清除函数会在组件销毁前取消订阅。

通过使用 useEffect Hook,我们可以将副作用操作集成到函数组件中,并根据需要进行清理操作,使组件更加灵活和可维护。

相关推荐
江城开朗的豌豆几秒前
Vue图片懒加载:极简方案 vs 兼容全攻略
前端·javascript·vue.js
oil欧哟4 分钟前
🧐 AI 批量检查数千份技术文档,如何实现高效文档纠错?
前端·人工智能·ai编程
江城开朗的豌豆5 分钟前
Vue组件data必须用函数?这个设计暗藏玄机!
前端·javascript·vue.js
前端小巷子13 分钟前
web域名解析
前端·javascript·面试
LaoZhangAI13 分钟前
沉浸式翻译API深度解析:500万用户的翻译神器如何配置[2025完整指南]
前端·后端
然我20 分钟前
链表指针玩不转?从基础到双指针,JS 实战带你破局
前端·数据结构·算法
江城开朗的豌豆20 分钟前
组件封装实战:如何设计灵活又好用的前端组件?
前端·javascript·vue.js
EndingCoder28 分钟前
算法与前端的可访问性
前端·算法·递归·树形结构
brzhang36 分钟前
别再梭哈 Curosr 了!这 AI 神器直接把需求、架构、任务一条龙全干了!
前端·后端·架构
Kagol44 分钟前
TinyEditor v4.0 alpha 版本发布,更强大的表格、更丰富的表情、体验更好的图片/视频/文件上传功能
前端·开源