组件的生命周期

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

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

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

      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. 2019年上半年收集到的人工智能Python编程干货文章

    2019年上半年收集到的人工智能Python编程干货文章 一文了解Python深拷贝与浅拷贝问题 Python广度优先查找和深度优先查找(内附python教程分享) Python基础之函数2 (参数的 ...

  2. Django和前端用ajax传输json等数据

    需要传输的是下图中所有的input中客户端设置的数据 整个页面是用js生成,代码不长,但是用了许多拼接,看起来开比较乱,页面的核心就是下面的部分,有一些关键参数部分就不放了,可以跳过这个 下面开始重点 ...

  3. 【tyvj1858】xlkxc（拉格朗日插值）

    传送门 题意: 求\(\sum_{i=0}^n\sum_{j=1}^{a+id}\sum_{k=1}^{j}k^K,n,a,d\leq 10^9,K\leq 100\). 思路: 最右边这个和式为一个 ...

  4. 【cf570】D. Tree Requests（dsu on tree）

    传送门 题意: 给出一个以\(1\)为根的有根树.之后有\(m\)个询问,每个询问为\(v_i,h_i\),需要回答以\(v_i\)为根的子树中,深度为\(h_i\)的那些结点所代表的字符能否构成回文 ...

  5. 2. Linux文件与目录管理

    一.目录与路径 1. 相对路径与绝对路径 绝对路径:路径写法[一定由根目录 / 写起],如:/usr/share/doc 相对路径:路径写法[不由 / 写起], /usr/share/doc 要到 / ...

  6. SOA案例分析浅谈

    SOA是英文 Service-Oriented Architecture 三个首字母单词的缩写,中文译为: 面向服务架构 ( SOA), SOA架构与 B/S . C/S 架构是目前最流行三种 Web ...

  7. Java 虚拟机编程接口JVMIT

    JVMTI(JVM Tool Interface)是 Java 虚拟机所提供的 native 编程接口,是 JVMPI(Java Virtual Machine Profiler Interface) ...

  8. 【2019.8.6 慈溪模拟赛 T3】集合（set）（线段树上DP）

    线段树上\(DP\) 首先发现,每个数肯定是向自己的前驱或后继连边的. 则我们开一棵权值线段树,其中每一个节点记录一个\(f_{0/1,0/1}\),表示在这个区间左.右端点是否连过边的情况下,使这个 ...

  9. 【2019.7.26 NOIP模拟赛 T3】化学反应（reaction）（线段树优化建图+Tarjan缩点+拓扑排序）

    题意转化 考虑我们对于每一对激活关系建一条有向边,则对于每一个点,其答案就是其所能到达的点数. 于是,这个问题就被我们搬到了图上,成了一个图论题. 优化建图 考虑我们每次需要将一个区间向一个区间连边. ...

  10. orchard 中文文档 中英对照版

    ORCHARD CMS a free, open source, community-focused Content Management System built on the ASP.NET MV ...