老生常谈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 常用代码技巧大收集
Feb 25 Javascript
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 Javascript
javascript定时变换图片实例代码
Mar 17 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
JavaScript面向对象编写购物车功能
Aug 19 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 Javascript
js鼠标跟随运动效果
Mar 11 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 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
PHP运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
详解js静态资源文件请求的处理
2017/08/01 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
vue项目前端埋点的实现
2019/03/06 Javascript
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
Python yield使用方法示例
2013/12/04 Python
在Python的Tornado框架中实现简单的在线代理的教程
2015/05/02 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
python将txt文件读取为字典的示例
2018/12/22 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
Internet主要有哪些网络群组成
2015/12/24 面试题
思想品德自我鉴定
2013/10/12 职场文书
初中物理教学反思
2014/01/14 职场文书
化工专业大学生职业生涯规划书
2014/01/14 职场文书
《美丽的丹顶鹤》教学反思
2014/04/22 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers