react 生命周期函数
定义:指在某个时刻组件会自动调用的函数
阶段:
1 Initialization : 初始化阶段
2 Mounting : 真实Dom已插入
3 Updation : 重新渲染
4 Unmounting : 已移除真实Dom
这里主要讲解后三个阶段
图解如下
一:Mountiong
1、componentWillMount () {};
组件即将被挂载到页面时自动执行,在render之前执行。只会执行一次
2、render(){}
render 函数执行
3、组件被挂载到页面之后自动执行,在render之后执行。数据在第一次查询将在这里执行(网页初始化数据),只会执行一次
componentDidMount(){}
二 : updation
1、组件被跟新之前自动执行,在render跟新之前。可以理解为需要跟新render吗。如果需要返回 true,不需要就返回 false
shouldComponentUpdate () { return true/false };
2、组件跟新之前自动执行,在shouldComponentUpdate函数之后。如果 shouldComponentUpdate 返回 true 才会执行该函数。
componentWillUpdate () {}
3、render(){} 组件跟新
4、组件重新被挂载到页面之后自动执行。上面四个在props和state跟新后都会执行。
componentDidUpdate ( ) {}
5、当一个组件从父组件接受参数(props更改),一般出现在子组件
componentWillReceiveProps ( ) {}
注:
只要父组件的render函数被跟新时,子组件这个生命周期函数会被执行。
如果这个组件第一次存在父组件中,不会执行。
如何这个组件之前已经存在于父组件中,才会执行。
三 : Unmounting
当这个组件即将被删除的时候自动执行
componentWillUnmount () {}
转载于:https://www.cnblogs.com/xiaoxinzi/p/9542436.html
react 生命周期函数相关推荐
- vue生命周期函数、react生命周期函数、微信小程序生命周期函数、uni-app生命周期函数,简介及图示
vue生命周期函数 beforeCreate (创建前) created (创建后) beforeMount (挂载前) mounted (挂载后) beforeUpdate (数据更新前) upda ...
- 再次理解react生命周期函数
在学习react的过程中,生命周期函数是一个非常核心的概念,对react生命周期函数的了解就是对react工作机制的了解.而生命周期函数对于初学者而言不好记忆,故有此文作为理解和梳理生命周期函数这个知 ...
- react生命周期函数
在react中,生命周期函数指的是组件在加载前,加载后,以及组件更新数据和组件销毁时触发的一系列方法.通常分为以下几类: 组件加载的时候触发的函数:constructor .componentWill ...
- react生命周期函数_如何优雅的消灭掉react生命周期函数
开源不易,感谢你的支持,❤ star concent^_^ 序言 在react应用里,存在一个顶层组件,该组件的生命周期很长,除了人为的调用unmountComponentAtNode接口来卸载掉它和 ...
- React 生命周期函数使用场景 及ajax请求 前端模拟数据
React 中的生命周期函数是很重要的. 我们在写组件的时候,组件都是继承自React.Component 的,Component内置了其他所有生命周期函数,唯独没有render 函数.因此我们在写组 ...
- React生命周期函数-生命周期回调函数
面试的时候问到了如何运用,这里再回顾一下. 也叫生命周期钩子函数(生命周期钩子) 生命周期大概分成三个阶段:初始化阶段,更新阶段,卸载 将组件放入页面的过程中,React会在合适的时间进行函数的调用. ...
- 七十七、React中的propTypes,defaultProps和生命周期函数
2020/11/19. 周四.今天又是奋斗的一天. @Author:Runsen React,相比于Vue,React更加灵活,但是对JavaScript基础的要求也更高一些.我继续学习React 文 ...
- React组件的生命周期函数
文章目录 React组件生命周期 认识生命周期 生命周期函数 不常用生命周期函数 React组件生命周期 认识生命周期 很多的事物都有从创建到销毁的整个过程,这个过程称之为是生命周期: React组件 ...
- React教程(五)——生命周期函数
生命周期函数,是react框架的难点内容,你要知道,每一个生命周期函数是干什么的?它们的使用场景是什么?当某一种条件下,它们有着怎样的执行顺序?每一个生命周期函数,应该注意的点是什么? react中, ...
最新文章
- XShell与虚拟机连接的IP问题
- 在线教学生计算机,计算机系统基础—廖浩德老师—在线教学的先行者
- WPF——微软的UI革命
- 【opencv】图像细化
- C++ 有参构造 无参构造 拷贝构造 以及参数化列表 成员对象之间的执行关系
- 多线程讲座【by lilei005】
- 计算机语言史话论文,【论文节选】自然语言处理发展历史。
- vue项目:this.function()中关于:this指针失效的问题
- 漫步微积分三十一——定积分的直观含义
- Struts2之文件上传(单文件/多文件)
- java代理机制简单实现
- 纸牌游戏程序设计要点(C语言)
- C#使用libVLC制作视频播放器时自定义鼠标事件的捕获或者忽略
- JAVA抛出异常的三种形式
- 重新起航,研究生生涯开始了。
- R语言表示文件路径应该如何使用斜杠符号?
- windows2012取消自动ipv4_Win10删除自动配置ipv4|Win10自动配置ip地址怎么关闭
- I.Gree的心房(思维题)
- 【实用】中国地址英文翻译,英文网站注册
- 数据分析(Numpy,Pandas,Matplotlib)常用API
热门文章
- java.sql找不到_java.sql.SQLException:找不到适用于jdbc:microsoft:
- cpan安装_生信平台搭建(五):安装perl模块
- 对象refresh的方法iadodc失败_3个必备cookie实用方法
- uuid会重复吗_UUID的版本你知道吗
- python 自动填excel_使用python自动填充文字.docx从excel fi
- 黑白块游戏java代码_用java做的一个小游戏—黑白反斗棋(适合菜鸟)
- matlab现值与终值函数_个人家庭投资理财基础(二 单利、复利、终值、现值、内部收益率)...
- jsp隐式对象_JSP隐式对象
- df 命令查看磁盘空间_Linux df命令检查磁盘空间
- Android ListView示例教程