javascript - Une question sur React

Question

Ce qui suit est un simple effet dynamique écrit en réaction, mais certaines parties ne sont pas claires. Pourquoi devons-nous ajouter bind(this) à la fin du minuteur ? Quelle est sa fonction ? Il me manque une connaissance qui ne me rend pas clair sur l'ajout de 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 (
      <p style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </p>
    );
  }
});

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

Answer 1

Deux points de connaissances :

• bind()

• cela pointe vers

Spécifiquement pour cet exemple, si vous n'utilisez pas bind()而直接调用 setInterval 中定义的匿名函数，函数内部的 this 是指向 window 对象的。匿名函数内部显然需要 this 指向当前组件，才能读取state属性/调用setState()方法，所以使用bind() pour lier la fonction anonyme à celle de l'environnement d'exécution actuel, c'est-à-dire le composant actuel.

Answer 2

Il suffit de distinguer les plusieurs suivants pour le savoir.

1.bind(this)À quoi cela fait-il référence ?
2. Lorsque bind(this) n'est pas utilisé, à quoi cela fait-il référence dans la fonction lorsque le rappel est exécuté.
3. Après bind(this), lorsque le rappel est exécuté, à quoi fait référence this dans la fonction.