每一个组件都有一些生命周期函数。

当组件实例被创建并且会插入到DOM中,下面这些函数会被调用

constructor

componentWillMount

render

componentDidMount

改变组件的state或props会导致更新,当重新渲染组件时会调用下面这些方法

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate

当组件从DOM中移除,会调用下面的方法

componentWillUnmount

一.render()

render方法是必须的,render的返回值是下面的类型:
(1)react元素:要么是自定义的组件要么是原生的DOM组件
(2)字符串或者数字:会被渲染成DOM中的文本节点
(3)Portals:通过ReactDOM.createPortal创建
(4)null:什么都不会渲染
(5)Boolean:什么都不渲染
(6)包含多个元素的数组

render(){
return [
<li key='1'>1</li>,
<li key='2'>2</li>
]
}

render方法应该是简单的,在render中不能修改组件的state,每一次调用render都会返回一个新的结果。并且在render中也不能与浏览器进行交互,如果需要与浏览器交互,就在componentDidMount或者其他生命周期函数中执行。

二.constructor(props)

react组件的构造函数在组件装载之前调用。如果没有显示的定义constructor,那么在实例化组件时会调用默认的constructor,如果在React.Component的子类中显示的定义了constructor,那么就要在constructor中最开始调用super(props).
在构造函数中实例化state是一个很好的选择。下面举例一段代码

constructor(props) {
super(props);
this.state = {
color: props.initialColor
};
}

在react中使用props初始化state是合法的,但是这存在一个问题:当props被更新时,state并不会被更新。解决的方法是:在组件的componentWillReceiveProps(nextProps)中用新的props更新state。虽然这能解决问题,但是并不推荐,推荐把state提升到最近的公共父组件中

三.componentWillMount()

当装载发生之前会立即调用componentWillMount,componentWillMount会在调用render之前被调用,所有在componentWillMount中修改state,不会导致组件的重新渲染。服务器端渲染才会调用这个方法,所有推荐通过constructor代替这个方法。

四.componentDidMount()

当组件被装载完成会立即触发componentDidMount,在这个函数中修改state被导致组件重新渲染。组件被装载之后才能操作DOM。如果你需要加载远程数据,在这个地方发送网络请求是个不错的主意.

五.componentWillReceiveProps(nextProps)

当已经被转载的组件接受新的props之前componentWillReceiveProps会被触发。如果你需要更新state去响应props的更新,可以在这里通过setState方法更新state。当组件首次接受到props,这个方法不会被调用.
注意:props没有被改变也可能会调用这个方法,所有在这个方法中将当前的props去next props进行比较是很有必要的。

六.shouldComponentUpdate(nextState,nextProps)

当新的props或state被接受,在渲染之前会调用shouldComponentUpdate,这个方法默认是返回true,初次渲染和使用forceUpdate,不会调用这个方法。如果shouldComponentUpdate返回false,之后的componentWillUpdate,render以及componentDidMount不会被调用,组件以及他的子组件不会被重新渲染。

七.componentWillUpdate(nextProps, nextState)

当接受到新的props或state,在重新渲染之前会立即调用这个方法。在这个方法中不能this.setState(),初次渲染不会调用这个方法

八.componentDidUpdate(prevProps, prevState)

当更新完成之后会立即调用这个方法,初次渲染不会调用这个方法。当组件被更新之后可以在这里操作DOM,当你发现现在的props与之前的props不一样,在这里发送网络请求是个不错的主意

九.componentWillUnmount()

组件被摧毁之前会立即调用这个方法,在这个方法中可以做一些必要的清理

React——组件的生命周期函数的更多相关文章

  1. 【React自制全家桶】五、React组件的生命周期函数详解

    一.总览React组件的生命周期函数 什么是生命周期函数:简单的来说就是 在某个时刻会自动执行的函数 二.React的生命周期函数主要由四块组成 分别是:组件初始化.组件挂载.组件更新.组件卸载 三. ...

  2. React 组件的生命周期方法

    React 组件的生命周期方法 按渲染顺序: 1: componentWillMount() – 在渲染之前执行,在客户端和服务器端都会执行. 2: componentDidMount() – 仅在第 ...

  3. react第三单元(react组件的生命周期)

    第三单元(react组件的生命周期) #课程目标 灵活掌握react组件的生命周期以及组件的活动过程. 能够灵活使用react的生命周期 #知识点 react的类组件的生命周期分为三个阶段 实例期 存 ...

  4. 2. React组件的生命周期

    2. React组件的生命周期 使用React开发时候用到最多的就是React的组件了,通过继承React.Component,加入constructor构造函数,实现Render方法即可.这当中Re ...

  5. react父子组件各自生命周期函数加载的先后顺序

    理解记忆总结: 父组件即将挂载(最外层的父组件都还没准备进入,其内部的子组件当然更没进入了) -> 子组件即将挂载  -> 子组件挂载完成(父内部都没完成,父当然不能算完成)  -> ...

  6. React 学习(四) ---- 生命周期函数

    现在我们能修改状态,页面可以进行交互了,但是还有一种状态改变没有解决,那就是倒计时效果,时间一直在变化,组件状态也一直在改变,但我们什么都没有做,如果要实现这样的效果,需要怎么处理? 我们都知道,改变 ...

  7. React中的生命周期函数

    React的生命周期函数 什么是生命周期函数:生命周期函数是指在某一个时刻组件会自动调用执行的函数 Initialization:初始化 执行Constructor,初始state和props Mou ...

  8. 10. react 基础 ref 的使用 及 React 16 的生命周期函数 及 生命周期函数使用场景

    一. ref 的使用 ( 直接获取 DOM 元素 ) 在 input 标签上 可以使用 ref 属性 获取当前DOM节点 eg: import React , { Component, Fragmen ...

  9. react 组件的生命周期

    组件的生命周期 过程 装载(Mounting) :组件被插入到 DOM 中: 更新(Updating) :组件重新渲染以更新 DOM: 卸载(Unmounting) :组件从 DOM 中移除. 过程 ...

随机推荐

  1. 【Java学习笔记之三十】详解Java单例(Singleton)模式

    概念: Java中单例模式是一种常见的设计模式,单例模式的写法有好几种,这里主要介绍三种:懒汉式单例.饿汉式单例.登记式单例. 单例模式有以下特点: 1.单例类只能有一个实例. 2.单例类必须自己创建 ...

  2. WebDriver中自动识别验证码--Python实现

    一.在自动化测试中,遇到验证码的处理方法有以下两种: 1.找开发去掉验证码或者使用万能验证码 2.使用OCR自动识别 这里,方法一只要和研发沟通就行. 使用pytesseract自动化识别,一般识别率 ...

  3. GeoServer初识与安装

    学习过程中发现官网上的东西足够基础了,所以在这只做一下索引和补充. 官方网址:http://live.osgeo.org/zh/overview/geoserver_overview.html 安装: ...

  4. java初步—参数的值传递

    校招季,本人匆匆忙忙地参加各种宣讲会,几次笔试下来都遇到同一个题目,而且全都错在同一想法上,方知自己的基础实在不太牢固,因此特别写在博客上提醒自己要脚踏实地地学习!不多说了,题目如下: public ...

  5. Redis单机版和集群版的安装和部署

    1.单机版的安装 本次使用redis3.0版本.3.0版本主要增加了redis集群功能. 安装的前提条件: 需要安装gcc:yum install gcc-c++ 1.1 安装redis 1.下载re ...

  6. Linux-chown命令(1)

    chown  [chang owner]:更改文件的属主,也就是指定文件的拥有者改为另一个指定的用户或组. 命令格式: chown [选项]... [用户][:[组]] 文件... 例子:  sudo ...

  7. poj 2455 二分+最大流

    这个因为点少用邻接矩阵做的. 题意:求由1到n的t条不重复路径中最大边权值的最小值. 思路:先对边权进行排序,然后二分边权值,建图求从1到n的最大流,当最大流为t时便求出答案. 代码: #includ ...

  8. 常用按钮css

    #openwx_btn {                                 border: 0px;                background-color: rgb(145, ...

  9. 【★】微信之于QQ的市场哲学

    2016年的移动app下载排行榜出炉后,我们惊奇发现,前十名中有6个应用软件来自腾讯公司.而前两名毋庸置疑是远远碾压第三名的微信与qq.这让我们看到社交app的重要性的同时也回到了那个原始的问题:腾讯 ...

  10. 将home多余的空间分配到"/"分区下

    一.操作过程 1.df -h 查看分区大小情况; [root@localhost /]# df -h Filesystem            Size  Used Avail Use% Mount ...