なぜ1つの関数がバインディングを必要とし、もう1つはバインディングを必要としないのですか？

Question

私はちょうどReactとJavaScriptを学び始めました。両方​​とrender機能があるクラスのthisオブジェクトを使用し、

class Toggle extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = {isToggleOn: true}; 
     this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
     this.setState(prevState => ({ 
      isToggleOn: !prevState.isToggleOn 
     })); 
    } 

    render() { 
     return (
      <button onClick={this.handleClick}> 
       {this.state.isToggleOn ? 'ON' : 'OFF'} 
      </button> 
     ); 
    } 
} 

私はそれを参照してください方法：
チュートリアルを行っている間、私は、トグルボタンを作成し、コンポーネントのこの例のコードになりましたその範囲外（右？）

なぜ、それを​​にバインドするだけですか？

Answer 1

どのような反応クラスでも、componentWillMount、componentDidMount、renderなどの関数は、要素のレンダリング中に内部的に反応して呼び出され、決してこれらのメソッドを呼び出すことはありません。

呼び出し中にスコープが決定されたので、適切なスコープでこれらのメソッドを呼び出す/バインドするための反応のジョブです。これらの関数については気にする必要はありません。

しかし、上記の例のhandleClickのような他の関数は、私たちが作成したメソッドであり、反応することは何も知られていません。また、このメソッドの呼び出しは、私たちによって定義されます（ボタンがクリックされたとき）。そこで、このメソッドを適切なスコープで呼び出すかバインドするのが私たちの仕事です。

私たちは上記の例ではhandleClickとnot render関数をバインドするだけです。

Answer 2

Javascriptでは、呼び出し時にスコープが割り当てられます（定義時ではありません）。 bind()handleClick()メソッドをクラスに渡す必要があります。テンプレートから呼び出されたときに、クラスのスコープにはまだthisでアクセスできます。

リアクションテンプレートはjavascript関数にコンパイルされていますので、bind()を入力しなかった場合、onClick={this.handleClick}ハンドラはそれを呼び出すテンプレート関数にスコープされます。あなたの場合は、クリックされたボタンを参照します。

イベントハンドラがthisを参照していない場合は、バインドする必要はありませんが、this.setState()を呼び出しているので、ハンドラがクラススコープを認識できるようにバインドする必要があります。