生命周期是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. java成神之——jaxb操作xml的基本使用

    JAXB 依赖 读取xml配置 写配置 自定义写配置 结语 JAXB 依赖 <dependency> <groupId>javax.activation</groupId ...

  2. delphi OleVariant转换RecordSet

    delphi OleVariant转换RecordSet uses Data.Win.ADODB; function varToRecordSet( parms : OleVariant ) : Da ...

  3. entityframework.extended 配置mysql

    entityframework.extended 这个是个很好的扩展,不过由于默认是配置成MSSQL的,今天在github上面 看到一个解决方案,亲测可用,下面贴代码 1.在DbContext 修改默 ...

  4. ASP.NET Core应用到Windows Service中

    托管到Windows Service中 众所周知,ASP.NET Core采用了和传统ASP.NET不同的托管和HTTP处理方式,即把服务器和托管环境完全解耦. ASP.NET Core内置了两个HT ...

  5. Android中资源文件夹res/raw和assets的使用

    Android中资源文件夹res/raw和assets的使用 2011-12-08 11:05 494人阅读 评论(0) 收藏 举报 androidxml存储stringencodinglayout ...

  6. Theos初步

    [Theos初步] 1.安装Theos.Theos需要在mac和ios上均安装,ios上安装的是Theos服务器,以使得mac的thoes可以直接安装app到ios设备上.如果不需要使用此功能,则仅安 ...

  7. 微信内置浏览器中的cookie很诡异呀

    微信内置浏览器中的cookie很诡异呀 这是设置和删除COOKIE的代码 function set_cookie($var ,$value = '' ,$expire = 0){ $path = '/ ...

  8. Fedora 16下安装ruby on rails

    Fedora 16下安装ruby on rails 最近在windows下写了些rails小程序,问题一个接一个,到最后终于坚信了那句话“windows不适合用于ruby on rails开发”.于是 ...

  9. Ubuntu 复制 拷贝和自适应屏幕

    ubuntu 16.04安装vmtools实测无效!!!!!!11 1.解决VMware workstation与主机的粘贴.复制.文件拖拽问题. 2.解决VMware workstations中Ub ...

  10. 37.ROUND() 函数

    ROUND() 函数 ROUND 函数用于把数值字段舍入为指定的小数位数. SQL ROUND() 语法 SELECT ROUND(column_name,decimals) FROM table_n ...