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. CodeForces 150E: Freezing with Style

    题目传送门:CF150E. 据说这个傻逼题还有一个 \(\log\) 的做法,但是我还不会. 题意简述: 给定一棵 \(n\)(\(2\le n\le 10^5\))个点的树,边有边权. 定义一条路径 ...

  2. 朱石景 201671010457 团队项目评审&课程学习总结

    项目 内容 这个作业属于哪个课程 http://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p/ ...

  3. pointnet

    无序性:虽然输入的点云是有顺序的,但是显然这个顺序不应当影响结果.点之间的交互:每个点不是独立的,而是与其周围的一些点共同蕴含了一些信息,因而模型应当能够抓住局部的结构和局部之间的交互.变换不变性:比 ...

  4. 历届试题 危险系数-(dfs+记录路径)

     历届试题 危险系数   问题描述 抗日战争时期,冀中平原的地道战曾发挥重要作用. 地道的多个站点间有通道连接,形成了庞大的网络.但也有隐患,当敌人发现了某个站点后,其它站点间可能因此会失去联系. 我 ...

  5. py 包和模块,软件开发目录规范

    目录 py 包和模块,软件开发目录规范 什么是包? 什么是模块? 软件开发目录规范 py 包和模块,软件开发目录规范 什么是包? 包指的是内部包__init__.py的文件夹 包的作用: 存放模块,包 ...

  6. jQuery事件绑定与切换

    一.事件绑定 1.标准方式 1. jquery标准的绑定方式 * jq对象.事件方法(回调函数): * 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为. * 表单对象.submit(); ...

  7. CF264D - Colorful Stones 题解

    题面 官方题解 模拟赛题解 题解概述: 定义符号A~B表示序列A是序列B的子序列,A!~B反之. 设操作序列为I,则有A~I,B!~I,C~I,D!~I. 可得出条件①B!~C且D!~A,所以我们只要 ...

  8. 2019qbxtCSP-S2 模拟题1

    T1 \(solution\) 求出第一个开始下降的位置,移动到连续的与它相同的数的最前面的一个数的位置,记录为\(p\) \(p\)以前的位置的数与原数相同,\(p\)位置为原数-1,后面全部为9 ...

  9. centos 升级openSSH7.81

    1.下载相关依赖包 [root@Log ~]# yum install -y gcc openssl-devel pam-devel rpm-build 2.下载安装包 wget http://ftp ...

  10. app内嵌h5分享到小程序分享功能

    if (this.GLOBAL.env !== 'production') { try { window.JSBridge.shareMiniProgramToWx('https://www.lexi ...