初めまして。
コンストラクタでbindした関数への引数を指定する方法を教えていただけないでしょうか。
現在アサインされているプロジェクトで React のパフォーマンスチューニングに取り組んでおります。
Webで調べたところ下記のようなアロー関数、bindの使い方ではレンダリングされる度に関数が作成されてしまいパフォーマンスに影響すると・・・。
javascript
1render() { 2 const param = 'foo'; 3 return <button onClick={() => this.handleClick(param)}>Click Me</button>; 4}
javascript
1render() { 2 const param = 'foo'; 3 return <button onClick={this.handleClick.bind(this, param)}>Click Me</button>; 4}
対策として下記のようにコンストラクタで関数をbindしておき、onClickイベントにはbind済みの関数の参照を渡すことによってレンダリングされる度に関数が作成されるということはなくなると学びました。
javascript
1constructor(props) { 2 super(props); 3 this.handleClick = this.handleClick.bind(this); 4} 5 6render() { 7 const param = 'foo'; // param はどのように handleClick 関数に渡す? 8 return <button onClick={this.handleClick}>Click Me</button>; 9}
ただ、この方法では変数 param を handleClick に渡す方法が思いつきません。
こちらどのような書き方をすれば handleClick に param を引数として渡せるのでしょうか?
以上、よろしくお願いいたします。
https://reactjs.org/docs/faq-functions.html
https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/04/17 00:48
2018/04/17 00:50