React Hooks - Как избежать повторного выделения функций при каждом рендере - PullRequest
Новая
       4

React Hooks - Как избежать повторного выделения функций при каждом рендере

0 голосов
/ 01 марта 2019

В классе реагирования я написал бы что-то вроде этого 

class Myclass extends React.Component {
  handleUpdate = info => {
    //do the update
  }

  render() {
    return (
      <SomeMarkup>
        <SomeComponent onUpdate={this.handleUpdate} />
      </SomeMarkup>
    )
  }
}

Если бы использовал функцию, я мог бы просто написать следующее 

function MyFunction() {
  function handleUpdate(info) {
    // do the update
  }
  return (
    <SomeMarkup>
      <SomeComponent onUpdate={handleUpdate} />
    </SomeMarkup>
  )
}

... но с этим я быпереопределять функцию на каждом рендере.Есть ли какая-нибудь хитрость, которая запомнила бы функцию обработчика между рендерами?Или я должен просто переместить обработчик из области рендеринга?(Перемещение его из области рендеринга требует от меня явной передачи большего количества параметров, поскольку у меня нет прямого доступа к области действия функции.)

1 Ответ

0 голосов
/ 01 марта 2019

Это именно тот сценарий, для которого useCallback.Функция по-прежнему объявляется каждый раз с помощью useCallback, но возвращаемая функция запоминается, так что если она передается как свойство дочерним элементам, дочерние элементы получат непротиворечивую функцию, если только она не должна изменяться из-за изменения зависимостей.

Пожалуйста, посмотрите мой недавний связанный ответ здесь, который подробно показывает, как useCallback работает: Проблема с простым примером React Hooks useCallback

Вот еще один связанный ответ: React HooksuseCallback заставляет дочерний элемент перерисовывать

...