useEffect

useEffect

useEffect 是 React 中用于处理副作用(side effects)的 Hook,它可以看作是函数组件中对生命周期方法(如 componentDidMount、componentDidUpdate 和 componentWillUnmount)的统一替代。

基本概念

纯函数与副作用

在 React 中,函数组件应该尽量保持为纯函数------即它们只依赖于输入(props 和 state)来生成 UI。然而,在实际应用中,我们需要执行一些与渲染无关的操作,比如:

  • 发送网络请求获取数据
  • 添加事件监听器
  • 操作 DOM 元素
  • 订阅数据流(如 WebSocket)

这些操作不直接影响组件的渲染输出,但它们会改变组件外部的状态或与外部环境交互,所以称为 side effects(副作用)。React 使用 useEffect 来集中管理这些副作用,使得组件逻辑更加清晰,同时保持渲染逻辑的纯净性。

组件生命周期

函数组件本身没有传统意义上的生命周期方法,比如类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount。

然而,我们可以通过 Hooks(尤其是 useEffect)来模拟和管理函数组件的生命周期行为。

  1. 挂载阶段(Mounting)

    当组件第一次渲染到页面上时就是挂载阶段 ,相当于类组件的 componentDidMount。

    你可以在 useEffect 中传入一个空依赖数组 [],这样这个 effect 只会在组件挂载后执行一次。

    js 复制代码
    useEffect(() => {
    // 组件挂载后执行
    console.log("组件已挂载");
    
    // 可选:返回一个清理函数,在组件卸载时调用
    return () => {
        console.log("组件将卸载");
    };
    }, []);
  2. 更新阶段(Updating)

    每当组件的 props 或 state 发生变化时,组件会重新渲染, 这相当于类组件的 componentDidUpdate。如果你希望 effect 在特定依赖(例如某个 state 或 props)变化时执行,可以将它们放在依赖数组中。

    js 复制代码
    useEffect(() => {
    // 当 count 变化时, useEffect 将执行
    console.log("count 更新为:", count);
    }, [count]);
  3. 卸载阶段(Unmounting)

    当组件从页面中移除时,可以通过 effect 的返回函数来进行清理工作,类似于类组件中的 componentWillUnmount。

    js 复制代码
    useEffect(() => {
    // 挂载时执行的逻辑...
    
    return () => {
        // 卸载时执行的清理操作
        console.log("组件卸载");
    };
    }, []);

另外,还有 useLayoutEffect,它与 useEffect 类似,但会在 DOM 变更后、浏览器绘制前同步执行,适合需要立即读取布局信息的情况。

这种设计符合 React 的单向数据流和函数式编程理念,让状态管理和副作用处理更加集中和可预测。

注意事项

  • 依赖数组必须准确:遗漏依赖可能导致数据不一致或 bug;添加不必要的依赖则可能导致不必要的重新执行。

  • 清理函数的重要性:确保在 effect 中创建的资源能在组件卸载或更新前正确释放。

相关推荐
年纪轻轻只想躺平29 分钟前
Vue2部分知识点和注意项
前端·javascript·vue.js
多则惑少则明2 小时前
Vue开发系列——Vue 生命周期钩子 及常见知识点
前端·javascript·vue.js·前端框架
菥菥爱嘻嘻2 小时前
JS手写代码篇---Pomise.race
开发语言·前端·javascript
南瓜胖胖3 小时前
【R语言编程绘图-调色】
开发语言·r语言
lanbing4 小时前
非常适合初学者的Golang教程
开发语言·后端·golang
CodeCipher4 小时前
前端Vue3列表滑动无限加载实现
前端·javascript·vue.js·vue
十碗饭吃不饱4 小时前
vue修改配置文件.env.development不生效
前端·javascript·vue.js
stormsha5 小时前
GO语言进阶:掌握进程OS操作与高效编码数据转换
开发语言·数据库·后端·golang·go语言·源代码管理
老神在在0015 小时前
javaEE1
java·开发语言·学习·java-ee
魔道不误砍柴功5 小时前
《接口和抽象类到底怎么选?设计原则与经典误区解析》
java·开发语言