react组建生命周期
实例化
首次实例化
- getDefaultProps //创建默认 props
- getInitialState //创建 默认的State
- componentWillMount //在装配发生前被立刻调用。其在render()之前被调用，因此在这方法里同步地设置状态将不会触发重渲。避免在该方法中引入任何的副作用或订阅。
- render //渲染装载组建
- componentDidMount //渲染组建完毕 此时可以请求ajax或者操作dom
实例化完成后的更新数据调用
- componentWillReceiveProps
- props是父组件传递给子组件的。父组件发生render的时候子组件就会调用componentWillReceiveProps（不管props有没有更新，也不管父子组件之间有没有数据交换）。
getDerivedStateFromProps
getDerivedStateFromProps在组件被实例化以及它接收到新的props之后被调用。它应该返回一个对象来更新状态，或者返回null来表示新的props不需要任何状态更新。
请注意，如果父组件导致组件重新渲染，即使道具没有更改，也会调用此方法。如果您只想处理更改，则可能需要比较新值和先前的值。
调用this.setState()通常不会触发getDerivedStateFromProps()。
- shouldComponentUpdate
- /使用shouldComponentUpdate()以让React知道当前状态或属性的改变是否不影响组件的输出。默认行为是在每一次状态的改变重渲，在大部分情况下你应该依赖于默认行为。当接收到新属性或状态时，shouldComponentUpdate() 在渲染前被调用。默认为true。该方法并不会在初始化渲染或当使用forceUpdate()时被调用。当他们状态改变时，返回false 并不能阻止子组件重渲。当前，若shouldComponentUpdate()返回false，而后componentWillUpdate()，render()， 和 componentDidUpdate()将不会被调用。注意，在未来React可能会将shouldComponentUpdate()作为一个线索而不是一个严格指令，返回false可能仍然使得组件重渲。在观察后，若你判定一个具体的组件很慢，你可能需要调整其从React.PureComponent继承，其实现了带有浅属性和状态比较的shouldComponentUpdate()。若你确信想要手写，你可能需要用this.props和nextProps以及this.state 和 nextState比较，并返回false以告诉React更新可以被忽略。作用 用来校验数据 是否需要渲染
- componentWillMount
- 在组件挂载之前调用一次。如果在这个函数里面调用setState，本次的render函数可以看到更新后的state，并且只渲染一次。这是唯一的会在服务端渲染调起的生命周期钩子函数。通常地，我们推荐使用constructor()来替代。
- render //渲染装载组建
getSnapshotBeforeUpdategetSnapshotBeforeUpdate()在最近呈现的输出被提交给例如DOM之前被调用。它使您的组件能够在潜在变化之前捕捉当前值（例如滚动位置）。此生命周期返回的任何值将作为参数传递给componentDidUpdate()。
- componentDidUpdate
componentDidUpdate()会在更新发生后立即被调用。该方法并不会在初始化渲染时调用。当组件被更新时，使用该方法是操作DOM的一次机会。这也是一个适合发送请求的地方，要是你对比了当前属性和之前属性（例如，如果属性没有改变那么请求也就没必要了）。注意若shouldComponentUpdate()返回false，componentDidUpdate()将不会被调用。这里相当于组建更新数据全部渲染完，虚拟dom也渲染完可以操作dom
销毁组建周期函数
- componentWillReceiveProps
- 具体看以下demo
- 更多细节官方文档 https://doc.react-china.org/docs/react-component.html#componentdidmount
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="./js/react.min.js"></script>
<script src="./js/react-dom.min.js"></script>
<script src="./js/babel.min.js"></script> </head>
<body>
<div id="app"></div>
<script type="text/babel" > var Div=React.createClass({
getDefaultProps:function () {
console.log('getDefaultProps')
return{
age:'20'
}
},
getInitialState:function () {
console.log('getInitialState')
return{
name:'0'
}
},
componentWillMount:function () { console.log('componentWillMount');
},
componentDidMount:function () { var _this=this; console.log('componentDidMount');
},
componentWillReceiveProps:function () { console.log('componentWillReceiveProps');
},
shouldComponentUpdate:function () { console.log('shouldComponentUpdate'); return true;
},
componentWillUpdate:function () { console.log('componentWillUpdate');
},
componentDidUpdate:function () { console.log('componentDidUpdate');
},
componentWillUnmount:function () { console.log('componentWillUnmount');
},
updata:function(){
this.setState( {name:parseInt(this.state.name+1)} ) },
render:function () {
console.log('render') return (<div>
<div onClick={this.updata}>更新数据</div>
<p>name:{this.state.name}</p>
<p>age:{this.props.age}</p>
</div>) }}
); ReactDOM.render(
<Div age='28'/>,
document.getElementById('app')
);
</script>
</body>
</html>
react组建生命周期的更多相关文章
- React—组件生命周期详解
React—组件生命周期详解 转自 明明的博客 http://blog.csdn.net/slandove/article/details/50748473 (非原创) 版权声明:转载请注明出处,欢 ...
- react.js 生命周期componentDidUpdate的另类用法：防止页面过渡刷新
场景:数据新增成功之后,需要返回原来的查询表,这时候的查询,需要使用react的生命周期:componentDidUpdate componentDidUpdate() 这个生命周期的作用是当prop ...
- React的生命周期
我们先来看一张图,其实看完这张图基本就懂了,如果还不懂,请继续往下看. getDefaultProps 执行过一次后,被创建的类会有缓存,映射的值会存在this.props,前提是这个prop不是父组 ...
- 附实例！图解React的生命周期及执行顺序
本文由云+社区发表 作者:前端林子 1.七个可选的生命周期 可以结合下图来看: (1) componentWillMount() 仅在render()方法前被调用一次,如果在该方法中调用了setSta ...
- React之生命周期
哈喽,这是我的第一篇博客,请大家多多关照~ 追根溯源:What's the lifeCycle? 生命周期函数指在某一时刻组件会自动调用执行的函数: React生命周期概览: 接下来我们就着生命周期的 ...
- React组件生命周期小结
React组件生命周期小结 下面所写的,只适合前端的React.(React也支持后端渲染,而且和前端有点小区别,不过我没用过.) 相关函数 简单地说,React Component通过其定义的几个函 ...
- React 函数生命周期
React 函数生命周期基础 1 ,概念 在组件创建.到加载到页面上运行.以及组件被销毁的过程中,总是伴随着各种各样的事件,这些在组件特定时期,触发的事件,统称为组件的生命周期:* 2,组件生命周 ...
- 帮你理清React的生命周期
这是一个从印记中文 | react官方文档提取总结的,算是帮自己理清并且强化记忆React的生命周期,以便以后编写组件的时候能够有更清晰的思路.本文如有纰漏,欢迎指正 整体上来讲,React生命周期分 ...
- 七天接手react项目 —— 生命周期&受控和非受控组件&Dom 元素&Diffing 算法
生命周期&受控和非受控组件&Dom 元素&Diffing 算法 生命周期 首先回忆一下 vue 中的生命周期: vue 对外提供了生命周期的钩子函数,允许我们在 vue 的各个 ...
随机推荐
- 17.2 SourceInsight批量注释
将下面的代码保存为codecomm.em并添加到工程,在Options->Menu Assignments中就可以看到这个宏macro CodeComments,给这个宏添加热键. 执行一次Ct ...
- VS2015 IIS Express 无法启动 解决办法
VS2015启动调试时,总是提示“IIS Web Express 无法启动”的错误, 因为其他项目都可以,就这么一个不行,基本就是配置问题,网上的办法都试了,试了都没用,试试以下解决方案: 用记事本或 ...
- php5.5.7添加pgsql,pdo_pgsql,swoole
一:下载php源码sudo wget cn2.php.net/distributions/php-X.X.X.tar.gz 二:解压 tar xzf /php-X.X.X.tar.gz 三:进入源码e ...
- Web高级 网站安全
1. SQL注入 虽然现在SQL注入发生的情况总的来说越来越少,还是提二句.关于什么是SQL注入大家都知道就不多说了. 1.1 原理 我们在做前端页面的时候,少不了会又各种输入框,然后通过GET或者P ...
- 京东饭粒捡漏V1.1.0
20180624 更新 V1.1.01.解决进程残留问题:2.加入急速下单模式: 功能介绍1.京东商城专用,支持饭粒模式下单,自己获得京豆返利 2.捡漏模式:帮助用户监控抢购商品,有库存的时候进行抢单 ...
- 【sql】ALTER更新数据库字段
--数据库表字段更新sql脚本,以下是示例 --新增列字段 --alter table table_name add column `address` varchar() COLLATE utf8_b ...
- 移植mysql到ARM(AM335x)
一,编译ncurses 编译mysql需要依赖ncurses,先编译ncurses 1.下载ncurses 下载路径是ftp://ftp.gnu.org/gnu/ncurses,选择下载的是ncurs ...
- subprocess模块 sys模块
常用模块学习—subprocess模块详解 要通过Python去执行一条系统命令或脚本,系统的shell命令是独立于你的python进程之外的,每执行一条命令,就是发起一个新进程,通过python调用 ...
- MySQL 之 MHA + ProxySQL + keepalived 实现读写分离，高可用（三）
设置Keepalived VIP切换邮件告警 修改keepalived.conf配置: [root@server01 keepalived]# cat keepalived.conf ! Config ...
- 如何成功打造一款中台（PaaS）产品
现如今,很多互联网公司在向“大中台,小前台”方向靠拢,通过打造高度可用.高度可定制的中台,来支撑前台业务的快速发展.个性化功能定制.但在构建中台产品(即所谓公司级平台)的时候,如何能成功让一款产品从0 ...