实例讲解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 相关文章推荐
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
actionscript与javascript的区别
May 25 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
Vue父子模版传值及组件传值的三种方法
Nov 27 Javascript
解决vue props 拿不到值的问题
Sep 11 Javascript
vue总线机制(bus)知识点详解
May 10 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 array_intersect()函数使用代码
2009/01/14 PHP
解析PHP中一些可能会被忽略的问题
2013/06/21 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
Javascript之String对象详解
2016/06/08 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
Python解释执行原理分析
2014/08/22 Python
python登录豆瓣并发帖的方法
2015/07/08 Python
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
Python字符串的一些操作方法总结
2019/06/10 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
英国足球店:UK Soccer Shop
2017/11/19 全球购物
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
物业管理计划书
2014/01/10 职场文书
父亲的菜园教学反思
2014/02/13 职场文书
幼儿园元旦活动感言
2014/03/02 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
PHP中多字节字符串操作实例详解
2021/08/23 PHP