Comments 7
Я думал холивары про то, можно ли в обработчики компонентов стрелочные функции передавать закончился еще эдак в году 2016ом
if (!Object.prototype.hasOwnProperty.call(this.clickHandlers, key)) {
this.clickHandlers[key] = () => alert(key);
}
Не получится так, что мы будем копить ненужные обработчики событий, которые не удаляются, в случае если список динамический и часто меняется ( корзина товаров, например ).
Легче тогда кнопке передать этот самый key
и потом по нему найти. Обработчик один, то что есть поиск, так он в любом случае будет, если мы работаем только с ключом.
+3
Зачем нужны эти костыли с кешированием функций если проблема описанная во втором примере элементарно решается созданием обработчика события onClick внутри дочернего компонента (в примере это <Button />) и передачи ему отдельным параметром элемента списка?
При клике, сам компонент
При клике, сам компонент
<Button item={listItem} onClick={this.handleClick} \/>
зная переданный ему в параметрах элемент списка, спокойно возвращает связанные с ним данные в хендлер родительского компонента handleClick().0
Затем, что это уже получается не Button, а ItemButton. Который нужно еще отдельно где-то объявить.
Хотя мне тоже кажется, что подход с созданием новых компонентом-оберток проще.
Хотя мне тоже кажется, что подход с созданием новых компонентом-оберток проще.
0
Так в этом суть Реакта: пишите компоненты и инкапсулируйте в них поведение. Вместо этого автор статьи под видом того «как надо» предлагает уродливые костыли. Зачем для каждого из элементов списка создавать свою функцию обработчик и потом заморачиваться с её кешированием, когда можно обойтись одним методом и не сломать при этом сам React?
+1
Не обязательно, достаточно Button
сделать универсальной
class Button extends React.PureComponent {
render() {
return (
<button onClick={this.handleClick}>{this.props.children}</button>
)
}
handleClick: () => {
const {onClick, ...others} = this.props
onClick(others);
}
}
Таким образом можно вообще все что угодно передавать в Button
( но лучше если это будут простые данные, типо id
/key
/name
)
0
Посмотрите на эту библиотеку: https://github.com/timkendrick/memoize-bind
0
Sign up to leave a comment.
Кэширование обработчиков событий и улучшение производительности React-приложений