javascript - 关于react里的一个疑问

问题描述

问 题

下面是一段react写的简单动态效果，但是有分地方不清楚。在定时器里的结尾为什么要加bind(this),它的作用是什么，我缺了那一块的知识点导致我不清楚要加bind(this)的？

var Hello = React.createClass({
  getInitialState: function () {
    return {
      opacity: 1.0
    };
  },

  componentDidMount: function () {
    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: function () {
    return (
      <div style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </div>
    );
  }
});

ReactDOM.render(
  <Hello name="world"/>,
  document.body
);

解决方案

两个知识点：

• bind()

• this 指向

具体到这个例子，如果不使用bind()而直接调用 setInterval 中定义的匿名函数，函数内部的 this 是指向 window 对象的。匿名函数内部显然需要 this 指向当前组件，才能读取state属性/调用setState()方法，所以使用bind()为匿名函数绑定当前执行环境的 this，即当前组件。

这篇关于javascript - 关于react里的一个疑问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！