理解React组件的生命周期
本文作者写作的时间较早,所以里面会出现很多的旧版ES5的时代的方法。不过,虽然如此并不影响读者理解组件的生命周期。反而是作者分为几种不同的触发机制来解释生命周期的各个方法,让读者更加容易理解涉及到的概念。以下是正文。
简介
React
在创建组件的时候会触发组件生命周期各个方法的调用。这篇文章就分别介绍其中的各种不同的绘制触发之后调用的各个生命周期的方法。
理解组件的生命周期,你才可以在组件创建、销毁的时候执行特定的方法。甚至于,你可以决定是否更新组件,正确的处理state
、props
的改变。
生命周期
要弄清楚生命周期,首先就要区分开初次创建和state
、props
更改触发的组件更新,以及组件的卸载。
初始化
初始化 | |
---|---|
√ | initial props |
√ | initial state |
√ | componentWillMount |
√ | render |
√ | componentDidMount |
在ES6里,initial props在类的constructor
方法里作为参数传入了。initial state则在constructor
方法里有开发者自行设置。如:
class DemoComponent extends React.Component {
constructor(props) {
super(props)
this.state = {
initialState: 'value',
}
this._innerMethod = this._innerMethod.bind(this)
}
}
componentWillMount
方法在render
方法执行之前被调用。有一点需要注意,在这里设置state不会触发重绘。
render
方法返回组件需要的标记(markup),并最终转化为正确的输出。props
和state
都不应该在这个方法里修改。一定要记住render
方法必须是一个纯函数。也就是每次调用,这个方法都要返回同样的结果。
当render
方法执行之后就开始执行componentDidMount
方法。DOM
元素(React Native的原生元素)可以在这个方法里取到。这时可以在这个方法里执行数据获取等操作。如果需要的话,任何的DOM操作都可以在这里执行,绝对不可以在render
方法里执行。
State改变引发的绘制
State
的修改会触发一些列的方法:
更新state | |
---|---|
√ | shouldComponentUpdate |
√ | componentWillUpdate |
√ | render |
√ | componentDidUpdate |
shouldComponentUpdate
方法会在render
方法调用之前调用。在这个方法里可以控制是否绘制组件,或者直接跳过。显然,这个方法一定不会在初始化的时候调用。在这个方法里需要返回一个boolean类型的值,默认返回true
。
shouldComponentUpdate(nextProps, nextState) {
return true
}
通过对nextProps
和nextState
的值的处理,可以判定接下来的重绘是否必要。
componentWillUpdate
方法在shouldComponentUpdate
方法返回true之后就会被调用。在和方法里任何的this.setState
方法调用都是不允许的,因为这个方法是用来为接下来的绘制做准备的,不是用来触发重绘的。
componentDidUpdate
方法在render
方法之后调用。和componentDidMount
方法类似,这个方法里也可以执行DOM操作。
componentWillUpdate(nextProps, nextState) {
// 为接下来的绘制做准备
}
componentDidUpdate(prevProps, prevState) {
//
}
Props改变引发的绘制
任何对props对象的修改也会触发生命周期方法的调用,这个过程和state的修改引发的生命周期方法基本一致,只是多了一个方法。
更新Props | |
---|---|
√ | componentWillRecieveProps |
√ | shouldComponentUpdate |
√ | componentWillUpdate |
√ | render |
√ | componentDidUpdate |
componentWillRecieveProps
只会在props
对象发生改变并且不是初始绘制的时候调用。在这个方法里,可以根据当前的props
和将要传入的props
来设置state
,但是这样并不会触发绘制。**这个方法里有个很有趣的地方,在这个方法里state的相等比较是无效的,因为state的改变不应该引起任何的props的改变。
componentWillReceiveProps(nextProps) {
this.setState({
// 设置state
})
}
其他的生命周期基本上和改变state引起的生命周期方法是一样的。
卸载
卸载 | |
---|---|
√ | componentWillUnmount |
我们唯一没有触及的方法就是componentWillUnmount
了。这个方法在组件被从DOM中移除之前调用。当你需要在组件移除前执行清理操作的时候非常有用。比如,清除timer
之类的对象。
原文地址:http://busypeoples.github.io/post/react-component-lifecycle/
理解React组件的生命周期的更多相关文章
- 2. React组件的生命周期
2. React组件的生命周期 使用React开发时候用到最多的就是React的组件了,通过继承React.Component,加入constructor构造函数,实现Render方法即可.这当中Re ...
- React 组件的生命周期方法
React 组件的生命周期方法 按渲染顺序: 1: componentWillMount() – 在渲染之前执行,在客户端和服务器端都会执行. 2: componentDidMount() – 仅在第 ...
- react第三单元(react组件的生命周期)
第三单元(react组件的生命周期) #课程目标 灵活掌握react组件的生命周期以及组件的活动过程. 能够灵活使用react的生命周期 #知识点 react的类组件的生命周期分为三个阶段 实例期 存 ...
- React组件和生命周期简介
React 简介----React 是 Facebook 出品的一套颠覆式的前端开发类库.为什么说它是颠覆式的呢? 内存维护虚拟 DOM 对于传统的 DOM 维护,我们的步骤可能是:1.初始化 ...
- react 组件的生命周期
组件的生命周期 过程 装载(Mounting) :组件被插入到 DOM 中: 更新(Updating) :组件重新渲染以更新 DOM: 卸载(Unmounting) :组件从 DOM 中移除. 过程 ...
- React: React组件的生命周期
一.简介 在前面的第二篇博文中对组件的生命周期虽然做了一个大略介绍,但总感觉说的过于简单,毕竟生命周期是React组件的核心部分.在我们熟练使用React挂载和合成组件来创建应用表现层的过程中,针对数 ...
- react 组件的生命周期 超简版
组件从被创建到被销毁的过程称为组件的 生命周期: 通常,组件的生命周期可以被分为三个阶段:挂载阶段.更新阶段.卸载阶段: 一.挂载阶段 这个阶段组件被创建,执行初始化,并被挂载到DOM中,完成组件的第 ...
- react组件的生命周期
写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...
- React 组件的生命周期API和事件处理
一.简单记录React的组件的简洁的生命周期API: A:实例化期: 一个实例第一次被创建时所调用的API与其它后续实例被创建时所调用的API略有不同. 实例第一次被创建时会调用getDefaultP ...
随机推荐
- day28元类与异常查找
元类与异常处理1. 什么是异常处理 异常是错误发生的信号,一旦程序出错就会产生一个异常,如果该异常 没有被应用程序处理,那么该异常就会抛出来,程序的执行也随之终止 异常包含三个部分: ...
- Web请求过程
一.Http解析 Http Header控制着成千上万的互联网用户的数据传输,控制着用户浏览器的渲染行为和服务器的执行逻辑. HTTP请求头 Accept-Language: zh-cn,zh;q=0 ...
- Docker 安装 oracle 并使用 navicat 实现外部连接
1,拉取 docker 镜像:docker pull registry.cn-hangzhou.aliyuncs.com/helowin/oracle_11g 1.1 , 该镜像由阿里云提供,比较大, ...
- Itellj Idea使用技巧
模板设置: 类模板:File–>Settings–>Editor–>File and Code Templates–>Includes–>File Header 输入缩写 ...
- 吴裕雄 python深度学习与实践(7)
import cv2 import numpy as np img = np.mat(np.zeros((,))) cv2.imshow("test",img) cv2.waitK ...
- Python 学习图谱
https://mp.weixin.qq.com/s/-fJYAlOs4ui0YeJ-W6BkeQ
- java实现两个不同list对象合并后并排序
工作上遇到一个要求两个不同list对象合并后并排序1.问题描述从数据库中查询两张表的当天数据,并对这两张表的数据,进行合并,然后根据时间排序.2.思路从数据库中查询到的数据放到各自list中,先遍历两 ...
- DJango 基础 (4)
Django模板标签 知识点: 基本概念 常用标签 模板标签例子 模板继承与应用 注释标签 模板标签 标签在渲染的过程中提供任意的逻辑. 这个定义是刻意模糊的. 例如,一个标签可以输出内容,作为控制结 ...
- Centos7编译安装lnmp(nginx1.10 php7.0.2)
我使用的是阿里云的服务器 Centos7 64位的版本 1. 连接服务器 这个是Xshell5的版本 安装好之后我们开始连接服务器 2. 安装nginx 首先安装nginx的依赖 yum instal ...
- Python基础-python数据类型之元祖、字典(四)
元祖 Python的元组与列表类似,不同之处在于元组的元素不能修改.元组使用小括号,列表使用方括号. tuple=(1,2,3,4) print(tuple) 访问元祖 通过索引访问,也可以进行切片操 ...