Должны ли пользовательские хуки React вызывать повторный рендеринг зависимых компонентов?
Я только что создал пользовательский хук, который использует useState и useEffect внутри.
Когда я импортирую этот хук в другой компонент функции React, вызываю его ComponentA, ComponentA перерисовывается всякий раз, когда изменяется состояние в пользовательском хуке.
Правильно ли, что ComponentA должен перерисовываться, когда используемые им хуки возвращают новые значения?
См. комментарии в коде для дополнительных разъяснений вопросов.
Код:
const ComponentA = props => {
const myValue = useMyValue();
// COMMENTS:
// Whenever myValue returns a new value, ComponentA re-renders
// This in turn will cause the useMyValue() function to run.
// Seems unnatural with such a circular effect.
// Is my suspicion unfounded? Is this how it should work?
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Обычай можно рассматривать как просто функцию, которая выполняется внутри функционального компонента, и фактически хуки, присутствующие в пользовательском хуке, переносятся на компонент. Таким образом, любое изменение, которое обычно вызывает повторный рендеринг компонента, если код внутри пользовательского хука был непосредственно написан внутри функционального компонента, вызовет повторный рендеринг, даже если хук является пользовательским хуком.
Спасибо .. это дало мне ответ, почему изменение состояния в одном из моих пользовательских хуков повторно отображает родительский компонент
Хуки — это простые функции, которые могут использовать другие хуки, и функция не может возвращать значение, пока она не будет вызвана. здесь, если мы поддерживаем useState или useEffect внутри пользовательских хуков, то при рендеринге компонента сначала вызываем пользовательский хук (здесь будет вызываться useMyValue) с экземпляром componentA, который, в свою очередь, вызывает хуки useState или useEffect внутри него, с тем же компонентом A instance и вернуть инициализированное значение в componentA.
const useMyValue = () => {
const [count, setCount] = useState(0);
// ...do something
return [count, setCount];
};
const ComponentA = (props) => {
const [value, setValue] = useMyValue();
};
теперь, если мы обновляем стоимость в компоненте A, и мы вызываем setValue, который имеет ссылку на setCount из пользовательских хуков, тогда счетчик обновляется, но useState также обновит/повторно отобразит компонент, для которого он содержит экземпляр, здесь componentA и повторно -rendering componentA снова вызовет хук useMyValue, который, в свою очередь, снова вызовет useState и получит обновленное значение для count и, наконец, вернет его обновленное значение в componentA.
Это было мое подозрение, спасибо Shubham. Для справки другим людям, документы ссылаются на один и тот же момент: reactjs.org/docs/hooks-custom.html#using-a-custom-hook (
Each call to a Hook gets isolated state. Because we call useFriendStatus directly, from React’s point of view our component just calls useState and useEffect)