实例讲解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中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
node.js中的console.time方法使用说明
Dec 09 Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 Javascript
TypeScript具有的几个不同特质
Apr 07 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
vue.js中npm安装教程图解
Apr 10 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
vue获取data数据改变前后的值方法
Nov 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
PHP读取文件内容的五种方式
2015/12/28 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
python实现简单银行管理系统
2019/10/25 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
反邪教警示教育方案
2014/05/13 职场文书
应届生自荐信
2014/06/30 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
私人委托书格式
2014/09/10 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android
Redis 哨兵机制及配置实现
2022/03/25 Redis
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android
Redis Lua脚本实现ip限流示例
2022/07/15 Redis
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript