В React Hook useCallback, как используются (a,b)
В документации по хукам реакции они приводят пример использования хука использоватьОбратный звонок React следующим образом:
const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);
У меня есть пример с обратным вызовом, который вызывается с параметром (не a или b), и, похоже, он работает. Пожалуйста, объясните мне, что такое a, b и как они предназначены для использования. Ниже мой рабочий код, использующий обратный вызов.
const signupCallback = email => {
return console.info(`sign up called with email ${email}`);
};
const memoizedsignupCallback = useCallback(() => {
signupCallback();
}, []);
и вызов, который использует обратный вызов.
<SignMeUp signupCallback = {memoizedsignupCallback} />
Ответы 3
Это массив значений, от которых зависит хук. Когда эти значения изменяются, это приводит к повторному выполнению хука. Если вы не передадите этот параметр, хук будет оценивать каждый раз, когда компонент отрисовывается. Если вы передадите [], он будет оцениваться только при первоначальном рендеринге.
Документация по этому вопросу доступна здесь: https://reactjs.org/docs/hooks-reference.html#условно-обжигающий-эффект.
Если вы передаете этот массив параметров, очень важно включить все состояния, которые могут измениться и на которые ссылается замыкание хука. Если вы забудете что-то включить, значения в замыкании устареют. Существует правило eslint, которое проверяет эту проблему (связанное обсуждение также содержит более подробную информацию): https://github.com/facebook/реагировать/issues/14920.
Мой вопрос касается а, б. Не []
Как упоминалось в ответе, это переменные, захваченные замыканием. Когда переменные в этом массиве изменяют значение, хук будет выполняться, если они не изменят значение, он не будет выполняться. Другими словами, если массив пуст, изменение «a» не приведет к правильному выполнению «doSomething» снова. Я рекомендую посмотреть связанные ресурсы для более подробной информации.
Использование параметра a, b зависит от того, берет ли функция, которую вы пытаетесь выполнить, их из объемлющей области или нет.
Когда вы создаете функцию, например
const signupCallback = email => {
return console.info(`sign up called with email ${email}`);
};
const memoizedsignupCallback = useCallback(() => {
signupCallback();
}, []);
В приведенном выше случае memoizedsignupCallback создается при начальном рендеринге, и при его создании он будет иметь доступ к значениям закрывающего объекта. Нет, если вы хотите получить доступ к значению, которое находится внутри его закрытия, но может обновляться из-за некоторого взаимодействия, вам нужно воссоздать запомненный обратный вызов и, следовательно, вы должны передать аргументы в useCallback.
Однако в вашем случае значение, которое использует memoizedsignupCallback, передается вызывающей стороной при выполнении метода, и, следовательно, оно будет работать правильно.
Спасибо @Shubman. Я как бы следую. Не могли бы вы обновить приведенный выше код, чтобы показать пример того, как он может выглядеть с кодом, берущим из объемлющей области видимости? Я попробовал сам и получил синтаксические ошибки.
@PeterKellner Конечно, через какое-то время будут добавлены примеры.
@PeterKellner Добавлено демо
Вы правы в том, что 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.
Массив зависимостей (второй аргумент в
useCallback) по сути отражает аргументы, которые передаются обратному вызову.