今天使用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. 安卓动态分析工具【Android】3D布局分析工具

    https://blog.csdn.net/fancylovejava/article/details/45787729 https://blog.csdn.net/dunqiangjiaodemog ...

  2. 源码包安装php7.2

    含有的命令:yum,wget,tar,./configure,make,cp,ln,source,php -v ==安装== [root@ycj ~]# yum -y install libxml2 ...

  3. JAVAjdk第一次作业

    第一次的作业由于对JAVA程序的不熟悉以及jdk环境变量的配置问题,第一次的作业写了很久

  4. 尽量避免把弹窗加在window上，可以考虑把弹窗封装到控制器里面

    封装自定义弹窗,一般来说有两种选择: 在[[[UIApplication sharedApplication] delegate] window]上add自定义view: present一个模态Con ...

  5. 爬虫中报 SSLError 错误

  6. stm32f407以太网及USB OTG快速开发

    stm32f407以太网及USB OTG快速开发 引言 想要快速完成网络协议栈和USB OTG功能,使用ST自家的工具STM32CubMx再好不过的了.如果你还不会使用,别着急下面我会一步一步的用图片 ...

  7. tensorflow-Inception-v3模型训练自己的数据代码示例

    一.声明 本代码非原创,源网址不详,仅做学习参考. 二.代码 # -*- coding: utf-8 -*- import glob # 返回一个包含有匹配文件/目录的数组 import os.pat ...

  8. #学号 20175201张驰 《Java程序设计》第3周学习总结

    学号 20175201张驰 <Java程序设计>第3周学习总结 教材学习内容总结 第四章 每个源文件里可以包含多个类,但只能有1个主类:类中可以包含变量和方法 变量有两种:实例变量和类变量 ...

  9. Oracle中exp导出与imp导入的参数(full,owner/formuser/touser)测试

    1.exp导出的参数(FULL,OWNER)测试 先知道的一点是full不能与owner共存,还有都是以用户的方式导出(在这里),其中不仅仅包括表,这可能就是下面报warnings的原因,因为Orac ...

  10. Go语言 切片长度和容量

    package main import "fmt" func main() { s := []int{2, 3, 5, 7, 11, 13} printSlice(s) // Sl ...