为什么我每次都嵌套递归模式挂载

Question

我正在创建一个侧层次结构，用于控制应用中所有Modal的使用

import ReactNativeModal, { ModalProps } from 'react-native-modal';

export const ModalsProvider = ({ children }: { children: ReactNode }) => {
const [modals, setModals] = useState<IModal[]>([]);
const [modalsMap, setModalsMap] = useState({});
const isModalsExist = useMemo<boolean>(() => !!modals.length, [!!modals.length]);
useEffect(() => {
console.log({ isModalsExist });
}, [isModalsExist]);

const MoadlComponent: ComponentType<{ idx: number }> = ({ idx }) => {
const isNextExist = useMemo<boolean>(
() => modals.length - 1 > idx,
[modals.length - 1 > idx]
);
const { name, modalProps, props } = useMemo<IModal>(() => modals[idx], [idx]);
const MyModal = useMemo<ComponentType>(() => modalsMap[name], [name]);
useEffect(() => {
console.log({ idx });
}, []);
return (
<ReactNativeModal {...modalProps}>
<MyModal {...props} />
{isNextExist && <MoadlComponent idx={idx + 1} />}
</ReactNativeModal>
);
};

return (
<modalsContext.Provider value={{ registerModals, open, close, closeAll }}>
{children}
{isModalsExist && <MoadlComponent idx={0} />}
</modalsContext.Provider>
);
};

每次我打开另一个模态

useEffect(() => {
console.log({ idx });
}, []);

从上到下在所有嵌套中运行(例如

{ idx : 2 }
{ idx : 1 }
{ idx : 0 }

)，当然，内部组件日志也会运行，这会产生不必要的繁重计算

奇怪的是，我的第一个也是主要嫌疑人isModalsExist并不是的导火索

useEffect(() => {
console.log({ isModalsExist });
}, [isModalsExist]);

只有当布尔值确实发生变化时才运行，无论如何，如果确实发生了变化，我希望日志是从下到上的，而不是相反。

感谢任何帮助，无法想象我完全错过了

Answer 1

您不希望在不将MoadlComponent包装为useEffect的情况下将其放入ModalsProvider的主体中，因为每次ModalsProvider重新渲染时，它都会重新分配一个全新的功能组件。