学习React系列(一)——React.Component 生命周期
挂载中(只执行一次)
以下方法在组件实例正被创建和插入到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 生命周期的更多相关文章
- React Native 中 component 生命周期
React Native 中 component 生命周期 转自 csdn 子墨博客 http://blog.csdn.net/ElinaVampire/article/details/518136 ...
- 【微信小程序开发•系列文章六】生命周期和路由
这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...
- React 入门学习笔记整理(七)—— 生命周期
(1)react 生命周期 只有类组件有生命周期,函数组件没有生命周期 1.挂载阶段:这些方法会在组件实例被创建和插入DOM中时被调用: 1)constructor(props) 初始化组件的状态.绑 ...
- React Component 生命周期
一般而言 Component 有以下三种生命周期的状态: Mounting:已插入真实的 DOM Updating:正在被重新渲染 Unmounting:已移出真实的 DOM 针对 Component ...
- react学习(6)——关于组件生命周期的问题
在项目开发的过程中,遇到了一个问题: 父组件请求后台数据,收到后将数据以props传给子组件,子组件根据收到数据的不同,显示不同的内容,同时,子组件自身可以根据click操作改变根据父组件的数据显示的 ...
- 浅聊本人学习React的历程——第一篇生命周期篇
作为一个前端小白,在踏入前端程序猿行业的第三年接触了React,一直对于框架有种恐惧感,可能是对陌生事物的恐惧心里吧,导致自己一直在使用原生JS和JQ作为开发首选,但是在接触了React之后,发现了其 ...
- 【react】---17新增的生命周期
一.废除的生命周期 官网文档指出使用这些生命周期的代码会在未来版本的react中更容易产生bug,尤其是对于异步渲染的版本 由于未来采用异步渲染机制,所以即将在17版本中去掉的生命周期钩子函数 com ...
- 【React 资料备份】React v16.3之后的生命周期
React v16.4 的生命周期图 React v16.4 的生命周期 变更缘由 原来(React v16.0前)的生命周期在React v16推出的Fiber之后就不合适了,因为如果要开启asyn ...
- React Native 中组件的生命周期
概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命 ...
- 初识React,Virutal DOM, State以及生命周期
这是React分类下的第一篇文章,是在了解了一些基本面后,看Tyler文章,边看边理解边写的. React可以看做是MVC中的V,关注的是视图层.React的组件就像Angular的Directive ...
随机推荐
- 源码实现 --> itoa函数实现
itoa函数实现 itoa()函数的功能是将一个整数转换为一个字符串 例如12345,转换之后的字符串为"12345",-123转换之后为"-123",欢迎大家 ...
- C语言中数据类型的取值范围
C语言中数据类型的取值范围如下:char -128 ~ +127 (1 Byte)short -32767 ~ + 32768 (2 Bytes)unsigned short 0 ~ 65536 (2 ...
- 【Android】带进度条的WebView
http://www.cnblogs.com/over140/archive/2013/03/07/2947721.html
- Java虚拟机之GC
⑴背景 Java堆和方法区实现类所需内存是不一样的,每个方法的多分支需要的内存也可能不一样,我们只有在运行期间才能制动创建哪些对象.这部分内存分配与回收都是动态的,而垃圾回收器所关注的就是这些这部分内 ...
- C语言最后一次作业——总结报告
1.当初你是如何做出选择计算机专业的决定的?经过一个学期,你的看法改变了么,为什么? 你觉得计算机是你喜欢的领域吗,它是你擅长的领域吗? 为什么? 首先是因为自己想学跟做动画沾边的专业(动画专业因为某 ...
- 软件工程第三次作业-结对作业NO.1
第一次结对作业 结对人员: 潘伟靖 170320077 张 松 170320079 方案分析 我们对所供的资料进行分析,如下: 从提供的资料可以看出,需要解决的问题以及满足的需求主要有两类目标用户,各 ...
- Python 单向循环链表
操作 is_empty() 判断链表是否为空 length() 返回链表的长度 travel() 遍历 add(item) 在头部添加一个节点 append(item) 在尾部添加一个节点 inser ...
- JAVA序列化基础知识
1.序列化是干什么的? 简单说就是为了保存在内存中的各种对象的状态(也就是实例变量,不是方法),并且可以把保存的对象状态再读出来.虽然你可以用你自己的各种各样的方法来保 存object states, ...
- 技术文档分享_linux中生成考核用的GPT分区表结构修复
注:历史版本,后期改用python实现了 实验一: 目的:用于生成大量模拟破坏GPT分区结构案例,并生成唯一方式修复后的评判方法.故障:在一个完整的GPT分区磁盘上,丢失了GPT主分区表,或备份分区表 ...
- Python习题(第一课)
想了想其他的太简单了,还是不放了,剩三题吧. 一.完美立方 编写一个程序,对任给的正整数N (N≤100),寻找所有的四元组(a, b, c, d),使得a^3= b^3 + c^3 + d^3,其中 ...