组件的生命周期

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

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

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

      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. iOS开发证书那点事儿

    iOS开发是用Xcode作为开发工具,Xcode在安装之后就自带了模拟器(Simulator).模拟器是个好工具,它对用户没有任何要求,但是我们必须牢记一件事:开发出来的App最终是要在真机上执行,没 ...

  2. 如何使用 CODING 进行瀑布流式研发

    你好,欢迎使用CODING!这份最佳实践将帮助你通过 CODING 更好地实践瀑布流式开发流程. 什么是瀑布流式研发 1970 年温斯顿·罗伊斯(Winston Royce)提出了著名的"瀑 ...

  3. Jmeter之命令行生成HTML报告

    其实每次使用jemter.bat文件启动JMeter时,命令行窗口都会提示我们不要使用GUI窗口进行测试,除非是进行调试脚本 使用命令行生成结果也很测试报告也很简单 jmeter -n -t [jmx ...

  4. luoguP2486 [SDOI2011]染色

    题目 Description 给定一棵有n个节点的无根树和m个操作,操作有2类: 1.将节点a到节点b路径上所有点都染成颜色c: 2.询问节点a到节点b路径上的颜色段数量(连续相同颜色被认为是同一段) ...

  5. 再次体会wireshark的威力！

    今天一位同学给我打电话,说是重启了客户机房里的一台服务器A,重启之后此台服务器不能与B服务器通信了,要命的是A台服务器上有关键数据需要与B服务器进行通信交互.客户大发雷霆,同学的老板也发火一再催促要尽 ...

  6. Html学习之十八（表格与表单学习--统计表制作）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. SpringBoot定时器任务

    Spring Boot使用@Scheduled定时器任务   摘要: Spring Boot之使用@Scheduled定时器任务 假设我们已经搭建好了一个基于Spring Boot项目,首先我们要在A ...

  8. SCOI 2005 互不侵犯

    洛谷 P1896 [SCOI2005]互不侵犯 洛谷传送门 题目描述 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一 ...

  9. Web前端开发框架大全-详述

    可以说,前端技术的发展是互联网自身发展的一个缩影! 前端技术的发展经历了web1.0时代,即网页只能展示信息,几乎没有交互可言: web2.0时代,web2.0不再是单维的,逐渐发展为双向交流,另一特 ...

  10. Spring Cloud Alibaba Sentinel对RestTemplate的支持

    Spring Cloud Alibaba Sentinel 支持对 RestTemplate 的服务调用使用 Sentinel 进行保护,在构造 RestTemplate bean的时候需要加上 @S ...