JSバインディングコールバックに反応する

Question

実際にポイントを証明するにはどうすればいいですかすべてのレンダリング反応が新しいコールバック矢印機能を作成した後、悪いアプローチです。コードの下を参照してください -

class DankButton extends React.Component { 
    render() { 
    // Bad Solution: An arrow function! 
    return <button onClick={() => this.handleClick()}>Click me!</button> 
    } 

    handleClick() { 
    this.logPhrase() 
    } 

    logPhrase() { 
    console.log('such gnawledge') 
    } 
} 

また、下の矢印関数クラスのプロパティ関数が実際にどのように動作するかを？

class DankButton extends React.Component { 
    render() { 
    return <button onClick={this.handleClick}>Click me!</button> 
    } 

    // ES6 class property-arrow function! 
    handleClick =() => { 
    this.logPhrase(); 
    } 

    logPhrase() { 
    console.log('such gnawledge') 
    } 
} 

Answer 1

私は私はあなたが私はあなたの質問から理解として、私たちは事実上のポイント

を証明するにはどうすればよい

によって正確に何を意味するか理解していない、私はあなたと仮定します上記のの最初のの例では、関数の新しいインスタンスが作成されていることを認識してください。念頭に置いて
、あなたが作成しobjectまたはfunctionの新しいインスタンス渡すとき、あなたはそれについて考えるとき、少なくとも2つの問題があります。

1. たぶんそれほど重要ほとんどの場合は、あなたがより多くを消費それぞれのメモリは レンダリングされます。

2. さらに重要なのは（私の意見では）あなたが潜在的にそれぞれの上に新しい 小道具をレンダリング渡すことによって反応するの Reconciliation and Diffing Algorithmを中断することができ、これは、子供 コンポーネントの再描画するので、パフォーマンスの問題が発生する可能性が生じます。

Answer 2

矢印関数クラスプロパティ関数が実際に動作します。

申し訳ありませんが、bindを使用している場合、新しい機能のインスタンスを証明する方法はわかりませんが、後者を行うことができます。

console.logthisあなたの矢印機能では、通常の機能として行われているものと比較してください。いつでもbindを使用しないでください。矢印関数のthisはコンポーネントのコンテキストになりますが、functionはwindowまたはundefinedのいずれかになります。