生命周期是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)-- 生命周期的更多相关文章

  1. react基础学习 二——生命周期

    生命周期mount: mounting装载创建 update更新 unmounting卸载 错误捕获 注意点:生命周期函数的 作用,什么之后用 只有类式组件有生命周期,函数式组件没有生命周期 moun ...

  2. 【RN - 基础】之React Native组件的生命周期

    下图描述了React Native中组件的生命周期: 从上图中可以看到,React Native组件的生命周期可以分为初始化阶段.存在阶段和销毁阶段. 实例化阶段 实例化阶段是React Native ...

  3. 转:OSGi 入门篇:生命周期层

    OSGi 入门篇:生命周期层 前言 生命周期层在OSGi框架中属于模块层上面的一层,它的运作是建立在模块层的功能之上的.生命周期层一个主要的功能就是让你能够从外部管理应用或者建立能够自我管理的应用(或 ...

  4. reactjs入门到实战(七)---- React的组件的生命周期

    React的组件的生命周期有三个状态分别是:挂载(生产组件示例化.准备挂载到页面.挂载到页面).更新(更新值.更新DOM).和卸载(卸载后). >>>其他     getInitia ...

  5. iOS开发UI篇—UITabBarController生命周期(使用storyoard搭建)

    iOS开发UI篇—UITabBarController生命周期(使用storyoard搭建)   一.UITabBarController在storyoard中得搭建 1.新建一个项目,把storyb ...

  6. 《React Native 精解与实战》书籍连载「React Native 中的生命周期」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  7. react native组件的生命周期

    react native组件的生命周期 一.当页面第一次加载时,会依次调用: constructor() componentWillMount(): 这个函数调用时机是在组件创建,并初始化了状态之后, ...

  8. Android React Native组件的生命周期及回调函数

    熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期.今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧 在android开 ...

  9. React Native 中 component 生命周期

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

  10. react实战 系列 —— React 的数据流和生命周期

    其他章节请看: react实战 系列 数据流和生命周期 如何处理 React 中的数据,组件之间如何通信,数据在 React 中如何流动? 常用的 React 生命周期方法以及开源项目 spug 中使 ...

随机推荐

  1. 搭建httpd服务

    实验环境:CentOS7 实验步骤: 安装httpd服务:yum -y install httpd 关闭SELinux:setenforce 0 禁用防火墙策略:iptables -F 启动httpd ...

  2. activemq安装运行及其在springboot中的queue和topic使用

    安装activemq 运行 springboot使用 依赖 配置 Producer Consumer ComsumerTopic 使用 安装activemq http://activemq.apach ...

  3. java成神之——数值操作BigDecimal,BigInteger,Random,SecureRandom

    数值操作 数值新特性 包装类 浮点 BigDecimal BigInteger 数值本地化 随机数 假随机数 真随机数 播种 结语 数值操作 数值新特性 123_456 等价于 123456,增加可读 ...

  4. requirejs——define——普通模块

    一.普通模块可能包含的内容: 一个模块对应着一个js文件,由于模块可能包含着以下三种内容:模块名.依赖模块.返回给其他模块使用的参数:因此js文件根据包含内容的不同而写法不同. 一.传统的js脚本文件 ...

  5. [android] setOnTouchEvent 设置返回值为true 和 false的区别

    今天在做自定义的可选文本的 TextView 类时,用到了 View 类的 setOnTouchListener(OnTouchListener l)事件监听,在构造 OnTouchListener ...

  6. ubuntu16配置mysql5.7主从同步

    测试环境如下: master: 10.0.0.26 slave01: 10.0.0.27 slave02: 10.0.0.28 一.三台机均安装mysql-server5.7 $ sudo apt-g ...

  7. 使用class-dump

    [使用class-dump] 对于未加壳的Mach-O文件,class-dump可以从Mach-O的section中还原出objc代码的头文件.下面做一些关键演示,以及对关键问题进行说明. 1.标准用 ...

  8. [luogu3369]普通平衡树(fhq-treap模板)

    解题关键:无旋treap模板. #include<iostream> #include<cstdio> #include<cstring> #include< ...

  9. opennebula 对接创建模板参数

    { "id": 8, "name": "c5d1390c-1930-45a5-a686-5cef38b319d7", "displ ...

  10. Python学习笔记_我的参考网址

    Python学习笔记, 下面记录网上搜到的可参考的网址: 一.关于Tkinter 1.Python3中tkinter模块使用方法详解 https://blog.csdn.net/Fighting_Bo ...