老生常谈js-react组件生命周期


Posted in Javascript onMay 02, 2017

组件的生命周期可分成三个状态:

•Mounting:已插入真实 DOM
•Updating:正在被重新渲染
•Unmounting:已移出真实 DOM

生命周期的方法有:

•componentWillMount 在渲染前调用,在客户端也在服务端。

•componentDidMount : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。

•componentWillReceiveProps 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。

•shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。

可以在你确认不需要更新组件时使用。

•componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

•componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

•componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。

(DVA)定义组件一般有三种方式:

// 1. 传统写法
const App = React.createClass({});

// 2. es6 的写法
class App extends React.Component({});

// 3. stateless 的写法(我们推荐的写法)
const App = (props) => ({});

其中第1种是我们(DVA)不推荐的写法,第2种是在你的组件涉及 react 的生命周期方法的时候采用这种写法,而第3种则是我们一般推荐的写法。

以上这篇老生常谈js-react组件生命周期就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 网页跳转的方法
Dec 24 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
May 26 Javascript
JS解决url传值出现中文乱码的另类办法
Apr 08 Javascript
浅析Cookie中的Path与domain
Dec 18 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
vue.js 实现a标签href里添加参数
Nov 12 Javascript
JavaScript的变量声明与声明提前用法实例分析
Nov 26 Javascript
three.js着色器材质的内置变量示例详解
Aug 16 Javascript
js 用于检测类数组对象的函数方法
May 02 #Javascript
使用Bootstrap打造特色进度条效果
May 02 #Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 #Javascript
js实现字符全排列算法的简单方法
May 01 #Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 #Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 #jQuery
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 #Javascript
You might like
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
js里的prototype使用示例
2010/11/19 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
Javascript实现单选框效果
2020/12/09 Javascript
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
python安装oracle扩展及数据库连接方法
2017/02/21 Python
TensorFlow实现RNN循环神经网络
2018/02/28 Python
python 读取文件并替换字段的实例
2018/07/12 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
Python GUI编程完整示例
2019/04/04 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
怎样声明子类
2013/07/02 面试题
2014离婚协议书范文
2014/09/10 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
教师培训简讯
2015/07/20 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
python使用torch随机初始化参数
2022/03/22 Python