怎么使用useEffect模拟组件生命周期

这篇文章主要介绍“怎么使用useEffect模拟组件生命周期”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么使用useEffect模拟组件生命周期”文章能帮助大家解决问题。

useEffect模拟组件生命周期

让函数组件模拟生命周期

  • 默认函数组件没有生命周期

  • 函数组件是一个纯函数，执行完即销毁，自己无法实现生命周期

  • 通过Effect hook把生命周期“钩”到纯函数中

    // 模拟 class 组件的 DidMount 和 DidUpdate
    useEffect(() => {
      console.log('在此发送一个 ajax 请求')
    })
 
    // // 模拟 class 组件的 DidMount
     useEffect(() => {
        console.log('加载完了')
     }, []) // 第二个参数是 [] （不依赖于任何 state）
 
     // 模拟 class 组件的 DidUpdate
     useEffect(() => {
         console.log('更新了')
     }, [count, name]) // 第二个参数就是依赖的 state
 
    // 模拟 class 组件的 DidMount
    useEffect(() => {
        let timerId = window.setInterval(() => {
            console.log(Date.now())
        }, 1000)
 
        // 返回一个函数
        // 模拟 WillUnMount 组件销毁的时候 停止计时器
        return () => {
            window.clearInterval(timerId)
        }
    }, [])

总结：

  • 模拟componentDidMount  -  useEffect 依赖 [ ]

  • 模拟compenentDidUpdate - useEffect 无依赖 ，或者 依赖 [a,b,c]

  • 模拟componentWillUnMount - useEffect 中返回一个函数

react在16.8之后有了新特性 react hooks

之前的主要的生命周期为：

初始化

在组件初始化阶段会执行

  • constructor

  • componentWillMount() 

  • render()

  • componentDidMount()

更新阶段

props或state的改变可能会引起组件的更新，组件重新渲染的过程中会调用以下方法：

  • componentWillReceiveProps()

  • shouldComponentUpdate()

  • componentWillUpdate() 

  • render()

  • componentDidUpdate()

卸载阶段

  • componentWillUnmount()

useEffect实现componentWillUnmount生命周期函数

阐述

在写React应用的时候，在组件中经常用到 componentWillUnmount 生命周期函数（组件将要被卸载时执行）。比如我们的定时器要清空，避免发生内存泄漏;比如登录状态要取消掉，避免下次进入信息出错。

所以这个生命周期函数也是必不可少的，本文就用 useEffect 来实现这个生命周期函数，并讲解一下 useEffect 容易踩的坑。

useEffect 解绑副作用

学习React Hooks 时，我们要改掉生命周期函数的概念，因为Hooks叫它副作用，所以componentWillUnmount也可以理解成解绑副作用。

这里为了演示用useEffect来实现类似componentWillUnmount效果，先安装React-Router路由,进入项目根本录，使用npm进行安装。

npm install --save react-router-dom@5.2.0

然后打开 Example.js 文件，进行改写代码，先引入对应的React-Router组件。

import { BrowserRouter as Router, Route, Link } from "react-router-dom"
怎么使用useEffect模拟组件生命周期