今天使用react做钟表，自然用到了setInterval，但是出现this指向不明的问题。

 <html>

 <head>

 <meta charset="UTF-8" />

 <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>

 <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>

 <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

 </head>

 <body>

 <div id="example"></div>

 <script type="text/babel">

 class Clock extends React.Component {

   constructor(props) {

     super(props);

     this.state = {date: new Date()};

   }

   componentDidMount() {

     this.timerID = setInterval(

       () => this.tick(),

       1000

     );

   }

   componentWillUnmount() {

     clearInterval(this.timerID);

   }

   tick() {

     this.setState({

       date: new Date()

     });

   }

   render() {

     return (

       <div>

         <h1>Hello, world!</h1>

         <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>

       </div>

     );

   }

 }

 ReactDOM.render(

   <Clock />,

   document.getElementById('example')

 );

 </script>

 </body>

 </html>

　　在componentDidMount中setInterval使用了ES6的箭头函数，有建议可以使用ES6以前的函数是这样

 let that = this;

 this.timerID = setInterval(function () {

   return that.tick();

 },1000);

　　这样使可以的，但是过于繁琐，观察了一下，setInterval第一个参数不就是传一个函数就行嘛，干嘛这么费劲，于是我这样写

 this.timerID = setInterval(

   this.tick,

 1000);

　　结果报错了

　　什么？找不到setState，那就是this不对啊，果然setInterval中第一个参数若果是一个裸函数的话，函数中this指向的是window。

　　于是改为

 this.timerID = setInterval(

   this.tick.bind(this),

 1000);

　　完美运行！

setInterval中this的更多相关文章

  1. 利用函数回调获取setInterval中返回的值

    我们都知道,定时器里面想返回值如果你用return根本没作用,那么怎么拿到定时器所返回的值呢, 现在只需要利用回调函数,给主函数传一个函数类型的参数callback,然后把想要返回的num再传给cal ...

  2. 关于setInterval和setTImeout中的this指向问题

    前些天在练习写一个小例子的时候用到了定时器,发现在setInterval和setTimeout中传入函数时,函数中的this会指向window对象,如下例: var num = 0; function ...

  3. 【转】JS中setTimeout和setInterval的最大延时值详解

    前言 JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.而这篇文中主要给大家介绍的是关于JS中setTi ...

  4. JavaScript中setInterval关闭问题

    这篇博客主要记录下学习中碰到的一些问题(以防忘记). JavaScript中,在setInterval中关闭该定时器,但是此次执行也会完成,用语言描述不太容易,直接看代码: var i=1; var ...

  5. 【原】理解javascript中的this

    最近的文章基本都是总结javascript基础内容的,因为我觉得这些东西很重要.而且很多时候你觉得你理解了,其实并没有你自认为的那么理解.十月份没怎么写文章,因为国庆出去玩的比较久,心变野了,现在是时 ...

  6. setTimeout和setInterval的各自使用场景

    默认的 setTimeout 只执行一次, 清除用clearTimeout setInterval 每间隔指定的时间, 就执行一次, 清除用clearInterval 但是, setTimeout也可 ...

  7. 修改setInterval作用域

    Hello,今天和大家分享如何修改setInterval作用域. 0.引子 最近在做一个项目的时候需要开发一个图片轮播显示的组件,在实现过程中遇到了关于setInterval作用域的问题. Slide ...

  8. JavaScript中的该如何[更好的]做动效

    在用js写动画的时候,无非使用 setTimeout/setInterval 或者 requestAnimationFrame 来处理动画(在jquery的代码里也是这么干的),本文主要为了记录下两者 ...

  9. node.js之setTimeout()、clearTimeout()与 setInterval()与clearInterval()

    1.setTimeout函数与clearTimeout函数 setTimeout(cb,ms,[arg],[...])延时一定时间执行回调函数该函数中cb参数为必填函数,为需要执行的回调函数ms为经过 ...

随机推荐

  1. CentOS系统下安装python3+Django

    转载:CentOS系统下安装python3+Django 1.首先用yum安装下vim,因为CentOS 7可能根本没自带完整vim,经常出现输入乱码:yum -y install vim 2.安装开 ...

  2. MySql 主从复制 mysql-proxy实现读写分离

    1.安装和配置Docker 服务器版本阿里云CentOS7.4 docker版本18.06.0-ce docker安装步骤https://docs.docker.com/install/linux/d ...

  3. Spring IOC原理解读 面试必读

    Spring源码解析:Bean实例的创建与初始化 一. 什么是Ioc/DI? 二. Spring IOC体系结构 (1) BeanFactory (2) BeanDefinition 三. IoC容器 ...

  4. Windows 安装JDK

    Windows 安装JDK jdk为java开发工具,jre为java运行环境,安装一个jdk版本会把两个一起装 步骤: 1.在官网下载jdk:http://www.oracle.com/techne ...

  5. 虚拟机下hadoop1.1.2安装（单机版）与（集群版）

    (1)我的电脑环境 CentOS6.5,64位,在虚拟机下实现. (2)jdk1.6的安装 jdk我用的是1.6.0_27,自己在网上下载jdk-6u27-linux-x64.zip 先在/usr/l ...

  6. react将字符串转义成html语句

    在使用reactjs库的时候,会遇到将一段html的字符串,然后要将它插入页面中以html的形式展现,然而直接插入的话页面显示的就是这段字符串,而不会进行转义,可以用以下方法插入,便可以html的形式 ...

  7. find 详解

    find 详解 原文请访问http://itlab.idcquan.com/linux/SHELL/949102.html 当最初登录到系统中时, u m a s k命令确定了你创建文件的缺省模式.这 ...

  8. POI导出excel列宽自适应

    让单元格宽度随着列和单元格值的宽度自适应: //存储最大列宽 Map<Integer, Integer> maxWidth = new HashMap<>(); // 将列头设 ...

  9. Java安装及基础01

    Java特性: (1)java语言是面向对象的语言 (2)编译一次,到处运行(跨平台) (3)高性能 配置环境变量: JAVA命名规则: (1)常量命名规则:每个字母都大写(POEPLE_PRE_NO ...

  10. uboot - the bootloader of linux

    [转载]https://blog.csdn.net/kernel_yx/article/details/53045424 最近一段时间一直在做uboot移植相关的工作,需要将uboot-2016-7移 ...