React：なぜonClickハンドラで矢印関数が使用されていますか？

Question

私が反応学び、そしてあなたがview here in CodePen.

私は矢印の機能が内部に戻されている広場コンポーネントのonClickプロパティでどのように機能するかについて混乱していますすることができ、単純な三目並べゲームを作成するためにthis tutorialを踏襲していますボードコンポーネントのrenderSquare機能の説明：onClick={() => this.props.onClick(i)}。また、同様に私はonClick={ (i) => this.handleClick(i)}を持っているゲームコンポーネントも同様です。私は矢の機能なしでそれを書くことができると思った（ちょうどonClick={this.handleClick(i)}のように）が、これはゲームを壊す。

Answer 1

onClickは機能を期待しています。矢印関数には独自のものがありませんthis;囲まれた実行コンテキストの値が使用されます（this）。 アロー機能は、この場合には、それは関数を呼び出しますし、それはその戻り値を渡しますので、あなたが

onClick={this.handleClick(i)} 

のようにそれを実行したときにそれが動作しない、次の

onClick={this.handleClick.bind(this,i)} 

ための代替品ですレンダーが呼び出されるたびに評価されます。したがって、インスタンスsetStateの再レンダリングを引き起こすonClick関数で何かをやっている場合、アプリケーションは無限ループに入ります。したがって、onClickは関数であり、値ではないので、onClickハンドラから関数を返さない限り、直接呼び出すべきではありません。

矢印機能は、上記機能に