Как обратится к методу класса в React без bind?

Question

[Валерий Чупурнов]

Не так давно на хабре проскочила статья об увеличении производительности React, и там был показан такой антипаттерн:

<SearchCollection onClick={() => { Alert('Click'); }}/>

Мол, проблема этого кода, что при каждой отрисовке создается новая стрелочная функция и в итоге компонент думает, что ему надо отрисоваться заново тоже.
Там же в статье сказали, что bind в этом случае идентичен, так как создает каждый раз новую функцию.

<SearchCollection onClick={::this.clickHandler}/>

Как тут быть, если в this.clickHandler нужно обратится к props к примеру, т.е. к this?
И стоит ли вообще об этом заморачиваться?

Answer 1

[Никита Гущин]

Можно сделать так:

class MyComponent extends PureComponent {
  clickHandler = () => {
     // Так как это стрелочная функция - она будет забиндена при создании элемента (объекта)
  }

  render() {
    return (
      <SearchCollection onClick={this.clickHandler}/>
    )
  }
}

Или так:

class MyComponent extends PureComponent {

  constructor(props, context) {
    super(props, context)
    this.clickHandler = this.clickHandler.bind(this)
  }

  clickHandler() {
  }

  render() {
    return (
      <SearchCollection onClick={this.clickHandler}/>
    )
  }
}

Comments

[Валерий Чупурнов]

Круто, спасибо! А это действительно так, оно правда негативно влияет на отрисовку?

[Никита Гущин]

Валерий Чупурнов: ага. Это тоже самое как создавать каждый раз новый объект и передавать его в props...