В React Hook useCallback, как (a, b) используются - PullRequest
Новая
       31

В React Hook useCallback, как (a, b) используются

1 голос
/ 14 марта 2019

В документе о перехватах реакции они приводят пример использования useCallback Перехватить реакцию следующим образом: 

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

У меня есть пример, который имеет обратный вызов, который вызывается с параметром (не a или b), и кажется, что он работает. Пожалуйста, объясните мне, что такое a, b и как они предназначены для использования. Ниже мой рабочий код с использованием обратного вызова. 

const signupCallback = email => {
  return console.log(`sign up called with email ${email}`);
};

const memoizedsignupCallback = useCallback(() => {
  signupCallback();
}, []);

и вызов, который использует обратный вызов. 

<SignMeUp signupCallback={memoizedsignupCallback} />

Ответы [ 3 ]

1 голос
/ 01 апреля 2019

Вы правы в том, что useCallback используется для запоминания функции.Вы можете думать о a и b (или обо всем, что используется во втором аргументе useCallback), как о ключах для запоминаемой функции.При изменении a или b создается новая функция.

Это полезно, особенно если вы хотите, чтобы что-то вызывалось на onClick, для которого требуются некоторые значения из реквизитов вашего компонента.

Как и в вашем примере, вместо создания новой функции для каждого рендера: 

const Signup = ({ email, onSignup }) => {
  return <button onClick={() => onSignup(email) } />;
}

вы будете использовать useCallback: 

const Signup = ({ email, onSignup }) => {
  const onClick = useCallback(() => onSignup(email), [email, onSignup]);
  return <button onClick={onClick} />;
}

Это обеспечитновая функция создается и передается в onClick только в случае изменения email или onSignup.

1 голос
/ 14 марта 2019

Это массив значений, от которых зависит ловушка. Когда эти значения изменяются, это вызывает повторное выполнение ловушки. Если вы не передадите этот параметр, хук будет вычисляться каждый раз, когда компонент рендерится. Если вы передадите [], он будет оцениваться только при начальном рендере.

Документация по этому вопросу доступна здесь: https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect.

Если вы передадите этот массив параметров, очень важно включить все состояния, которые могут измениться и на которые есть ссылки в закрытии ловушки. Если вы забудете включить что-либо, значения в закрытии станут устаревшими. Существует правило eslint, которое проверяет эту проблему (связанное обсуждение также содержит более подробную информацию): https://github.com/facebook/react/issues/14920.

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

Использование параметра a, b зависит от того, берет ли функция, которую вы пытаетесь выполнить, из охватывающей области или нет.

При создании функции, такой как 

const signupCallback = email => {
  return console.log(`sign up called with email ${email}`);
};

const memoizedsignupCallback = useCallback(() => {
  signupCallback();
}, []);

В вышеприведенном случае memoizedsignupCallback создается при первоначальном рендеринге, и он будет иметь доступ к значениям из закрывающего замыкания при его создании.Нет, если вы хотите получить доступ к значению, которое находится в его закрытии, но может быть обновлено из-за некоторого взаимодействия, вам нужно заново создать запомненный обратный вызов и, следовательно, вы передадите аргументы для использования CallCallback.

Однако в вашем случае значение, используемое memoizedsignupCallback, передается вызывающей стороной при выполнении метода и, следовательно, будет работать правильно

DEMO

...