实例讲解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 相关文章推荐
轻轻松松学习JavaScript
Feb 25 Javascript
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
js实现不重复导入的方法
Mar 02 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
SVG描边动画
Feb 23 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
[js高手之路]原型式继承与寄生式继承详解
Aug 28 Javascript
详解如何使用router-link对象方式传递参数?
May 02 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
python多线程编程方式分析示例详解
2013/12/06 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
详解Python3注释知识点
2019/02/19 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
关于Python解包知识点总结
2020/05/05 Python
python如何建立全零数组
2020/07/19 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
财会自我鉴定范文
2013/12/27 职场文书
机电一体化应届生求职信范文
2014/01/24 职场文书
趣味比赛活动方案
2014/02/15 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
校园安全标语
2014/06/07 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
原生JS实现飞机大战小游戏
2021/06/09 Javascript