Так что мне потребовалось немного времени, чтобы разобраться в этом, но суть в том, что использовать функции Arrow и привязку функций в элементах JSX — это плохая практика.
class MyWrongExample extends React.Component<TestInterfaceProps> {
constructor(props: TestInterfaceProps) {
super(props);
}
private handleOnClick = (): void => {
// Handle on click event
};
private getButton = (): JSX.Element => {
// The use of a arrow function here is a bad idea.
return <button onClick={() => this.handleOnClick()}>Click Me</button>;
};
public render = (): JSX.Element => {
return (
<div><span>{ this.state.notice }</span>{ this.getButton() }</div>
);
};
}В приведенном выше примере мы используем локальное состояние, в этом случае, если состояние изменится, метод `render()` повторно отобразит компонент, однако есть одна загвоздка. Метод getButton, который возвращает элемент JSX, использует встроенную функцию стрелки для обработки события щелчка. Это плохая идея с точки зрения производительности. Каждый раз, когда компонент повторно отображается, функция стрелки воссоздает себя в памяти, добавляя предыдущую ссылку в кучу мусора.
Чтобы разбить его дальше, происходит то, что когда когда-либо вызывается render(), особенно с локальным состоянием, функция стрелки снова назначается новому ссылочному значению. Таким образом, в компоненте реакция увидит его как новое значение для этого свойства, и оно снова будет отображаться.
Таким образом, в списке из 250 результатов поиска и каких-либо изменений в контейнере верхнего уровня реакция проверяет, нужно ли повторно отображать какие-либо дочерние элементы. Если только один из этих дочерних элементов имеет функцию стрелки, или реакция привязки будет повторно отображать все 250 из них.
Эта куча может накапливаться и вызывать перегрузку, особенно если эта функция дескриптора собирает данные, а также замедлять работу пользователя и, возможно, в некоторых случаях вызывать сбой вашего браузера.
