React - 你知道useffect函数内如何模拟生命周期吗

难度级别:中级及以上                                 提问概率:65% 


很多前端开发人员习惯了Vue或者React的组件式开发,熟知组件的周期过程包含初始化、挂载完成、修改和卸载等阶段。但是当使用Hooks做业务开发的时候,看见一个个useEffect函数,却显得有些迷茫,因为在useEffect中,不需要定义那些生命周期的钩子函数了,那么怎么知道组件走到哪一个周期了呢?我们一起来看一下。

useEffect其实可以看做是componentDidMount、componentDidUpdate和componentWillUnmount这3个周期的结合展现,也就是说在useEffect函数内,可以通过一定的控制达到这3个生命周期的结合效果。useEffect接收两个参数,第一个参数是一个函数,重点在于第二个参数。第二个参数是非必填的,它是一个数组,主要通过第二个参数来控制useEffect的阶段。

例如要实现componentDidMount,我们知道componentDidMount是在组件初始化阶段才会被调用,在组件后续的更新和卸载阶段并不会执行,可以通过给useEffect函数的第二个参数传递空数组的方

相关推荐

  1. 知道模拟养成游戏如何开发

    2024-04-10 04:18:01       69 阅读
  2. react如何合理使用useEffect

    2024-04-10 04:18:01       27 阅读
  3. React Hooks、useState、useEffectreact函数状态

    2024-04-10 04:18:01       45 阅读
  4. React 生命周期详解

    2024-04-10 04:18:01       53 阅读
  5. React生命周期

    2024-04-10 04:18:01       33 阅读
  6. React生命周期

    2024-04-10 04:18:01       28 阅读
  7. Reactreact生命周期

    2024-04-10 04:18:01       41 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-10 04:18:01       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-10 04:18:01       106 阅读
  3. 在Django里面运行非项目文件

    2024-04-10 04:18:01       87 阅读
  4. Python语言-面向对象

    2024-04-10 04:18:01       96 阅读

热门阅读

  1. Day6:学习尚上优选项目

    2024-04-10 04:18:01       30 阅读
  2. Nginx服务搭建案例

    2024-04-10 04:18:01       27 阅读
  3. [lesson12]经典问题解析一

    2024-04-10 04:18:01       32 阅读
  4. 计算机网络---第二天

    2024-04-10 04:18:01       27 阅读
  5. C语言题目:阶乘数列求和(函数)

    2024-04-10 04:18:01       31 阅读
  6. Element-plus使用中遇到的问题

    2024-04-10 04:18:01       34 阅读
  7. UVA1595 Symmetry 对称轴 解题报告

    2024-04-10 04:18:01       33 阅读
  8. npm install 太慢?解决方法

    2024-04-10 04:18:01       32 阅读
  9. 父子组件传值,子组件反显问题

    2024-04-10 04:18:01       30 阅读