React-组件的生命周期详解(含React16版本)
在一个组件的整个生命周期中,通过用户的交互来更新state或者props,重新渲染组件,更新页面的ui。组成一个简单的“状态机”。
react的生命周期三个阶段:
Mounting 挂载
1、 constructor()构造方法
constructor是ES6对类的默认方法,通过 new命令生成对象实例时自动调用该方法。初始化执行一次。使用constructor必须手动调用super方法。需要调用this.props必须传入props。
在 super() 被调用之前,子类是不能使用 this 的,在 ES2015 中,子类必须在 constructor 中调用 super()。传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。
class ClassName extends React.Component {
constructor(props) {
super(props); // 必须调用super方法
console.log(this.props); // 这里可以拿到this.props的值
this.state = {}; // 在constructor中可以初始化state
this.state = { color: props.color }; // !这种操作是错误的,应该避免
this.handleClick = this.handleClick.bind(this); // 将事件处理方法绑定到实例。
}
state = {}; // 也可以直接初始化state
}
通过集成extends React.Component 给组件初始化不会执行getDefaultProps、getInitialState
2、 componentWillMount => UNSAFE_componentWillMount()(即将被废弃)
首次渲染(render)之前调用,只执行一次。调用setState方法,是渲染之前最后更改state的最后机会。
3、static getDerivedStateFromProps(props, state)(新)
该生命周期在组件实例化以及接收新props后调用。它可以返回一个对象来更新state,或者返回null来表示新的props不需要任何state更新。这个新的生命周期可覆盖componentWillReceiveProps的所有用例。
更新后,setState也会调用该方法。
4、render组件渲染
该方法会创建一个虚拟DOM,用来表示组件的输出。对于一个组件来讲,render方法是唯一一个必需的方法。state或者props的更新或者componentShouldUpdate返回true都会引起render的重渲染,会多次执行。
该方法只能返回一个顶级组件,或者返回false/null;在这里也不能修改组件的状态,即不可调用setState方法。
render方法返回的结果并不是真正的DOM元素,而是一个虚拟的表现,类似于一个DOM tree的结构的对象。react之所以效率高,就是这个原因。
5、componentDidMount
组件渲染完成后调用该方法,只执行一次。在这里已经渲染出真实的dom节点了,可以再该方法中通过 this.getDOMNode() (新版本已被弃用,推荐使用ReactDOM.findDOMNode)访问到真实的 DOM。
该方法中也可以调用setState来更新状态重新渲染组件,这里也是设置定时器监听事件的好地方。
上面说过组件并不是真实的dom节点,如果需要从组件获取真实 DOM 的节点,可以通过ref属性。
class ClassName extends React.Component {
constructor(props) {
super(props); // 必须调用super方法
console.log(this.props); // 这里可以拿到this.props的值
this.state = {}; // 在constructor中可以初始化state
}
componentDidMount() {
console.log(ReactDOM.findDOMNode(this.refs.title)) // 返回<div>渲染</div>
}
render() {
console.log(ReactDOM.findDOMNode(this.refs.title)) // 这里首次渲染拿不到值,返回null
return <div ref=“title”>渲染</div>
}
}
Updating 更新
1、componentWillReceiveProps(nextProps) => UNSAFE_componentWillReceiveProps(nextProps)(即将被废弃)
组件props发生改变会调用该方法(或者说只要父组件更新,不管props是否与以前相同,都会调用该方法), 接收一个参数nextProps,所以在这里可以继续拿到this.props的值。在这个方法中更新state是安全的,一般情况下为了避免任何props的改变多次触发state更新,
可以通过nextProps和this.props的比较后再做相关操作。
2、static getDerivedStateFromProps(props, state)(新)
3、 shouldComponentUpdate(nextProps, nextState)
通过返回true或者false来判断是否需要重新渲染组件。如果返回false,后面的ender 以及 componentWillUpdate,componentDidUpdate 方法都将不会执行。组件比较多时,使用该方法能够避免不需要的重渲染,优化性能。
class ClassName extends React.Component {
constructor(props) {
super(props); // 必须调用super方法
console.log(this.props); // 这里可以拿到this.props的值
this.state = {}; // 在constructor中可以初始化state
}
componentDidMount() {
console.log(ReactDOM.findDOMNode(this.refs.title)) // 返回<div>渲染</div>
}
shouldComponentUpdate: function(nextProps, nextState) {
return nextProps.id !== this.props.id; // 只有在id改变时才会重新渲染组件
}
render() {
console.log(ReactDOM.findDOMNode(this.refs.title)) // 这里首次渲染拿不到值,返回null
return <div ref=“title”>渲染</div>
}
}
4、 componentWillUpdate(nextProps, nextState) => UNSAFE_componentWillUpdate(nextProps, nextState)(即将被废弃)
类似于componentWillMount,组件首次渲染后,如果再次收到state/props改变或者shouldComponentUpdate返回true,会调用该方法。在这里不能使用this.setState来修改状态。这个函数调用之后,就会把nextProps和nextState分别设置到this.props和this.state中。
5、render组件渲染
同上
6、getSnapshotBeforeUpdate(nextProps, nextState)(新)
render的输出结果渲染到dom之前调用。它的任何返回值都会作为参数传给componentDidUpdate。这个新的生命周期可覆盖componentWillUpdate的所有用例。
7、 componentDidUpdate(nextProps, nextState, snapshot)
类似于componentDidMount,在组件重新被渲染之后调用。可以在这里访问并修改 DOM。当使用getSnapshotBeforeUpdate返回值时,snapshot参数才会有值。
Unmounting 卸载
componentWillUnmount
该方法将会在 component 从DOM中移除时调用。一些组件相关的清理工作都可以在这里处理。
Error Handling 错误处理
1、static getDerivedStateFromError(error)
子组件抛出错误后调用该组件。他接收抛出的错误信息作为参数。
2、componentDidCatch(error, info)
注:新版本中加入的生命周期不可和即将被废弃的混用。
总结
Mounting
1、constructor
2、componentWillMount() => UNSAFE_componentWillMount()(即将被废弃)
3、static getDerivedStateFromProps(props, state)(新)
4、render
5、componentDidMount
Updating
1、componentWillReceiveProps() => UNSAFE_componentWillReceiveProps(nextProps)(即将被废弃)
2、static getDerivedStateFromProps(props, state)(新)
3、shouldComponentUpdate(nextProps, nextState)
4、componentWillUpdate() => UNSAFE_componentWillUpdate(nextProps, nextState)(即将被废弃)
5、render()
6、getSnapshotBeforeUpdate(nextProps, nextState)(新)
7、componentDidUpdate(nextProps, nextState, snapshot)
Unmounting
componentWillUnmount()
Error Handling
1、static getDerivedStateFromError(error)
2、componentDidCatch(error, info)
React-组件的生命周期详解(含React16版本)的更多相关文章
- 【React自制全家桶】五、React组件的生命周期函数详解
一.总览React组件的生命周期函数 什么是生命周期函数:简单的来说就是 在某个时刻会自动执行的函数 二.React的生命周期函数主要由四块组成 分别是:组件初始化.组件挂载.组件更新.组件卸载 三. ...
- vue组件的生命周期详解
1.生命周期&生命周期函数 生命周期:指一个组件从创建->运行->销毁的整个阶段,强调的是一个时间段. 生命周期函数:由vue框架提供的内置函数,会伴随着组件的生命周期,自动按序执 ...
- React—组件生命周期详解
React—组件生命周期详解 转自 明明的博客 http://blog.csdn.net/slandove/article/details/50748473 (非原创) 版权声明:转载请注明出处,欢 ...
- ASP.NET生命周期详解
最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多处理流程,如管道事件等 ...
- ASP.NET生命周期详解 [转]
最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多处理流程,如管道事件等 ...
- ASP.NET生命周期详解(转)
看到好文章需要分享. 最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多 ...
- ASP.NT运行原理和页面生命周期详解及其应用
ASP.NT运行原理和页面生命周期详解及其应用 1. 下面是我画的一张关于asp.net运行原理和页面生命周期的一张详解图.如果你对具体不太了解,请参照博客园其他帖子.在这里我主要讲解它的实际应用. ...
- 2. React组件的生命周期
2. React组件的生命周期 使用React开发时候用到最多的就是React的组件了,通过继承React.Component,加入constructor构造函数,实现Render方法即可.这当中Re ...
- React 组件的生命周期方法
React 组件的生命周期方法 按渲染顺序: 1: componentWillMount() – 在渲染之前执行,在客户端和服务器端都会执行. 2: componentDidMount() – 仅在第 ...
随机推荐
- 零基础入门学习javase,应该怎么学?这是我给你的一个建议
我们知道Java有三个方向,JavaSE,JavaME,JavaEE(老程序员可能会叫J2EE等,不过SUN已经改名了).JavaME主要是嵌入式与游戏开发.那我们先看JavaSE,因为只有学好了Ja ...
- android双待手机获取每一张SIM卡的imei
/** * create a TelephonyInfo.java class */import java.lang.reflect.Method; import android.content.Co ...
- DDD领域驱动设计理论篇 - 学习笔记
一.Why DDD? 在加入X公司后,开始了ASP.NET Core+Docker+Linux的技术实践,也开始了微服务架构的实践.在微服务的学习中,有一本微软官方出品的<.NET微服务:容器化 ...
- 联发科AIoT平台i500处理器简介
i500是一款强大而高效的AIoT平台,专为便携式.家用或商用物联网应用而设计,这些应用需要大量的边缘处理.先进的多媒体功能.多台高分辨率相机.相连的触屏显示器和多任务操作系统. 该平台集成了Arm ...
- 【转】Python爬取AES加密的m3u8视频流的小电影并转换成mp4
最近发现一个视频网站,准备去爬取得时候,前面很顺利利用fiddler抓包获取网站的post数据loads为python字典数据,分析数据就能发现每个视频的连接地址就在其中, 发现这些都是m3u8文件流 ...
- Linux 桌面玩家指南:12. 优秀的文本化编辑思想大碰撞(Markdown、LaTeX、MathJax)
特别说明:要在我的随笔后写评论的小伙伴们请注意了,我的博客开启了 MathJax 数学公式支持,MathJax 使用$标记数学公式的开始和结束.如果某条评论中出现了两个$,MathJax 会将两个$之 ...
- PHP全栈学习笔记8
面向对象的基本概念,面向对象编程,oop,面向对象,面向对象的分析,面向对象的设计,面向对象的编程,什么是类. 类,属性和方法,类,对象,面向对象编程的三大特点.特点,封装性,继承性,多态性. 封装性 ...
- springcloud之hystrix熔断器-Finchley.SR2版
本篇和大家分享的是springcloud-hystrix熔断器,其主要功能是对某模块调用失败做断路和降级,简单点就当某个模块程序出问题了并达到某阈值就限制后面请求,并降级的方式提供一个默认返回数据.最 ...
- SQLI LABS Advanced Part(23-37) WriteUp
继续继续!这里是高级部分! less-23: 提示输入id参数,尝试: ?id=1' and '1 返回的结果与?id=1相同,所以可以直接利用了. ?id=1' order by 5# 可是页面返回 ...
- Redhat 平台下 LVM 管理说明
Redhat 平台下 LVM 管理说明 LVM 是 Logical Volume Manager(逻辑卷管理器)的简写,它为主机提供了更高层次的磁盘存储管理能力.LVM 可以帮助系统管理员为应用与用 ...