Question

我有以下组件，可以在需要时（在更改路线时）加载我的组件。

function DynamicLoader(props) {
  const LazyComponent = React.lazy(() => import(`${props.component}`));
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

我的路线（使用React-Router）如下所示：

            <Switch>
            {routes.map((prop, key) => {
              return (
                <Route
                  exact
                  path={prop.path}
                  render={() => (
                    <DynamicLoader component={prop.component} />
                  )}
                  key={key}
                />
              );
            })}
          </Switch>

就每条路线安装该组件而言，这工作正常，但是看起来随着父组件的每次更改，React都将卸载并重新装载延迟加载的组件（而不是重新渲染）。这导致所有内部状态重置，这当然是不希望的。任何人都可以推荐任何解决方案吗？这是codesandbox，显示了此问题。

Answer 1

无论何时呈现父级，pRead = (char *)malloc(32); bPass = PCIE_DmaRead(hPCIe, FIFO_READ_MEM_ADDR, pRead, 32);都会重新创建DynamicLoader。 React看到一个新组件（不是同一对象），卸载前一个组件，然后安装到新组件。

要解决此问题，请在LazyComponent内使用React.useMemo()来记住当前的DynamicLoader，只有在LazyComponent实际更改时才重新创建它：

props.component

Sandbox-为展示记忆的const DynamicLoader = ({ component, parentUpdate }) => { const LazyComponent = useMemo(() => React.lazy(() => import(component)), [ component ]); return ( <Suspense fallback={<div>Loading...</div>}> <LazyComponent parentUpdate={parentUpdate} /> </Suspense> ); };，我将外部LazyComponent传递给update组件。

由于不能保证HomeA缓存（反应可能会不时释放内存），因此您可以使用useMemo()编写简单的惰性缓存：

Map

Sandbox

React Lazy加载的组件失去状态（卸载）

1 个答案: