私は最近、新しい関数を毎回作成するので、render関数でbind(this)を使うのは良いことではないと最近知らされました。したがって、私は矢印の関数を使用して、2つの<button>
要素の下に示すように移動しています。.bind(this)から矢印関数へのコード変換
私が持っている質問はマップ機能です。これは.bind(this)も使用しています。これをES6/7形式に変換する方法はありますか?
return (
<div>
<button onClick={()=>this.changeDisplayType("images")}>Images</button>
<button onClick={()=>this.changeDisplayType("audio")}>Audio</button>
{
resources.map(function(resource) {
return (
<div key={resource.id}>
<div style={{fontWeight: "bold"}}>{resource.name}</div>
<div>({resource.info})</div>
</div>
)
}.bind(this))
}
</div>
)
また、.bind(これ)を完全に削除でき、私のコードはまだ機能することに気付きました。それゆえ、私はそれがそこにあるかどうか、それがどんな違いを生み出すのだろうとも思っています
ああ、はい、あなたは正しいです、ありがとうございます。私は私の別のモジュールをコピーしていて、ちょうどこの単語を使わない小さなサブセットを使っていました。だから、私がすべてを完全に理解していることを確認するだけです。地図本体内で 'this'を使用すると、関数が再作成されないため、矢印関数がより効率的になります。しかし、私が地図本体に 'this 'という言葉を使わないと、' .bind(this) 'を離れることができ、どちらのアプローチも互いにほぼ効率的になります。 – kojow7
マップ本体で 'this'を使用していない場合は、この部分を' .bind(this) 'と矢印関数で残して、私の知識矢印関数に従って関数を再作成するとそれぞれの再レンダリング時に新しい関数を作成しますこれを避けたい場合は、 'resources.map(this._functionName)'のように記述し、このメソッドをコンストラクタにバインドすると、ただ1つのリファレンスだけがそこに存在するようになります。 –
さて、あなたの答えと詳細な説明に感謝します。私は矢印の機能について読んでいたことを誤解していたに違いないようです。 – kojow7