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 ...
随机推荐
- [转]【会话技术】Cookie技术
建立时间:6.29 & 6.30 一.会话技术简介 1.存储客户端的状态 由一个问题引出今天的内容,例如网站的购物系统,用户将购买的商品信息存储到哪 里?因为Http协议是无状态的,也就是说 ...
- 接口自动化--数据驱动(ddt)
上次我们提到了unittest单元测试框架,运用单元测试框架unittest进行编写测试用例 但是遇到了一个问题,就是难道我一个测试点中有多个测试用例,我要每一个都要去编写一条测试用例嘛?这实在是太复 ...
- dapi 基于Django的轻量级测试平台五 测试报告
QQ群: GitHub:https://github.com/yjlch1016/dapi 一.柱状图 二.饼状图
- Ubuntu配置samba服务器
假设我的Ubuntu用户名:myname 1. 安装和卸载samba: sudo apt-get install samba samba-common sudo apt-get autoremove ...
- Escape character is ‘^]’什么意思?怎么使用telnet
在linux/unix下使用telnet(telnet ip 端口号)连接主机时提示“Escape character is '^]'.”,这是什么意思?“^”是Ctrl键的意思!1.这个提示的意思是 ...
- 面向对象高级B(元类)
元类 python一切皆对象,类实际上也是一个一个对象 类是一个对象,那他一定是由一个类实例化得到,这个类就叫元类 如何找元类 class Person: def __init__(self, nam ...
- Checkout 显示 URL /../../.. 不存在
Checkout 显示 URL /../../.. 不存在 Checkout 显示 URL /../../.. 不存在 如果库的路径是 svn库的路径为:/usr/local/svn/test/ 启动 ...
- Sublime Text2中的快捷方式及html各种标签(待完善)
快捷方式 1.xhtml+tab 2.自动补全标签 Alt + . 补全标签 标签 1.<p>段落标签 ,前后换行 <h1.2.3.4.5>标题标签 h1最大,一级标题 2. ...
- 出现 sudo: unable to resolve host XXX 信息解决办法
Ubuntu环境, 每次执行sudo 就出现这个警告讯息:sudo: unable to resolve host XXX虽然sudo 还是可以正常执行,是机器在反解上的问题, 所以就直接从/etc ...
- Debian9下安装Python3 pip
Debian9下安装Python3 pip 使用apt-get安装Python3-pip包 apt-get install python3-pip