Можем ли мы динамически импортировать хуки на основе значения, переданного компоненту?
Например,
App.js
<BaseComponent isActive />
BaseComponent.js
if(props.isActive) {
// import useActive (custom Hook)
}
Я не хочу, чтобы эти файлы (настраиваемые ловушки) импортировались и увеличивали размер BaseComponent, даже если реквизиты содержат ложные значения.
Вы можете динамически импортировать хуки, поскольку это просто функция (используя require), но не следует, потому что нельзя использовать ловушки внутри условий.
См. Правила хуков.
Вызывайте хуки только на верхнем уровне. Не вызывайте хуки внутри циклов, условий или вложенных функций.
Если вы хотите условно использовать ловушку, используйте условие в его реализации ( посмотрите, например, skip вариант useQuery хука из клиента Apollo GraphQL).
const useActive = (isUsed) => {
if (isUsed) {
// logic
}
}
useActive, если props.isActive ложно?
- person priyanshu sinha; 10.06.2020
Вы должны извлечь логику внутри ловушки useActive и динамически импортировать ее вместо динамического импорта ловушки, поскольку вы не должны вызывать ловушки внутри циклов, условий или вложенных функций. Checkout Правила хуков:
Допустим, ваш хук useActive пытался обновить заголовок документа (в реальном мире это должен быть большой фрагмент кода, который вы бы рассмотрели при использовании динамического импорта)
Это может быть реализовано следующим образом:
// useActive.js
import { useEffect } from "react";
export function useActive() {
useEffect(() => {
document.title = "(Active) Hello World!";
}, []);
}
И вы пробовали использовать его в BaseComponent:
// BaseComponent.js
function BaseComponent({ isActive }) {
if (isActive) { // <-- call Hooks inside conditions ❌
import("./useActive").then(({ useActive }) => {
useActive();
});
}
return <p>Base</p>;
}
Здесь вы нарушили правило «не вызывайте ловушки внутри условий» и получите Invalid hook call. ошибку.
Поэтому вместо динамического импорта ловушки вы можете извлечь логику внутри ловушки и динамически импортировать ее:
// updateTitle.js
export function updateTitle() {
document.title = "(Active) Hello World!"
}
И вы делаете isActive проверку внутри хука:
// BaseComponent.js
function BaseComponent({ isActive }) {
useEffect(() => {
if (!isActive) return;
import("./updateTitle").then(({ updateTitle }) => {
updateTitle();
});
}, [isActive]);
return <p>Base</p>;
}
Работает нормально, не нарушая никаких правил хуков.
Я прикрепил CodeSandbox, чтобы вы могли поиграть:
