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 ...
随机推荐
- js数组sort()排序的问题
最近跟自以为很了解的数组干上了,就像许多我们认知的东西一样,总以为自己很了解的东西,其实并不了解. var a=[12,4,1,43,5,3,52]; alert(a); //源:12,4,1, ...
- Python基础之函数定义及文件修改
函数 函数的定义 #登录函数和注册函数 def register(): """注册函数""" username = input('请输入你的 ...
- SparkSQL 中 RDD 、DataFrame 、DataSet 三者的区别与联系
一.SparkSQL发展: Shark是一个为spark设计的大规模数据仓库系统,它与Hive兼容 Shark建立在Hive的代码基础上,并通过将Hive的部分物理执行计划交换出来(by s ...
- django跨域问题解决
在django中,访问非同源网站(协议,域名,端口号)时,会出现: 解决方案: 1.安装 django-cors-headers pip install django-cors-headers 2.修 ...
- kafka如何保证数据可靠性和数据一致性
数据可靠性 Kafka 作为一个商业级消息中间件,消息可靠性的重要性可想而知.本文从 Producter 往 Broker 发送消息.Topic 分区副本以及 Leader 选举几个角度介绍数据的可靠 ...
- 关于qt creator各种假死的问题
来自CSDN网友( qq191329827)内容,亲自尝试,且经历一致: 我有两个笔记本,1个台式机,都装了qt, 然后,我的thinkpad x1c,装上之后creator各种假死,网上看了好多解决 ...
- Linux stty命令
stty是linux下改变和打印终端设置的常用命令. 一.参数: 1.打印终端行设置 -a,--all 以人可读的方式打印所有当前设置:-a参数比单独的stty命令输出的终端信息更详细 -g,-- ...
- 创维(Skyworth)电视 & 小米盒子3增强版
创维(Skyworth)电视 型号:43G7200(8H87) 品类:GLED Air TV OS:酷开64位6.20.80601-806061 兼容Android L CPU:四核 Cortex ...
- 何为pc值
PC就是程序计数器,就是指挥程序从哪里执行.如果是8位机,每个存储单元存放一个字节,指令有单字节.双字节和3字节.单片机复位时,PC=0000H,而后每执行一条指令,PC根据指令的字节数增加,如图:最 ...
- quantmod
-quantmod(数据和图形) -TTR(技术分析) -blooter(账户管理) -FinancialInstrument(金融产品) -quantstrast(策略模型) -Performanc ...