老生常谈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 Array.prototype.slice的使用示例
Nov 14 Javascript
用json方式实现在 js 中建立一个map
May 02 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
vue 插件的方法代码详解
Jun 06 Javascript
Vue 3.x+axios跨域方案的踩坑指南
Jul 04 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 Javascript
详解Nuxt.js 实战集锦
Nov 19 Javascript
JS继承定义与使用方法简单示例
Feb 19 Javascript
了不起的11个JavaScript代码重构最佳实践小结
Jan 11 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
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
javascript Object与Function使用
2010/01/11 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
简单了解OpenCV是个什么东西
2017/11/10 Python
python多进程实现进程间通信实例
2017/11/24 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
如何通过Python实现标签云算法
2019/07/02 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
django中嵌套的try-except实例
2020/05/21 Python
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
投标承诺书范本
2014/03/27 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
新员工入职感言范文!
2019/07/04 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
详解MySQL中的pid与socket
2021/06/15 MySQL
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB
P站美图推荐——变身女主角特辑
2022/03/20 日漫