React生命周期函数

装载组件触发

0.construct(props) 用来 props--->state

初始化state,并且把props转化为state

1.componentWillMount   用来 props--->state,用构造函数就可以了,这个我们一般不用

只会在装载之前调用一次,在render之前调用,你可以在这个方法里面调用setState 改变状态,并且不会导致额外调用一次render,不能有副作用在里面

 

2.componentDidMount    页面初次加载好后,发送网络请求,获取数据后setState(data) 触发重新渲染 or 操作DOM改变样式

只会在装载完成之后调用一次,在render之后调用,从这里开始可以通过 ReactDOM.findDOMNode(this)获取到组件的DOM节点。

更新组件触发

1.componentWillReceiveProps(nextProps)  用来props--->state,setState不会重新渲染

有可能props没有改变的时候也触发,比如父组件更新导致的触发,有时候可能需要比较props是否发生了改变

2.shouldComponentUpdate(nextProps, nextState)  判断新的props或者state是否需要重新渲染

更新前所有的setState已经完成,forceUpdate()会强刷

3.componentWillUpdate(nextProps, nextState)  可以执行一些预备操作在更新前, 基本不用

此时已经不能调用setState了,

4.componentDidUpdate()  页面加载好后,发送网络请求,获取数据后setState(data) 触发重新渲染 or操作DOM改变样式

给出一个疑问:

官网说可以再componenDidUpdate 中做一些网络请求,然后setState的事情

componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.

Use this as an opportunity to operate on the DOM when the component has been updated. This is also a good place to do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed).

推荐一篇好的使用react的建议

http://aeflash.com/2015-02/react-tips-and-best-practices.html

React生命周期中应该做什么事的更多相关文章

  1. React 生命周期简介

       React 中组件的生命周期会经历如下三个过程:装载过程.更新过程.卸载过程. 装载过程:组件实例被创建和插入 DOM 树的过程: 更新过程:组件被重新渲染的过程: 卸载过程:组件从 DOM 树 ...

  2. 22.1 、react生命周期(一)

    在每个react组件中都有以下几个生命周期方法~我们需要在不同阶段进行讨论 组件生命周期概述 1.初始化 在组件初始化阶段会执行 constructor static getDerivedStateF ...

  3. React生命周期执行顺序详解

    文章内容转载于https://www.cnblogs.com/faith3/p/9216165.html 一.组件生命周期的执行次数是什么样子的??? 只执行一次: constructor.compo ...

  4. React生命周期及事件详解

    引用原文:http://blog.csdn.net/limm33/article/details/50942808 一.组件的详细说明和生命周期ComponentSpecs and Lifecycle ...

  5. react生命周期方法有哪些?

    react生命周期方法有哪些? React 16.3+ getDerivedStateFromProps:在调用render()之前调用,并在每次渲染时调用.需要使用派生状态的情况是很罕见的 comp ...

  6. 【React学习笔记】React生命周期梳理(16.X前后两种)

    React生命周期 「16版本以前的:」 生命周期流程图 组件从生成到被挂在到页面上的一系列过程 根据流程图打印的执行顺序图: 流程讲解: 初始化流程 start 开始创建组件 在这个周期中做的事情 ...

  7. 4.React生命周期

    4.React生命周期 4.1引出生命周期 class Life extends React.Component { state = { opacity:0.5 } death = () => ...

  8. React生命周期

    在react生命周期中,分2段执行,一个挂载的生命周期,一个是组件发生了数据变动,或者事件触发而引发的更新生命周期. 注:react生命周期很重要,对于很多组件场景的应用发挥重要作用,而且不熟悉生命周 ...

  9. React 生命周期

    前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...

随机推荐

  1. mysql数据库锁的机制-one

    锁概念 : 当高并发访问同一个资源时,可能会导致数据不一致,需要一种机制将用户访问数据的顺序进行规范化,以保证数据库数据的一致性.锁就是其中的一种机制. 举例 :以买火车票为例,火车票可面向广大消费者 ...

  2. Jmeter函数助手—自带方法

    1.${__time()}---->当前时间,一串数字格式 2.${__time(yyyy-MM-dd)}----->当前日期,年-月-日格式 3.${__time(yyyy-MM-dd ...

  3. plv8 centos install steps

    install deps yum -y update yum -y install https://download.postgresql.org/pub/repos/yum/reporpms/EL- ...

  4. 使用uwsgi部署项目?

    方式1: 这种方式虽然比较方便,但是启动操作比较繁琐,每次都不能关闭窗口 安装uwsgi:pip3 install uwsgi 上传项目,部署web app 创建数据库,同步数据 运行django项目 ...

  5. [NOI2010]超级钢琴 主席树

    [NOI2010]超级钢琴 链接 luogu 思路 和12省联考的异或粽子一样. 堆维护n个左端点,每次取出来再放回去次 代码 #include <bits/stdc++.h> #defi ...

  6. 第02组Alpha冲刺(4/4)

    队名:十一个憨批 组长博客 作业博客 组长黄智 过去两天完成的任务:了解整个游戏的流程 GitHub签入记录 接下来的计划:继续完成游戏 还剩下哪些任务:完成游戏 燃尽图 遇到的困难:没有美术比较好的 ...

  7. 关于nlp的一些探索

    深度学习,知识图谱,nlp学习经历                          获取信息来源:英文paper研读,吴恩达公开课,Hiton公开课,北大nlp教材,英文最新学术论文,中科院院士技术 ...

  8. [TJOI2009]猜数字(洛谷 3868)

    题目描述 现有两组数字,每组k个,第一组中的数字分别为:a1,a2,...,ak表示,第二组中的数字分别用b1,b2,...,bk表示.其中第二组中的数字是两两互素的.求最小的非负整数n,满足对于任意 ...

  9. 搭建Hadoop+Python的大数据开发环境

    实验环境 CentOS镜像为CentOS-7-x86_64-Everything-1804.iso 虚机配置 节点名称 IP地址 子网掩码 CPU/内存 磁盘 安装方式 master 192.168. ...

  10. 安装-consul服务发现集群

    centos 7.4.x consul  1.2.2 list: 172.16.16.103 172.16.16.112 172.16.16.115 下载: #cd /usr/local/ #wget ...