组件的生命周期

  • 概念：在组件创建、到加载到页面运行、以及组件被销毁的过程中伴随的事件。组件的生命周期是指在组件的特定时期触发的事件。

  • 组件的生命周期分为三个部分：

    • 组件创建阶段：只执行一次

      componentWillMount: 组件将要被挂载，此时还未开始渲染虚拟dom
      render：执行结束后，内存中虚拟dom渲染完成
      componentDidMount：组件挂载完成，此时组件已经显示在页面中，执行结束后组件进入运行阶段

    • 组件运行阶段：根据组建的state和props改变有选择的出发0次或多次

      componentWillReceiveProps: 组件将要接收新属性，执行完成后，父组件为子组件传递新的属性值
      shouldComponentUpdate：组件尚未更新，但props和state是最新值
      componentWillUpdate：内存中虚拟dom为旧的，组件将要被更新
      render：重新渲染虚拟dom
      componentDidUpdate：state、虚拟dom、页面显示保持一致

    • 组件销毁阶段：只执行一次

      componentWillUnmount：组件将要被卸载，此时组件可正常使用

React入门（二）的更多相关文章

  1. react入门之使用react-bootstrap当轮子造车（二）

    react入门之使用react-bootstrap当轮子造车(二) 上一篇我们谈了谈如何配置react的webpack环境 react入门之搭配环境(一) 可能很多人已经打开过官方文档学习了react ...

  2. React入门教程(二)

    前言 距离上次我写 React 入门教程已经快2个月了,年头年尾总是比较忙哈,在React 入门教程(一)我大概介绍了 React 的使用和一些注意事项,这次让我们来继续学习 React 一. Rea ...

  3. react入门（3）

    在第一篇文章里我们介绍了jsx.组件.css写法  点击查看react入门(1) 第二篇文章里我们介绍了事件.this.props.children.props....other.map循环  点击查 ...

  4. react入门（1）

    这篇文章也不能算教程咯,就算是自己学习整理的笔记把. 关于react一些相关的简介.优势之类的,随便百度一下一大堆,我就不多说了,可以去官网(http://reactjs.cn/)看一下. 这片主要讲 ...

  5. React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  6. React入门 (1)—使用指南（包括ES5和ES6对比）

    前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...

  7. 2015年最热门前端框架React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  8. react入门——慕课网笔记

    一. jsx 1. 被称为语法糖:糖衣语法,计算机语言中添加的某种语法,对语言的功能没有影响,更方便程序员使用,增加程序的可读性,降低出错的可能性 类似的还有(coffeescript,typescr ...

  9. react 入门教程 阮一峰老师真的是榜样

    -  转自阮一峰老师博客 React 入门实例教程   作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Nati ...

  10. react入门之使用webpack搭配环境（一）

    react入门之搭配环境(一) 如果你想直接上手开发,而跳过这些搭配环境的繁琐过程,推荐你使用官方的create-react-app命令 npm install -g create-react-app ...

随机推荐

  1. Java数据结构（一）：栈

    导言:栈和我们的现实当中的箱子是一样的,保持一个先进后出,后进先出的原则.比如我们往一个箱子堆积衣服,一件一件地放进去之后,过一段时间再回来拿.那么最先放进去的衣服肯定最后拿出来,最后放进去的衣服就会 ...

  2. swift（四）swift的广义匹配

    //swift的广义匹配 let x = switch x { ...: println("个位数") ...: println("十位数") default: ...

  3. Python的 json 、 hashlib 、 Base64 模块

    json模块 简介 全称"JavaScript Object Notation" (JavaScript对象表示法)它是一种基于文本,独立于语言的轻量级数据交换格式 以易于让人阅读 ...

  4. excel如何快速选中某个区域

    一.问题 excel如何快速选中某个区域 二.解决 如图:要选中A1-D12的区域,可以选择用鼠标,单数数据量多的时候就比较麻烦,可以用下面这种方式.

  5. （转）SpringMVC表单多对象传递小技巧——@InitBinder

    转:https://www.jianshu.com/p/59771cbf373d 1.问题情景 项目中前端后台的数据传递是必不可少的,比如说我们要在一张表单中提交对象,如果只是一个对象就就很好做,因为 ...

  6. lua 4 使用table实现其他数据结构，并介绍遍历方法

    本文会以vector / map / set 这三种数据类型的角度来梳理 table 支持的不同遍历方式. table as std::vector 一般,C/C++中的 array / vector ...

  7. JavaScript 看不见的类型转换

    本章是我阅读JavaScript权威指南时着重留意的内容,同时也推荐正在学习前端的小伙伴可以留意一下这本书<JavaScript权威指南> JavaScript可以很灵活的将一种类型的值转 ...

  8. spring cloud hystrix dashboard 没有/actuator/hystrix.stream路径解决

    首先我用的是spring boot Greenwich.SR2 在测试hystrix-dashboard监控服务时,发现访问localhost:9001/actuator/hystrix.stream ...

  9. 自已开发IM有那么难吗？手把手教你自撸一个Andriod版简易IM (有源码)

    本文由作者FreddyChen原创分享,为了更好的体现文章价值,引用时有少许改动,感谢原作者. 1.写在前面 一直想写一篇关于im即时通讯分享的文章,无奈工作太忙,很难抽出时间.今天终于从公司离职了, ...

  10. 使用git克隆github上的项目失败，报错error: RPC failed; curl 56 OpenSSL SSL_read: SSL_ERROR_SYSCALL, errno 10054

    错误描述 今天在github上使用 git clone 某个项目代码的时, git clone https://github.com/XXXX/xxx-blog.git 下载速度很慢,然后下载一段时间 ...