React基础篇 (3)-- 生命周期
生命周期是react中的重要部分,理解它有助于我们更合理的书写逻辑。
组件的生命周期可分成三个状态:
- Mounting:已插入真实 DOM
- Updating:正在被重新渲染
- Unmounting:已移出真实 DOM
生命周期的方法有:
componentWillMount
:在渲染前调用,在客户端也在服务端。
componentDidMount
: 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构。
可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
componentWillReceiveProps
: 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate
: 返回一个布尔值。在组件接收到新的props或者state时被调用。
componentWillUpdate
: 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate
: 在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount
: 在组件从 DOM 中移除之前立刻被调用。
举例如下:
class Ani extends React.Component {
state={
data:0
}
setNewNumber=()=> {
this.setState({data: this.state.data + 1})
}
render() {
return (
<div>
<button onClick = {this.setNewNumber}>INCREMENT</button>
<Content myNumber = {this.state.data}></Content>
</div>
);
}
}
class Content extends React.Component {
componentWillMount() {
console.log('Component WILL MOUNT!')
}
componentDidMount() {
console.log('Component DID MOUNT!')
}
componentWillReceiveProps(newProps) {
console.log('Component WILL RECEIVE PROPS! newProps:',newProps)
}
shouldComponentUpdate(newProps, newState) {
return true;
}
componentWillUpdate(nextProps, nextState) {
console.log('Component WILL UPDATE!');
}
componentDidUpdate(prevProps, prevState) {
console.log('Component DID UPDATE!')
}
componentWillUnmount() {
console.log('Component WILL UNMOUNT!')
}
render() {
return (
<div>
<h3>{this.props.myNumber}</h3>
</div>
);
}
}
ReactDOM.render(<Ani/>,document.getElementById("app"))
结果:
初始化:
更新状态:
参考文档:https://react.docschina.org/docs/state-and-lifecycle.html
React基础篇 (3)-- 生命周期的更多相关文章
- react基础学习 二——生命周期
生命周期mount: mounting装载创建 update更新 unmounting卸载 错误捕获 注意点:生命周期函数的 作用,什么之后用 只有类式组件有生命周期,函数式组件没有生命周期 moun ...
- 【RN - 基础】之React Native组件的生命周期
下图描述了React Native中组件的生命周期: 从上图中可以看到,React Native组件的生命周期可以分为初始化阶段.存在阶段和销毁阶段. 实例化阶段 实例化阶段是React Native ...
- 转:OSGi 入门篇:生命周期层
OSGi 入门篇:生命周期层 前言 生命周期层在OSGi框架中属于模块层上面的一层,它的运作是建立在模块层的功能之上的.生命周期层一个主要的功能就是让你能够从外部管理应用或者建立能够自我管理的应用(或 ...
- reactjs入门到实战(七)---- React的组件的生命周期
React的组件的生命周期有三个状态分别是:挂载(生产组件示例化.准备挂载到页面.挂载到页面).更新(更新值.更新DOM).和卸载(卸载后). >>>其他 getInitia ...
- iOS开发UI篇—UITabBarController生命周期(使用storyoard搭建)
iOS开发UI篇—UITabBarController生命周期(使用storyoard搭建) 一.UITabBarController在storyoard中得搭建 1.新建一个项目,把storyb ...
- 《React Native 精解与实战》书籍连载「React Native 中的生命周期」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- react native组件的生命周期
react native组件的生命周期 一.当页面第一次加载时,会依次调用: constructor() componentWillMount(): 这个函数调用时机是在组件创建,并初始化了状态之后, ...
- Android React Native组件的生命周期及回调函数
熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期.今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧 在android开 ...
- React Native 中 component 生命周期
React Native 中 component 生命周期 转自 csdn 子墨博客 http://blog.csdn.net/ElinaVampire/article/details/518136 ...
- react实战 系列 —— React 的数据流和生命周期
其他章节请看: react实战 系列 数据流和生命周期 如何处理 React 中的数据,组件之间如何通信,数据在 React 中如何流动? 常用的 React 生命周期方法以及开源项目 spug 中使 ...
随机推荐
- windows服务器审核失败消息:事件ID: 861 进程标识符:904
事件ID: 861 进程标识符:904 排查方法: win+R键调出运行窗口, 输入cmd 输入tasklist /SVC /FI “PID eq 904” 查找进程号904对应的是不是dhcp ...
- WebSocket实战之JavaScript例子
一.详细代码案例 详细解读一个简单html5 WebSocket的Js实例教程,附带完整的javascript websocket实例源码,以及实例代码效果演示页面,并对本实例的核心代码进行了深入解读 ...
- 自定义条件判断两对象相等Equals的方法
自定义两对象是否相等方法,必须用到GetHashCode方法,如 public class AirspaceCompareByUUID : IEqualityComparer<AIRSPACE_ ...
- 2014.8.27 CAD数据结构
Rwy表中存放所有物理跑道,主键rwy_id,但没有跑道中心点坐标 rwy_direction表中存放所有所有逻辑跑道号,也没有跑道入口坐标.同一rwy_id对应有2条记录 rwy_cline_poi ...
- php各版本编译好的扩展模块下载地址
php各版本[,x86/64 v9/v11/v14 nts/ts]编译好的扩展模块下载地址: https://windows.php.net/downloads/pecl/releases/ ht ...
- PHP安装使用Zend Opcache扩展
简介 Zend OPCache 的前身是Zend Optimizer + (Zend O+),于 2013年3月中旬改名为 Opcache.其通过 opcode 缓存和优化提供更快的 PHP 执行过程 ...
- EasyUI应用总结
1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncod ...
- Spring Cloud Eureka 5 (服务发现与消费-简单的robbin使用)
通过上述介绍,我们已经有了服务注册中心和服务提供者 下面我们来尝试构建一个服务的消费者 它要完成两个功能,发现服务和消费服务,其中发现服务由eureka客户端完成,消费服务由ribbon完成. rib ...
- Gym 101606 F-Flipping Coins(概率dp)
参考博客:http://www.cnblogs.com/kang000/p/8571071.html (这篇博客写的真的走心,ORZ) 题意有n个硬币排成一排,开始的时候所有的硬币都是正面朝下,你必 ...
- UVA-11280 Flying to Fredericton
题意 给定一些国家,和两个国家间的花费,现在有一些询问,询问每次最多转k次飞机,最小花费 分析 最短路的裸题,跑spfa或者dijsktra什么的都行 多开一维来记录转k次飞机时的最短路是什么(拆点? ...