React@16.x(23)useEffect

1,介绍

作用

用于在函数组件内,处理副作用,比如:

  • ajax 请求
  • 计时器
  • 其他异步操作
  • 更改真实DOM对象
  • 本地存储
  • 其他会对外部产生影响的操作(和自身无关)。

介绍

useEffect 接收2个参数,

  • 参数1,一个函数。在该函数中执行副作用。
  • 参数2(可选),一个数组。记录参数1中使用到的依赖。
import React, { useEffect, useState } from "react";

export default function App() {
    const [n, setN] = useState(0);
    useEffect(() => {
        document.title = `数字:${n}`;
    });
    return (
        <div>
            <span>{n}</span>
            <button
                onClick={() => {
                    setN(n + 1);
                }}
            >
                加一
            </button>
        </div>
    );
}

2,注意点

2.1,参数1,副作用函数

2.1.1,运行时间点

在页面完成真实UI渲染后执行,并且是异步的,不会阻塞浏览器。

和类组件中的生命周期函数 componentDidMountcomponentDidUpdate区别

它们是同步执行的;在得到真实DOM后,用户还没有看到真实UI渲染时执行。

useLayoutEffect 的执行时间点和 componentDidMountcomponentDidUpdate 相同。

2.1.2,返回值

要么没有返回值,如果有必须是一个函数。该函数称为清理函数

type EffectCallback = () => void | (() => void);;

清理函数的特点:

  • 首次渲染不会执行,组件销毁一定执行;
  • 再次渲染时,会在副作用函数之前运行。

所以,一般会在清理函数中,清理副作用函数开启的计时器。

import React, { useEffect, useState } from "react";

function Child() {
    useEffect(() => {
        let timer = null;
        let n = 10;
        timer = setInterval(() => {
            console.log(n--);
        }, 1000);
        return () => {
            clearInterval(timer);
        };
    });
    return <div>子组件</div>;
}

export default function App() {
    const [visible, setVisible] = useState(true);
    return (
        <div>
            {visible && <Child />}
            <button
                onClick={() => {
                    setVisible(!visible);
                }}
            >
                显示/隐藏
            </button>
        </div>
    );
}

2.1.3,闭包的影响

在副作用函数中,如果使用了函数组件上下文中的变量,受闭包影响,会导致副作用函数中的变量不会实时变化

原理和闭包的经典问题一样,不同点是这里的 n 是一个状态

也就是说,每次函数组件重新调用,计时器的回调函数使用的都是当次函数组件调用时产生的新值( 相当于计时器中使用了传递的参数)。

所以每次开启新计时器时,n 都不一样。

export default function App() {
    const [n, setN] = useState(10);
    useEffect(() => {
        setTimeout(() => {
            console.log(n);
        }, 3000);
    });
    return (
        <div>
            <button
                onClick={() => {
                    setN(n - 1);
                }}
            >
                n-1
            </button>
        </div>
    );
}

3s 后打印,所以在3s内连续点击按钮3次,3s后会先打印出 10(首次渲染),再依次打印出 9 8 7

2.1.4,严禁出现在代码块中(判断,循环)

原理和 useState 类似,这样写会导致无法正确获取要执行的副作用函数。

2.1.5,尽量保持副作用函数稳定

副作用函数在每次(重新渲染)注册时,会覆盖掉之前的副作用函数,因此,尽量保持副作用函数稳定,否则控制起来会比较复杂。

2.2,参数2,数组

作用:记录副作用函数的依赖数据。当组件重新渲染后,如果新旧依赖数据不一致(Object.is() 判断),才会执行副作用函数。

类似于 Vue3 中的 watcheffect

所以,如果依赖数据没有发生变化,则:

  • 副作用函数仅在组件第一次渲染后执行;
  • 清理函数仅在组件卸载时执行。

参数2传递空数组就能实现依赖不发生变化。

useEffect(() => {
    console.log('副作用函数执行');
    return () => {
        console.log('清理函数执行');
    }
}, [])

比如请求列表数据,当前页码 page 和每页展示个数 limit 发生变化时,再请求接口:

useEffect(() => {
    (async function () {
        const resp = await getList(page, limit);
        // 获取 list 和 total
    })();
}, [page, limit])

以上。

  • 22
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

下雪天的夏风

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值