コンストラクタでbindした関数への引数指定する方法

初めまして。

コンストラクタで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件

ベストアンサー

  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event) {
    console.log(event.target.getAttribute('data-message'));
    // or
    // console.log(event.target.dataset.message);

  }
  
  render() {
    const message = 'message';
    return (
      <button data-message={message} onClick={this.handleClick}>Hello</button>
    )
  }

やるとしたら、こんな感じですかね？

こちらどのような書き方をすれば handleClick に param を引数として渡せるのでしょうか？

この問いに対して素直に答えると、どうしてもthis.handleClick.bind(this, param)のようにならざるを得ないと思います。（または、これに類似したほぼ同じようなこと)

引数に与えたい値が動的なものではなく、あらかじめ決まっている固定のものであれば、constructorの中で、this.handleClick = this.handleClick.bind(this, 'message')のようにして、事前に引数に値をセットしてあげることもできると思います。

投稿2018/04/17 00:34

編集2018/04/17 00:52