() => {}構文の使用、コンストラクタでのバインディング、小道具でのバインディングなどの記事を読んだことがありますが、わかりましたが、バインドthisパフォーマンス上のコストがかかり、矢印関数を使用した自動バインディングを実行すると、毎回新しい匿名関数が作成されるため、コストがかかります。「React-ES6 way」のパラメータを持つハンドラのバインド
この問題を処理する最も効果的な「リアクション方法」は何ですか？コンストラクタにバインド
は、このようなパラメータを渡す必要はありません機能、のために働くようだ：
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this)
}
が、どのように我々はそれを結合することなく、のparamsを渡すバインディング機能を処理しますこのような小道具、：
<li onClick={this.handleClick.bind(this, item.id)} />{item.name}</li>
コンストラクタでthisを結合して、一度だけバインドバインドされた関数の中で小道具結果にnullまたはundefinedを結合していますか？
私が持っている誤解で私を修正してください。この問題の解決策は、もっとよく知られていて、普遍的でなければならないようです。それは、私がただの岩の下に住んでいないのであれば！
EDIT：
でも抽象化して、クリックハンドラをレンダリングする一つ一つのアイテムにバインドされませんか？記事hereで
、彼らはクリックハンドラーを結合避けるために、この例を与えるが、React.createClassは、メソッドの自動バインディングを行いますので、私は、これは実際にレンダリングするすべての項目にバインドされていませんどのように表示されないのですか？
var List = React.createClass({
render() {
let { handleClick } = this.props;
// handleClick still expects an id, but we don't need to worry
// about that here. Just pass the function itself and ListItem
// will call it with the id.
return (
<ul>
{this.props.items.map(item =>
<ListItem key={item.id} item={item} onItemClick={handleClick} />
)}
</ul>
);
}
});
var ListItem = React.createClass({
render() {
// Don't need a bind here, since it's just calling
// our own click handler
return (
<li onClick={this.handleClick}>
{this.props.item.name}
</li>
);
},
handleClick() {
// Our click handler knows the item's id, so it
// can just pass it along.
this.props.onItemClick(this.props.item.id);
}
});
誰かがこれを説明できますか？ これは、ListItemの各レンダリングをバインドしないように見えますが、React.createClassの自動バインディングのために、それはやっていますか？
この例では、createClassの代わりにclass List extends Componentという構文を使用しましたが、this.handleClickは未定義です。handleClickメソッドがクラスにバインドされていないためです。一日の終わりに
、単に冗長性をクリーンアップし、実際に結合方法を減らすことによって、パフォーマンスが向上しないことが表示されます...あなたの<li onClick={this.handleClick.bind(this, item.id)} />{item.name}</li>
については
パフォーマンスは絶対にここで問題ではありません。パフォーマンス上の問題が発生する前に、何千もの要素を60fpsで更新する必要があります。リアクション自体はガベージコレクションではなくボトルネックになりますので問題はありません。 –
私はそれを認識しませんでした。ご意見ありがとうございます！ – jacoballenwood