实例讲解React 组件生命周期


Posted in Javascript onJuly 08, 2020

在本章节中我们将讨论 React 组件的生命周期。

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

  • 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 中移除之前立刻被调用。

这些方法的详细说明,可以参考官方文档。

实例

以下实例在 Hello 组件加载以后,通过 componentDidMount 方法设置一个定时器,每隔100毫秒重新设置组件的透明度,并重新渲染:

class Hello extends React.Component {
 
 constructor(props) {
   super(props);
   this.state = {opacity: 1.0};
 }
 
 componentDidMount() {
  this.timer = setInterval(function () {
   var opacity = this.state.opacity;
   opacity -= .05;
   if (opacity < 0.1) {
    opacity = 1.0;
   }
   this.setState({
    opacity: opacity
   });
  }.bind(this), 100);
 }
 
 render () {
  return (
   <div style={{opacity: this.state.opacity}}>
    Hello {this.props.name}
   </div>
  );
 }
}
 
ReactDOM.render(
 <Hello name="world"/>,
 document.body
);

运行结果

实例讲解React 组件生命周期

以下实例初始化 state , setNewnumber 用于更新 state。所有生命周期在 Content 组件中。

class Button extends React.Component {
 constructor(props) {
   super(props);
   this.state = {data: 0};
   this.setNewNumber = this.setNewNumber.bind(this);
 }
 
 setNewNumber() {
  this.setState({data: this.state.data + 1})
 }
 render() {
   return (
     <div>
      <button onClick = {this.setNewNumber}>INCREMENT</button>
      <Content myNumber = {this.state.data}></Content>
     </div>
   );
  }
}
 
 
class Content extends React.Component {
 componentWillMount() {
   console.log('Component WILL MOUNT!')
 }
 componentDidMount() {
    console.log('Component DID MOUNT!')
 }
 componentWillReceiveProps(newProps) {
    console.log('Component WILL RECEIVE PROPS!')
 }
 shouldComponentUpdate(newProps, newState) {
    return true;
 }
 componentWillUpdate(nextProps, nextState) {
    console.log('Component WILL UPDATE!');
 }
 componentDidUpdate(prevProps, prevState) {
    console.log('Component DID UPDATE!')
 }
 componentWillUnmount() {
     console.log('Component WILL UNMOUNT!')
 }
 
  render() {
   return (
    <div>
     <h3>{this.props.myNumber}</h3>
    </div>
   );
  }
}
ReactDOM.render(
  <div>
   <Button />
  </div>,
 document.getElementById('example')
);

运行结果

实例讲解React 组件生命周期

以上就是实例讲解React 组件生命周期的详细内容,更多关于React 组件生命周期的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JS实现浏览器菜单命令
Sep 05 Javascript
开发跨浏览器javascript常见注意事项
Jan 01 Javascript
jQuery Lightbox 图片展示插件使用说明
Apr 25 Javascript
jQuery数组处理方法汇总
Jun 20 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 Javascript
javascript实现树形菜单的方法
Jul 17 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
关于javascript中dataset的问题小结
Nov 16 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
详细分析React 表单与事件
Jul 08 #Javascript
详解JavaScript之ES5的继承
Jul 08 #Javascript
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 #jQuery
微信小程序拖拽排序列表的示例代码
Jul 08 #Javascript
基于javascript canvas实现五子棋游戏
Jul 08 #Javascript
深度解读vue-resize的具体用法
Jul 08 #Javascript
详解React 条件渲染
Jul 08 #Javascript
You might like
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
PHP贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
微信支付开发告警通知实例
2016/07/12 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
jquery 批量上传图片实现代码
2010/01/28 Javascript
js 获取服务器控件值的代码
2010/03/05 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
Python爬取数据并实现可视化代码解析
2020/08/12 Python
html5开发之viewport使用
2013/10/17 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
2019/11/26 HTML / CSS
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
联想台湾官网:Lenovo TW
2018/05/09 全球购物
Myholidays美国:在线旅游网站
2019/08/16 全球购物
简洁的英文求职信范文
2014/05/03 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
工作会议简报
2015/07/20 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
安全生产奖惩制度
2015/08/06 职场文书
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android