React生命周期
在react生命周期中,分2段执行,一个挂载的生命周期,一个是组件发生了数据变动,或者事件触发而引发的更新生命周期。
注:react生命周期很重要,对于很多组件场景的应用发挥重要作用,而且不熟悉生命周期之间的调用,mixins混合则玩不来
先从初始化执行开始:
挂载生命周期:
官方提供了componentWillMount,和componentDidMount
componentWillMount:
使用于render渲染组件之前调用,比如当前组件内部值需要发生逻辑上的变化,就可以在此做操作,这样的好处是不用再次render渲染组件。
componentDidMount:
使用于render渲染组件之后调用,比如ajax
var ReactWeek = React.createClass({
getInitialState:function(){
return console.log("getInitialState");
},
getDefaultProps:function(){
return console.log("getDefaultProps");
},
componentWillMount:function(){
console.log("componentWillMount");
},
componentDidMount:function(){
console.log("componentDidMount");
},
render:function(){
return(
<i></i>
)
}
}); React.render(<ReactWeek />,document.body);
这里添加了设置默认值getDefaultProps和初始化设置的getInitialState,运行一下看看它们之间的运行顺序。结果如下
React生命周期的更多相关文章
- React 生命周期
前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...
- React生命周期详解
React生命周期图解: 一.旧版图解: 二.新版图解: 从图中,我们可以清楚知道React的生命周期分为三个部分: 实例化.存在期和销毁时. 旧版生命周期如果要开启async rendering, ...
- React生命周期简单详细理解
前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...
- 22.1 、react生命周期(一)
在每个react组件中都有以下几个生命周期方法~我们需要在不同阶段进行讨论 组件生命周期概述 1.初始化 在组件初始化阶段会执行 constructor static getDerivedStateF ...
- react 生命周期钩子里不要写逻辑,否则不生效
react 生命周期钩子里不要写逻辑,否则不生效,要把逻辑写在函数里,然后在钩子里调用函数,否则会出现问题.
- react复习总结(2)--react生命周期和组件通信
这是react项目复习总结第二讲, 第一讲:https://www.cnblogs.com/wuhairui/p/10367620.html 首先我们来学习下react的生命周期(钩子)函数. 什么是 ...
- React生命周期执行顺序详解
文章内容转载于https://www.cnblogs.com/faith3/p/9216165.html 一.组件生命周期的执行次数是什么样子的??? 只执行一次: constructor.compo ...
- vue生命周期和react生命周期对比
一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE ht ...
- react生命周期知识点
react生命周期知识点 一个React组件的生命周期分为三个部分:实例化.存在期和销毁时. 实例化 组件在客户端被实例化,第一次被创建时,以下方法依次被调用: 1.getDefaultProps2. ...
随机推荐
- 使用ICSharpCode.SharpZipLib.Zip类库解压zip文件的方法
public static bool ZipExtractFile(string zipFilePath,string targetPath) { FastZip fastZip = new Fast ...
- javascript语言理解
1.使用jquery remove,无法remove自身标签; 使用标签
- SQL Server 积累
2016-11-24 sql语句修改某表某字段的数据类型和字段长度: 问题是在修改老功能中暴露出来的,我修改了图片上传功能,结果报图片路径超出数据库字段规定长度,我检查数据库后发现之前设计数据库的人将 ...
- 求两圆相交部分面积(C++)
已知两圆圆心坐标和半径,求相交部分面积: #include <iostream> using namespace std; #include<cmath> #include&l ...
- 搭建consul 集群
1. 准备工作 a) 启动三台虚拟机 s1:10.1.7.141 s2:10.1.7.139 s3:10.1.7.138 b) 每台机器上在 /home新建文件夹 mkdir ...
- javascript 心得
1.&&和||等逻辑判断运算标记可以当成条件运算来使用例如: var a = b = c = "12"; (a=="13"&& ...
- Qt - 错误总结 - QObject::connect: Cannot queue arguments of type 'PVCI_CAN_OBJ' (Make sure 'PVCI_CAN_OBJ' is registered using qRegisterMetaType().)
背景:一个线程通过signal-slot发送PVCI_CAN_OBJ类型的值到主线程中, 错误提示: QObject::connect: Cannot queue arguments of type ...
- [iOS] 为文本加上横线方法
_oldPriceLabel.text = "; _oldPriceLabel.textColor = [UIColor lightGrayColor]; NSMutableAttribut ...
- 第三天--html区块
<!Doctype html><html> <head> <meta charset="utf-8"> ...
- C# 操作excel单元格居中
C# 操作excel //导出Excel private void ExportExcel(string fileName, System.Data.DataTable myDGV, s ...