时间戳

首页 > 解决方案 > 为什么每次都安装我的嵌套递归模式？

javascript - 为什么每次都安装我的嵌套递归模式？

问题描述

我正在创建一个侧层次结构来控制我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]);

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

任何帮助表示赞赏，无法弄清楚我完全错过了什么

标签： javascriptreactjsreact-nativeperformancerecursion

解决方案

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

推荐阅读