React学习笔记(6)ES6

昨天在按照官网上学习State & 生命周期，写时钟例子时发现对ES6语法很多地方还是不熟悉。下面代码是我刚开始写的setInterval方法，时钟不仅没有更新，直接页面就报错了。

 // 当我们需要访问真实的 DOM 时，这个方法就经常用到
    componentDidMount() {
        // 时间更新setInterval方法
     this.timerID = setInterval(function () {
            this.setState({
                date: new Date()
            });
        },1000);
    }

页面直接报错

TypeError: this.setState is not a function

百度了下说这种问题是在function(){function(){}}fn套fn的状态下没有缓存this 使this没有指向正确的组件实例化对象 导致访问不到setState方法。
官网上使用的箭头函数，虽然java8中lambda看起来跟这个有点像，但区别还是蛮大的。

this.timerID = setInterval(()=> this.tick(),1000);

简单了解了下箭头函数跟function的区别。

箭头函数并不是简单的function(){}匿名函数的简写语法糖，实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，在编写函数时就已经确定了。而匿名函数的this指向运行时实际调用该方法的对象，无法在编写函数时确定。
看起来还是有点不知所云，大概明白上面我写的function里面调用了setInterval函数，该函数1000毫秒后调用我们定义的函数时，实际上是window对象调用的，所以这时匿名函数的this是指向window。如果用function方式就需要指明this，写法如下。

 componentDidMount() {
        // 时间更新setInterval方法
        // this.timerID = setInterval(()=> this.tick(),1000);

        var that = this;
        this.timerID = setInterval(function () {
            that.setState({
                date: new Date()
            });
        },1000);
    }

ES6语法还需要查漏补缺，学习一下。好多东西凭借自己的理解难免会出现错误。