ReactJS setInterval bind (this)

对于ReactJS生命周期中，第一次渲染React.render()调用时，会触发componentDidMount()，组件会生成对应的DOM结构。下面的demo中通过componentDidMount()方法设置了一个定时器，每隔100毫秒重新设置组件的透明度，并重新渲染
令我不解的是，定时器后面出现了bind(this)

原理

①首先bind就是改变函数运行时的this,请自行查看bind函数
②代码中调用了setInterval(fun, time)，其实等同于window.setInterval(fun, time)
③如果没调用bind(this)，那么传入setInterval的fun的this 指向是window对象
④给setInterval函数bind(this)，这里的this指向就是componentDidMount()中的this,也就是这个react对象，这样才能正确访问this.state,this.setState等

扩展

setInterval和setTimeout的函数内的this指向相同的，都是指向window对象，所以在使用的时候都需要进行链式编程.bind(this),修改this的指向

在React组件内使用jQuery进行Ajax请求的时候，回调函数中的this会指向jQuery对象，同理需要加上.bind(this)

ajax.png