在用Class制作组件时,经常会用生命周期函数,来处理一些额外的事情(副作用:和函数业务主逻辑关联不大,特定时间或事件中执行的动作,比如Ajax请求后端数据,添加登录监听和取消登录,手动修改DOM等等)。在React Hooks中也需要这样类似的生命周期函数,比如在每次状态(State)更新时执行,它为我们准备了useEffect。从这节课开始来认识一下这个useEffect函数。它就像一匹野马,当你没有驯服它时,感觉它很难相处甚至无法掌握;但你驯服它后,你会发现它温顺可爱,让你爱不释手。

Class的方式为计数器增加生命周期函数

为了让你更好的理解useEffect的使用,先用原始的方式把计数器的Demo增加两个生命周期函数componentDidMountcomponentDidUpdate。分别在组件第一次渲染后在浏览器控制台打印出计数器结果和在每次计数器状态发生变化后打印出结果。代码如下:

import React, { Component } from 'react';

class Example3 extends Component {
constructor(props) {
super(props);
this.state = { count:0 }
} componentDidMount(){
console.log(`ComponentDidMount=>You clicked ${this.state.count} times`)
}
componentDidUpdate(){
console.log(`componentDidUpdate=>You clicked ${this.state.count} times`)
} render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={this.addCount.bind(this)}>Chlick me</button>
</div>
);
}
addCount(){
this.setState({count:this.state.count+1})
}
} export default Example3;

这就是在不使用Hooks情况下的写法,那如何用Hooks来代替这段代码,并产生一样的效果那。

useEffect函数来代替生命周期函数

在使用React Hooks的情况下,我们可以使用下面的代码来完成上边代码的生命周期效果,代码如下(修改了以前的diamond): 记得要先引入useEffect后,才可以正常使用。

import React, { useState , useEffect } from 'react';
function Example(){
const [ count , setCount ] = useState(0);
//---关键代码---------start-------
useEffect(()=>{
console.log(`useEffect=>You clicked ${count} times`)
})
//---关键代码---------end------- return (
<div>
<p>You clicked {count} times</p>
<button onClick={()=>{setCount(count+1)}}>click me</button>
</div>
)
}
export default Example;

写完后,可以到浏览器中进行预览一下,可以看出跟class形式的生命周期函数是完全一样的,这代表第一次组件渲染和每次组件更新都会执行这个函数。 那这段代码逻辑是什么?我们梳理一下:首先,我们生命了一个状态变量count,将它的初始值设为0,然后我们告诉react,我们的这个组件有一个副作用。给useEffecthook传了一个匿名函数,这个匿名函数就是我们的副作用。在这里我们打印了一句话,当然你也可以手动的去修改一个DOM元素。当React要渲染组件时,它会记住用到的副作用,然后执行一次。等Reat更新了State状态时,它再一词执行定义的副作用函数。

useEffect两个注意点

  1. React首次渲染和之后的每次渲染都会调用一遍useEffect函数,而之前我们要用两个生命周期函数分别表示首次渲染(componentDidMonut)和更新导致的重新渲染(componentDidUpdate)。

  2. useEffect中定义的函数的执行不会阻碍浏览器更新视图,也就是说这些函数时异步执行的,而componentDidMonutcomponentDidUpdate中的代码都是同步执行的。个人认为这个有好处也有坏处吧,比如我们要根据页面的大小,然后绘制当前弹出窗口的大小,如果时异步的就不好操作了。

转自:https://jspang.com/posts/2019/08/12/react-hooks.html

useEffect代替常用生命周期函数(三)的更多相关文章

  1. Android Activity常用生命周期函数

    在Activity中主要有7个常用的周期函数,他们分别是: (一)onCreate 在Activity对象被第一次创建时调用 注: 从另一个Activity返回到前一个Activity时,不会调用该函 ...

  2. useEffect 实现 componentWillUnmount生命周期函数(四)

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

  3. Vue.js小案例、生命周期函数及axios的使用

    一.调色框小案例: 随着三个滑动框的变化,颜色框的颜色随之改变 1.1.实例代码 <!DOCTYPE html> <html lang="en" xmlns:v- ...

  4. 【Unity基础知识】认识常用的生命周期函数(Awake、Start、Update...)

    一.了解帧的概念 游戏的本质就是一个死循环 每一次循环都会处理游戏逻辑 并 更新一次游戏画面 之所以能看到画面在动 是因为 切换画面速度达到一定速度时 人眼就会认为画面是动态且流畅的 一帧就是执行了一 ...

  5. Unity3D学习笔记(一):Unity简介、游戏物体、组件和生命周期函数

    Project(工程.项目):工程是把游戏开发当前所需要的资源归类管理用的. Console控制台:日志.报错.调试,右上角,消息过滤 Assets:资源,存储游戏中一切用到的资源 Library:临 ...

  6. Activity系列讲解---三大基本状态与七大生命周期函数

    简介:四大组件之一,在应用中一个Activity可以用来表示一个界面,可以理解为用户可视化界面,一个android应用必须通过Activity来运行和启动. 1.三大基本状态与七大生命周期函数 2.代 ...

  7. ionic中的生命周期函数

    //ionic中的生命周期函数 onPageLoaded(){ //page初始化时 console.log("page 1 : page loaded"); } //在这里可以做 ...

  8. React——组件的生命周期函数

    每一个组件都有一些生命周期函数. 当组件实例被创建并且会插入到DOM中,下面这些函数会被调用 constructor componentWillMount render componentDidMou ...

  9. React 学习(四) ---- 生命周期函数

    现在我们能修改状态,页面可以进行交互了,但是还有一种状态改变没有解决,那就是倒计时效果,时间一直在变化,组件状态也一直在改变,但我们什么都没有做,如果要实现这样的效果,需要怎么处理? 我们都知道,改变 ...

随机推荐

  1. 逗号分隔的字符串转成表格参与IN条件查询

    返回值为'1,2,3,4,5,6,7',是一个字符串,如果要用IN 查询的话sql认为这是一个完整的字符串,需要将内容分隔转换变成table 定义函数如下: create Function sysfS ...

  2. IntelliJ Idea 依赖包下载成功,代码里无法import问题解决方法

    今天clone一个github上的基于maven的项目IntelliJ Idea 依赖包下载成功,代码里无法import.解决方法:删掉原来的.iml,刷新. 如果不行,可尝试:File->In ...

  3. Linux主机之间传输文件的几种方法对比

    1.scp传输 scp -r /data/file root@ip:/data/ scp -C /data/sda.img root@ip:/data/img/#-r: 支持目录#-C: 启用压缩传送 ...

  4. Python入门篇-封装与解构和高级数据类型集合(set)和字典(dict)

    Python入门篇-封装与解构和高级数据类型集合(set)和字典(dict) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.封装和结构 #!/usr/bin/env pytho ...

  5. zabbix Server 4.0 报警(Action)篇

    zabbix Server 4.0 报警(Action)篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看zabbix默认的Actions 1>.点击默认的Actio ...

  6. git 如何忽略已经加入到版本控制的文件

    增加 .gitignore 文件,里面添加需要忽略的文件(file_not_wanted): 执行命令 git rm -r --cached .   注意,最后的点.不要省略. 最后重新将所有文件添加 ...

  7. 创建htpasswd文件在nginx (没有 apache)

    Create htpasswd file for nginx (without apache) APACHE NGINX HTACCESS If you're like me, and use Ngi ...

  8. onclick与click的区别

    用法: Obj.click(function(){ }); Obj.onclick=function(){ } 相同:效果一样. 区别: 用户或浏览器执行的某种动作,例如click load,mous ...

  9. 学underscore在数组中查找指定元素

    前言 在开发中,我们经常会遇到在数组中查找指定元素的需求,可能大家觉得这个需求过于简单,然而如何优雅的去实现一个 findIndex 和 findLastIndex.indexOf 和 lastInd ...

  10. 原创!ngxtop-监控nginx的利器!!!

    原创!ngxtop-监控nginx的利器!!! 无论名称还是界面,ngxtop的灵感均源自大名鼎鼎的top命令.ngxtop的功能就是,分析Nginx访问日志文件(以及其他日志文件,比如Apache2 ...