挂载中(只执行一次)

以下方法在组件实例正被创建和插入到DOM中时调用

constructor()一般用于初始化state和方法的this绑定

componentWillMount()

render()

componentDidMount()  一般用于建立订阅,副作用和ajax获取数据

更新中

属性或者状态的改变会触发更新,以下方法将在组件重绘中被调用

componentWillReceiveProps()  用于处理挂载的组件属性变化引起的状态改变,通过比较来判定是否使用setstate方法。

shouldComponentUpdate()   若返回false则不处罚以下方法,默认返回true

componentWillUpdate()  该方法内部不能调用setstate方法

render()

componentDidUpdate()

移除中

该方法在组件正被移除中被调用

componentWillUnmount()

事实胜于雄辩,下面来一段代码,让你了解所有方法的执行顺序,同时里面也包含了不可控组件ref中方法的执行时机

class App extends React.Component{
constructor(props){
super(props);
this.state={
num:0
}
this.changeName = this.changeName.bind(this)
}
componentWillMount(){
console.log('willmount')
}
componentDidMount(){
console.log('didMount')
}
componentWillReceiveProps(nextprops){
console.log('willrecieve')
}
shouldComponentUpdate(){
console.log('shouldupdate')
return true
}
componentWillUpdate(){
console.log('willupdate')
}
componentDidUpdate(){
console.log('didiupdate')
}
componentWillUnmount(){
console.log('unmount')
}
changeName(){
let num = this.state.num+1
this.setState({
num
})
}
render(){
console.log('render')
return(
<div onClick={this.changeName} ref={div=>{console.log(div)}}>
{this.state.num}
</div>
)
}
}

文中没有提到使用场景的方法不推荐使用,因为基本所有的操作都可以被说明用途的替代掉,当然抛出一定状态下,eg:更新完成之后我要alert一下,如果存在什么问题可以留言,我会及时回复

参考:https://reactjs.org/docs/react-component.html#constructor

学习React系列(一)——React.Component 生命周期的更多相关文章

  1. React Native 中 component 生命周期

    React Native 中 component 生命周期 转自 csdn 子墨博客  http://blog.csdn.net/ElinaVampire/article/details/518136 ...

  2. 【微信小程序开发•系列文章六】生命周期和路由

    这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...

  3. React 入门学习笔记整理(七)—— 生命周期

    (1)react 生命周期 只有类组件有生命周期,函数组件没有生命周期 1.挂载阶段:这些方法会在组件实例被创建和插入DOM中时被调用: 1)constructor(props) 初始化组件的状态.绑 ...

  4. React Component 生命周期

    一般而言 Component 有以下三种生命周期的状态: Mounting:已插入真实的 DOM Updating:正在被重新渲染 Unmounting:已移出真实的 DOM 针对 Component ...

  5. react学习(6)——关于组件生命周期的问题

    在项目开发的过程中,遇到了一个问题: 父组件请求后台数据,收到后将数据以props传给子组件,子组件根据收到数据的不同,显示不同的内容,同时,子组件自身可以根据click操作改变根据父组件的数据显示的 ...

  6. 浅聊本人学习React的历程——第一篇生命周期篇

    作为一个前端小白,在踏入前端程序猿行业的第三年接触了React,一直对于框架有种恐惧感,可能是对陌生事物的恐惧心里吧,导致自己一直在使用原生JS和JQ作为开发首选,但是在接触了React之后,发现了其 ...

  7. 【react】---17新增的生命周期

    一.废除的生命周期 官网文档指出使用这些生命周期的代码会在未来版本的react中更容易产生bug,尤其是对于异步渲染的版本 由于未来采用异步渲染机制,所以即将在17版本中去掉的生命周期钩子函数 com ...

  8. 【React 资料备份】React v16.3之后的生命周期

    React v16.4 的生命周期图 React v16.4 的生命周期 变更缘由 原来(React v16.0前)的生命周期在React v16推出的Fiber之后就不合适了,因为如果要开启asyn ...

  9. React Native 中组件的生命周期

    概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命 ...

  10. 初识React,Virutal DOM, State以及生命周期

    这是React分类下的第一篇文章,是在了解了一些基本面后,看Tyler文章,边看边理解边写的. React可以看做是MVC中的V,关注的是视图层.React的组件就像Angular的Directive ...

随机推荐

  1. 源码实现 --> itoa函数实现

    itoa函数实现 itoa()函数的功能是将一个整数转换为一个字符串 例如12345,转换之后的字符串为"12345",-123转换之后为"-123",欢迎大家 ...

  2. C语言中数据类型的取值范围

    C语言中数据类型的取值范围如下:char -128 ~ +127 (1 Byte)short -32767 ~ + 32768 (2 Bytes)unsigned short 0 ~ 65536 (2 ...

  3. 【Android】带进度条的WebView

    http://www.cnblogs.com/over140/archive/2013/03/07/2947721.html

  4. Java虚拟机之GC

    ⑴背景 Java堆和方法区实现类所需内存是不一样的,每个方法的多分支需要的内存也可能不一样,我们只有在运行期间才能制动创建哪些对象.这部分内存分配与回收都是动态的,而垃圾回收器所关注的就是这些这部分内 ...

  5. C语言最后一次作业——总结报告

    1.当初你是如何做出选择计算机专业的决定的?经过一个学期,你的看法改变了么,为什么? 你觉得计算机是你喜欢的领域吗,它是你擅长的领域吗? 为什么? 首先是因为自己想学跟做动画沾边的专业(动画专业因为某 ...

  6. 软件工程第三次作业-结对作业NO.1

    第一次结对作业 结对人员: 潘伟靖 170320077 张 松 170320079 方案分析 我们对所供的资料进行分析,如下: 从提供的资料可以看出,需要解决的问题以及满足的需求主要有两类目标用户,各 ...

  7. Python 单向循环链表

    操作 is_empty() 判断链表是否为空 length() 返回链表的长度 travel() 遍历 add(item) 在头部添加一个节点 append(item) 在尾部添加一个节点 inser ...

  8. JAVA序列化基础知识

    1.序列化是干什么的? 简单说就是为了保存在内存中的各种对象的状态(也就是实例变量,不是方法),并且可以把保存的对象状态再读出来.虽然你可以用你自己的各种各样的方法来保 存object states, ...

  9. 技术文档分享_linux中生成考核用的GPT分区表结构修复

    注:历史版本,后期改用python实现了 实验一: 目的:用于生成大量模拟破坏GPT分区结构案例,并生成唯一方式修复后的评判方法.故障:在一个完整的GPT分区磁盘上,丢失了GPT主分区表,或备份分区表 ...

  10. Python习题(第一课)

    想了想其他的太简单了,还是不放了,剩三题吧. 一.完美立方 编写一个程序,对任给的正整数N (N≤100),寻找所有的四元组(a, b, c, d),使得a^3= b^3 + c^3 + d^3,其中 ...