扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >使用useEffect模拟组件生命周期
  • 121

0
分享到

使用useEffect模拟组件生命周期

2024-04-02 19:04:59 121人浏览 独家记忆
摘要

目录useEffect模拟组件生命周期让函数组件模拟生命周期初始化更新阶段卸载阶段useEffect实现componentWillUnmount生命周期函数阐述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"

在文件中编写两个新组件，因为这两个组件都非常的简单，所以就不单独建立一个新的文件来写了。

function Index() {
    return <h2>willem</h2>;
}
function List() {
    return <h2>List-Page</h2>;
}

有了这两个组件后，接下来可以编写路由配置，在以前的计数器代码中直接增加就可以了。

function Example(){
    const [count, setCount] = useState(0);
    return ( 
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count + 1)}}>Chlick me</button>
            <Router>
                <ul>
                    <li><Link to="/">首页</Link> </li>
                    <li><Link to="/list/">列表</Link> </li>
                </ul>
                <Route path="/" exact component={Index} />
                <Route path="/list/" component={List} />
            </Router>
        </div>
    );
}

然后到浏览器中查看一下，看看组件和路由是否可用。

如果可用，我们现在可以调整useEffect了。

在这里插入图片描述

在两个新组件中分别加入useEffect()函数:

function Index() {
    useEffect(()=>{
        console.log('useEffect=>我是 Index页面')
    })
    return <h2>willem</h2>;
}
function List() {
    useEffect(()=>{
        console.log('useEffect=>我是 List页面')
    })
    return <h2>List-Page</h2>;
}

这时候我们点击Link进入任何一个组件，在浏览器中都会打印出对应的一段话。这时候可以用返回一个函数的形式进行解绑，代码如下：

function Index() {
    useEffect(()=>{
        console.log('useEffect=>我是Index页面')
        return ()=>{
            console.log('你走了 Index页面')
        }
    })
    return <h2>willem</h2>;
}

这时候你在浏览器中预览，我们仿佛实现了 componentWillUnmount方法。

但这只是好像实现了，当点击计数器按钮时，你会发现你走了Index页面，也出现了。

这到底是怎么回事那？

其实每次状态发生变化，useEffect都进行了解绑。

在这里插入图片描述

ReactHooksDemo\demo01\src\Example.js

import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom"
function Index() {
    useEffect(()=>{
        console.log('useEffect=>我是Index页面')
        return ()=>{
            console.log('你走了 Index页面')
        }
    },[])
    return <h2>willem</h2>;
}
function List() {
    useEffect(()=>{
        console.log('useEffect=>我是 List页面')
    })
    return <h2>List-Page</h2>;
}
function Example(){
    const [count, setCount] = useState(0);
    return ( 
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count + 1)}}>Chlick me</button>
            <Router>
                <ul>
                    <li><Link to="/">首页</Link> </li>
                    <li><Link to="/list/">列表</Link> </li>
                </ul>
                <Route path="/" exact component={Index} />
                <Route path="/list/" component={List} />
            </Router>
        </div>
    );
}
export default Example;

useEffect的第二个参数

那到底要如何实现类似 componentWillUnmount的效果那?

这就需要请出useEffect的第二个参数，它是一个数组，数组中可以写入很多状态对应的变量，意思是当状态值发生变化时，我们才进行解绑。

但是当传空数组 [] 时，就是当组件将被销毁时才进行解绑，这也就实现了componentWillUnmount的生命周期函数。

function Index() {
    useEffect(()=>{
        console.log('useEffect=>我是Index页面')
        return ()=>{
            console.log('你走了 Index页面')
        }
    },[])
    return <h2>willem</h2>;
}

为了更加深入了解第二个参数的作用，把计数器的代码也加上 useEffect 和解绑方法，并加入第二个参数为空数组。

代码如下：

ReactHooksDemo\demo01\src\Example.js

function Example(){
    const [count, setCount] = useState(0);
    useEffect(()=>{
        console.log(`useEffect=>You clicked ${count} times`)
        return ()=>{
            console.log('====================')
        }
    },[])
    return ( 
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count + 1)}}>Chlick me</button>
            <Router>
                <ul>
                    <li><Link to="/">首页</Link> </li>
                    <li><Link to="/list/">列表</Link> </li>
                </ul>
                <Route path="/" exact component={Index} />
                <Route path="/list/" component={List} />
            </Router>
        </div>
    );
}

这时候的代码是不能执行解绑副作用函数的。

但是如果我们想每次count发生变化，我们都进行解绑，只需要在第二个参数的数组里加入count变量就可以了。

代码如下：

function Example(){
    const [count, setCount] = useState(0);
    useEffect(()=>{
        console.log(`useEffect=>You clicked ${count} times`)
        return ()=>{
            console.log('====================')
        }
    },[count])
    return ( 
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count + 1)}}>Chlick me</button>
            <Router>
                <ul>
                    <li><Link to="/">首页</Link> </li>
                    <li><Link to="/list/">列表</Link> </li>
                </ul>
                <Route path="/" exact component={Index} />
                <Route path="/list/" component={List} />
            </Router>
        </div>
    );
}

这时候只要count状态发生变化，都会执行解绑副作用函数，浏览器的控制台也就打印出了一串=================。

在这里插入图片描述

总结

通过对本文的学习，让我们对useEffect函数有了一个比较深入的了解，并且可以通过useEffect实现生命周期函数了，现在用React Hooks这种函数的方法编写组件，对比以前用Class编写组件几乎一样了。

ReactHooksDemo\demo01\src\index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Example from './Example';
ReactDOM.render(<Example />, document.getElementById('root'));

ReactHooksDemo\demo01\src\Example.js

import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom"
function Index() {
    useEffect(()=>{
        console.log('useEffect=>我是Index页面')
        return ()=>{
            console.log('你走了 Index页面')
        }
    },[])
    return <h2>willem</h2>;
}
function List() {
    useEffect(()=>{
        console.log('useEffect=>我是 List页面')
    })
    return <h2>List-Page</h2>;
}
function Example(){
    const [count, setCount] = useState(0);
    useEffect(()=>{
        console.log(`useEffect=>You clicked ${count} times`)
        return ()=>{
            console.log('====================')
        }
    },[count])
    return ( 
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count + 1)}}>Chlick me</button>
            <Router>
                <ul>
                    <li><Link to="/">首页</Link> </li>
                    <li><Link to="/list/">列表</Link> </li>
                </ul>
                <Route path="/" exact component={Index} />
                <Route path="/list/" component={List} />
            </Router>
        </div>
    );
}
export default Example;

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。 

--结束END--

本文标题: 使用useEffect模拟组件生命周期

本文链接: https://lsjlt.com/news/167556.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 使用useEffect模拟组件生命周期
    目录useEffect模拟组件生命周期让函数组件模拟生命周期初始化更新阶段卸载阶段useEffect实现componentWillUnmount生命周期函数阐述useEffect 解...
    99+
    2024-04-02
  • Flutter组件生命周期和App生命周期示例解析
    目录引言无状态组件（StatelessWidget）有状态组件（StatefulWidget）StatefulWidget生命周期详细分析1. createState2. initS...
    99+
    2022-12-08
    Flutter 组件APP生命周期 Flutter 生命周期
  • vue组件有生命周期吗
    vue组件的生命周期有：1.beforeCreate，创建前；2.created，创建后；3.beforemount，载入前；4.mounted，载入后；5.beforeUpdate，更新前；6.updated，更新后；7.beforeDe...
    99+
    2024-04-02
  • 使用React Hooks模拟生命周期的实现方法
    目录前言constructorcomponentDidMount使用 hooks 模拟 componentDidMountshouldComponentUpdatecomponent...
    99+
    2023-02-08
    React Hooks模拟生命周期 React Hooks生命周期
  • React Hooks--useEffect代替常用生命周期函数方式
    目录useEffect代替常用生命周期函数原始生命周期函数对React Hooks（useState和useEffect) 的总结思考一、为什么用React Hooks(面向生命周期...
    99+
    2024-04-02
  • vue组件生有哪些命周期
    本篇文章给大家分享的是有关vue组件生有哪些命周期，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。具体内容如下分为4个阶段：create/mou...
    99+
    2024-04-02
  • 详解Angular组件生命周期(一)
    目录概述一、钩子的调用顺序二、onChanges钩子三、变更检测机制和DoCheck()钩子概述 组件声明周期以及angular的变化发现机制 红色方法只执行一次。 变更检测执行的...
    99+
    2024-04-02
  • Blazor组件的生命周期解析
    执行周期 1. SetParametersAsync2. OnInitializedAsync（调用两次） 和 OnInitialized；3. OnParametersSetAsy...
    99+
    2024-04-02
  • React组件的生命周期详解
    目录React生命周期1、初始化阶段2、旧生命周期3、新生命周期4、react中性能优化的方案React生命周期 1、初始化阶段 componentDidMount:render之前...
    99+
    2023-03-19
    React 组件 生命周期 React 生命周期
  • vue的生命周期钩子与父子组件的生命周期详解
    目录vue的生命周期钩子的介绍父子组件的生命周期加载渲染过程父组件更新过程子组件更新过程父子组件更新过程销毁过程代码示例created和mounted的区别vue的生命周期钩子的介绍...
    99+
    2022-11-13
    vue 生命周期 vue 父子组件生命周期
  • vue组件生命周期钩子使用示例详解
    目录组件生命周期图组件生命周期钩子1、beforeCreate2、created3、beforeMount4、mounted5、beforeUpdate6、updated7...
    99+
    2024-04-02
  • 详解Angular组件之生命周期(二)
    目录一、view钩子1、实现ngAfterViewInit和ngAfterViewChecked钩子时注意事项2、在一个变更检测周期中禁止一个视图被组装好之后再去更新视图二、cont...
    99+
    2024-04-02
  • 分析React中组件的生命周期
    这篇文章主要讲解了“分析React中组件的生命周期”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“分析React中组件的生命周期”吧！初始化在组件初始化阶段会...
    99+
    2024-04-02
  • Angular组件的生命周期有哪些
    这期内容当中小编将会给大家带来有关Angular组件的生命周期有哪些，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。概述组件声明周期以及angular的变化发现机制红色方法只执行一次。变更检测执行的绿色方法...
    99+
    2023-06-15
  • ASP.NET组件的生命周期有哪些
    本篇文章给大家分享的是有关ASP.NET组件的生命周期有哪些，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。 Instance 实例化通过控件的构造器所实例化。还可以通过被父控件...
    99+
    2023-06-18
  • Blazor组件的生命周期是什么
    今天小编给大家分享一下Blazor组件的生命周期是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。执行周期 SetPara...
    99+
    2023-06-29
  • Vue组件生命周期实例分析
    本文小编为大家详细介绍“Vue组件生命周期实例分析”，内容详细，步骤清晰，细节处理妥当，希望这篇“Vue组件生命周期实例分析”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。1. 组件的生命周期的四个阶段组件的生命周...
    99+
    2023-06-27
  • React中的生命周期和子组件
    目录组件生命周期创建创建期获取虚拟DOM子组件组件生命周期 为了说明组件的创建，存在，销毁的过程，react提供了组件的生命周期，共分三大周期： 创建期：说明组件的创建的过程，相当于...
    99+
    2024-04-02
  • React组件的生命周期是什么
    这篇文章主要讲解了“React组件的生命周期是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“React组件的生命周期是什么”吧！React生命周期1、初始化阶段componentDidM...
    99+
    2023-07-05
  • angular组件通讯和组件生命周期是什么
    本文小编为大家详细介绍“angular组件通讯和组件生命周期是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“angular组件通讯和组件生命周期是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作