React生命周期中应该做什么事
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生命周期中应该做什么事的更多相关文章
- React 生命周期简介
React 中组件的生命周期会经历如下三个过程:装载过程.更新过程.卸载过程. 装载过程:组件实例被创建和插入 DOM 树的过程: 更新过程:组件被重新渲染的过程: 卸载过程:组件从 DOM 树 ...
- 22.1 、react生命周期(一)
在每个react组件中都有以下几个生命周期方法~我们需要在不同阶段进行讨论 组件生命周期概述 1.初始化 在组件初始化阶段会执行 constructor static getDerivedStateF ...
- React生命周期执行顺序详解
文章内容转载于https://www.cnblogs.com/faith3/p/9216165.html 一.组件生命周期的执行次数是什么样子的??? 只执行一次: constructor.compo ...
- React生命周期及事件详解
引用原文:http://blog.csdn.net/limm33/article/details/50942808 一.组件的详细说明和生命周期ComponentSpecs and Lifecycle ...
- react生命周期方法有哪些?
react生命周期方法有哪些? React 16.3+ getDerivedStateFromProps:在调用render()之前调用,并在每次渲染时调用.需要使用派生状态的情况是很罕见的 comp ...
- 【React学习笔记】React生命周期梳理(16.X前后两种)
React生命周期 「16版本以前的:」 生命周期流程图 组件从生成到被挂在到页面上的一系列过程 根据流程图打印的执行顺序图: 流程讲解: 初始化流程 start 开始创建组件 在这个周期中做的事情 ...
- 4.React生命周期
4.React生命周期 4.1引出生命周期 class Life extends React.Component { state = { opacity:0.5 } death = () => ...
- React生命周期
在react生命周期中,分2段执行,一个挂载的生命周期,一个是组件发生了数据变动,或者事件触发而引发的更新生命周期. 注:react生命周期很重要,对于很多组件场景的应用发挥重要作用,而且不熟悉生命周 ...
- React 生命周期
前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...
随机推荐
- jquery-ui提供的拖拽方法
项目当中遇到了任意拖动div标签的功能,找到了jqueryui提供的draggable的插件,这个插件可以实现任意的div的移动,也可以移动到整个屏幕或者在父元素的范围内进行移动. 插件的api ...
- WPF 用户控件的自定义依赖属性在 MVVM 模式下的使用备忘
依赖属性相当于扩充了 WPF 标签的原有属性列表,并可以使用 WPF 的绑定功能,可谓是十分方便的:用户控件则相当于代码重用的一种方式:以上几点分开来还是比较好理解的,不过要用到MVVM 模式中,还是 ...
- Shell编程——多命令顺序执行、管道、grep命令
1.多命令执行符: (1)命令1:命令2 多个命令顺序执行,没有逻辑联系,即使命令1出错,命令2依旧执行. (2)命令1&&命令2:只有命令1正确执行,命令2才能正确执行:命令1 ...
- Django 1.11 bootstrap样式文件无法加载问题解决
先吐槽一波,多看官方教程,多找对应版本解决方法,多思考!... 在调试模式下面,打开页面无法加载bootstrap.min.css样式,解决思路如下: 查看settings文件INSTALL_APP配 ...
- 剑指offer 面试题8:二叉树的下一个节点
题目:给定一棵二叉树和其中一个节点,如何找出中序遍历序列的下一个节点?树中的节点除了有两个分别指向左.右节点的指针,还有一个节点指向父节点的指针. 中序遍历序列是{d,b,h,e,i,a,f,c,g} ...
- C语言实现FTP服务器
公共部分代码 /* common.h */ #ifndef COMMON_H #define COMMON_H #include <arpa/inet.h> #include <ct ...
- nginx设置防盗链
1.一般的防盗链设置: location ~* \.(gif|jpg|png|jpeg)$ { expires 30d; valid_referers none blocke *.julyy.site ...
- 什么是SQL Server2019大数据群集?
从SQL Server 2019(15.x)开始,SQL Server大数据群集允许您部署在Kubernetes上运行的SQL Server,Spark和HDFS容器的可伸缩群集.这些组件并排运行,使 ...
- eclipse Referenced file contains errors (http://www.springframework.org/schema/context/spring-context-3.0.xsd)
1.情景展示 spring配置文件报错信息如下: Referenced file contains errors (http://www.springframework.org/schema/ ...
- 2019年上海市大学生网络安全大赛两道misc WriteUp
2019年全国大学生网络安全邀请赛暨第五届上海市大学生网络安全大赛 做出了两道Misc== 签到 题干 解题过程 题干提示一直注册成功,如果注册失败也许会出现flag. 下载下来是包含010edito ...