React生命周期总结
React的生命周期总共8个钩子,三个will,两个Did,一个RecciveProps,一个ShouldUpdate,一个render。
分为三个阶段,分别是
装载 Mounting
更新 Updating
卸载 Unmounting

1. 钩子说明
1.componentWillReceiveProps
mounted的组件接收新的props的时候,被调用,参数是新的props。可以在其中比较新的props和this.props,从而执行修改state等操作
2.shouldComponentUpdate
mounted的组件接收到新的state和props后,判断是否有必要更新组件。可以通过新的props和新state对象和
this.props和this.state比较,来决定是否更新DOM结构。返回true更新,false不更新。
3.componentWillUpdate
组件更新前调用
4.componentDidUpdate
组件更新后调用
5.componentWillUnmount
组件销毁前执行一项操作,例如清除定时器,解绑事件等
6.getDefaultProps
并不是获取props的默认值,而是设置默认的props,此方法返回一个对象,设置props的默认值,如果父组件没有给某个prop那就用默认的
7.getInitialState
并不是获取组件的初始状态,而是设置初始的state,此方法返回一个对象,设置组件mount以后的初始state
参考:http://www.cnblogs.com/liulixiang/p/5002469.html
React生命周期总结的更多相关文章
- React生命周期
在react生命周期中,分2段执行,一个挂载的生命周期,一个是组件发生了数据变动,或者事件触发而引发的更新生命周期. 注: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. ...
随机推荐
- Linux 系统无法登录?你的程序有问题吧!
今天遇到一个问题,有个用户连接不上服务器(无法ssh远程连接) su: failed to execute /bin/bash: Resource temporarily unavailable 谷歌 ...
- 简单整理React的Context API
之前做项目时经常会遇到某个组件需要传递方法或者数据到其内部的某个子组件,中间跨越了甚至三四层组件,必须层层传递,一不小心哪层组件忘记传递下去了就不行.然而我们的项目其实并没有那么复杂,所以也没有使用r ...
- ES6--Set之再理解
Set 其实2016年就看过阮大神的ECMAScript 6 入门,当时看了Set之后,大致看懂了,但事实上根本没有理解Set到底是什么,所以更记不住,平时做项目大多用到的还是ES5的传统写法,以至于 ...
- HBase 伪分布式环境搭建及基础命令使用
一.前提条件: (1)文件存储在HDFS文件系统之上.因此必须启动hadoop服务.(namenode,datanode,resourcemanager,nodemanager,historyserv ...
- MAVEN的项目升级
今天我们来介绍一下版本依赖的问题 1.如果是admin的话,他要依赖于service的版本,则service的版本依赖于core的版本, 如果是本地编译,这我直接更新admin的就可以了,然后直接跑就 ...
- JVM运行内存分配和回收
本文来自网易云社区 作者:吕宗胜 Java语言与C语言相比,最大的特点是编程人员无需过多的关心Java的内存分配和回收,因为所有这一切,Java的虚拟机都帮我们实现了.JVM的内存管理,大大降低了开发 ...
- 【Luogu P1935】[国家集训队]圈地计划
题目 最近房地产商 GDOI (Group of Dumbbells Or Idiots) 从 NOI (Nuts Old Idiots) 手中得到了一块开发土地. 据了解,这块土地是一块矩形的区域, ...
- Qt Qwdget 汽车仪表知识点拆解7 图像绘制,旋转
先贴上效果图,注意,没有写逻辑,都是乱动的 看下最中心的指针旋转,这里使用的QPainter的绘制函数 要显示复杂的效果,需要分层 void Widget::draw_number_pointer() ...
- 02-Mysql数据库----初识
什么是数据(Data) 描述事物的符号记录称为数据,描述事物的符号既可以是数字,也可以是文字.图片,图像.声音.语言等,数据由多种表现形式,它们都可以经过数字化后存入计算机 在计算机中描述一个事物,就 ...
- 1072 Gas Station (30 分)(最短路径)
#include<bits/stdc++.h> using namespace std; ; int n,m,k,Ds; int mp[N][N]; int dis[N]; int vis ...