Мы должны избегать привязки методов внутри рендера, потому что во время повторного рендеринга он будет создавать новые методы вместо использования старых, что повлияет на производительность.
Так что для таких сценариев, как это:
<input onChange = { this._handleChange.bind(this) } ...../>
Мы можем связать метод _handleChange
либо в конструкторе:
this._handleChange = this._handleChange.bind(this);
Или мы можем использовать синтаксис инициализатора свойства:
_handleChange = () => {....}
Теперь давайте рассмотрим случай, когда мы хотим передать некоторый дополнительный параметр, скажем, в простом приложении todo, щелкнув по элементу, мне нужно удалить элемент из массива, для этого мне нужно передать либо индекс элемента, либо имя todo в каждом метод onClick:
todos.map(el => <div key={el} onClick={this._deleteTodo.bind(this, el)}> {el} </div>)
А пока предположим, что имена todo уникальны.
Согласно DOC:
Проблема с этим синтаксисом заключается в том, что каждый раз при рендеринге компонента создается новый обратный вызов.
Вопрос:
Как избежать этого способа привязки внутри метода рендеринга или каковы альтернативы этому?
Пожалуйста, предоставьте любую ссылку или пример, спасибо.