Блог

Главная - Вопросы по программированию - Использование thunk для обработки событий onClick. Это более эффективно?

Использование thunk для обработки событий onClick. Это более эффективно?

#reactjs

#reactjs

Вопрос:

 function MyComponent() {
  const handleSomething = (arg) => () => {
    console.log(arg);
  };

  return (
    <div>
      <span onClick={handleSomething("Hello")}>Do something</span>
    </div>
  );
}

Я только что связался с вышеупомянутым синтаксисом thunk, и мне сказали, что он работает лучше, чем приведенный ниже код.

 function MyComponent() {
  return (
    <div>
      <span onClick={()=>{ console.log("Hello") }}>Do something</span>
    </div>
  );
}

Разве handleSomething не будет выполняться при каждом рендеринге, что добавляет дополнительный шаг?

Или, может быть, у компилятора есть какая-то умная оптимизация, которая делает thunk быстрее, чем встроенный?

Комментарии:

1. Повторный рендеринг происходит только при изменениях DOM. Определение функций в компоненте намного чище, чем их запись внутри шаблона JSX.

2. Я понимаю, что это чище и мне это нравится, но я не понимаю, как это может работать быстрее.

3. Компоненты React содержат код, а JSX содержит HTML с привязками данных. Именно так был разработан React. Почему написание функции в компоненте будет медленнее?

4. Поскольку функция thunk будет выполняться при визуализации компонента и возвращать другую функцию для onClick, при записи функции непосредственно внутри onClick пропускается выполнение handleSomething .

Ответ №1:

В компонентах класса просто используйте memoize:

 import memoize from "lodash-es/memoize";

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <span onClick={handleSomething("Hello")}>Do something</span>
      </div>
    );
  }

  handleSomething = memoize(arg => () => {
    console.log(arg);
  }); 
}

Комментарии:

1. Я не знаком с Lodash, но функциональные компоненты имеют хуки useMemo и useCallback для запоминания, однако я не совсем понял концепцию и что именно она делает. В любом случае, этот вопрос больше касается однострочных недорогих функций, которые могут быть записаны непосредственно встроенными в обработчик onClick без ущерба для удобства чтения. Может быть, у компилятора есть какая-то умная оптимизация, которая делает thunk быстрее, чем встроенный?