Ответ 1
Это лучше всего использовать, когда вы хотите предотвратить ненужные повторные рендеры для лучшей производительности.
Сравните эти два способа передачи обратных вызовов дочерним компонентам, взятым из React Docs:
1. Функция стрелки в рендере
class Foo extends Component {
handleClick() {
console.log('Click happened');
}
render() {
return <Button onClick={() => this.handleClick()}>Click Me</Button>;
}
}
2. Привязка в конструкторе (ES2015)
class Foo extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('Click happened');
}
render() {
return <Button onClick={this.handleClick}>Click Me</Button>;
}
}
Предполагая, что <Button> реализован как PureComponent, первый способ заставит <Button> перерисовывать каждый раз, когда <Foo> перерисовывает, потому что новая функция создается в каждом вызове render(). Во втором случае метод handleClick только один раз в конструкторе <Foo> и повторно используется при рендеринге.
Если мы переведем оба подхода на функциональные компоненты с помощью хуков, это эквиваленты (вроде):
1. Функция стрелки в рендере → незапамятный обратный вызов
function Foo() {
const handleClick = () => {
console.log('Click happened');
}
return <Button onClick={handleClick}>Click Me</Button>;
}
2. Bind in Constructor (ES2015) → Мемозированные обратные вызовы
function Foo() {
const memoizedHandleClick = useCallback(
() => console.log('Click happened'), [],
); // Tells React to memoize regardless of arguments.
return <Button onClick={memoizedHandleClick}>Click Me</Button>;
}
Первый способ создает обратные вызовы при каждом вызове функционального компонента, но во втором случае React запоминает функцию обратного вызова, и обратный вызов не создается несколько раз.
В большинстве случаев это нормально делать первым способом. Как говорится в документе React:
Можно ли использовать функции стрелок в методах рендеринга? В общем, да, это нормально, и часто это самый простой способ передать параметры в функции обратного вызова.
Если у вас есть проблемы с производительностью, обязательно оптимизируйте!