React Lazy加载的组件失去状态(卸载)

时间:2019-07-04 12:09:21

标签: reactjs react-router lazy-loading react-hooks

我有以下组件,可以在需要时(在更改路线时)加载我的组件。

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,显示了此问题。

1 个答案:

答案 0 :(得分: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