添加React.lazy或react可加载并执行动态导入(代码拆分)将使我的一些功能中断。

Question

我在寻找一种方法来动态导入我的组件，只使用它们的名称，在寻找了一段时间之后，我了解了code splitting和React.lazy、react-loadable和loadable-component之类的东西，我做了一些测试用例，并且在了解了所有东西是如何工作的之后，我设法将它插入到我的项目中，并重构我的类来处理这个问题。

我遇到的主要问题是我的应用程序中有一些东西坏了，例如我的checkbox不能工作，而且.在将动态导入从呈现移到外部、函数内，然后调用该函数并传递道具来执行动态导入之后，我设法修复了这个问题，现在另一件事被破坏了，恐怕会发生更多类似的事情，这是因为动态导入是如何工作的吗？！我应该停止使用它吗??，我花了一整天的时间试图理解我以前的工作代码有什么问题！

现在我的问题是，我是否需要遵循某种指南来使用我没有的动态编码，而现在它使我的代码中断，或者在某些情况下，这些方法仅仅是过于实验性和有点错误？！，或者对于一个已经完成了一半的项目来说，将类似的东西添加到项目中已经太晚了吗？

下面是我的代码及其最新的更改，您可以大致了解我正在做什么：

const AsyncPage = loadable(props => import(`${props.page}`))

class MyClassComponent extends Component {
    render  () {
        const importPath = './UI/' + UIType + '/' + UIType; 
        return (                            
            <AsyncPage page={importPath} {someOtherComponentProps}>{UIchildrens}</AsyncPage>
        )
    }
}

任何帮助和建议都是非常感谢的，谢谢。

Update01:

我设法解决了当前的问题!，它似乎我有相同的钥匙在我的地图，这导致了这个特殊的问题！，有趣的是，这是只发生在我添加懒惰加载！而且它对正常的导入也很好，奇怪，但是我想他们确实提到在地图中没有一个好钥匙会导致奇怪的问题。

Answer 1

在使用react-loadable时，我发现如果我把所有的URL都放在变量中，它就找不到模块，并且我得到了模块，没有找到错误。但是，如果我使用字符串文字作为基址，那么它就能工作了。例如，以下内容对我不起作用：

加载程序：() =>导入(item.url)

这一次起作用的是：

加载程序：() =>导入(‘./示例/’+ item.fileName)

Answer 2

正如在反应文档中提到的，您应该使用React.lazy和悬念的组合来让事情运行。您不必使用其他库，因为React已经为您提供了这些库。因此，首先用于导入，它看起来很好，但是应该移到使用React.lazy

const AsyncPage = React.lazy(() => import(`${props.page}`));

但这仅仅是使其运行的进程的一半。因为您在呈现函数中直接呈现页面，它将在页面加载时中断。这就是为什么您必须将所有react.lazy调用包装在一个悬念组件中，这将在页面加载时呈现回退：

class MyClassComponent extends Component {
render  () {
    const importPath = './UI/' + UIType + '/' + UIType;         
    const AsyncPage = React.lazy(() => import(importPath));
    return (       
        <Suspense fallback={'...Loading}>            
            <AsyncPage {someOtherComponentProps}>{UIchildrens}</AsyncPage>
        </Suspense>         
    )
}}

这将在组件加载时显示回退(加载字符串)，并在下载完成后显示页面。这应该是开箱即用的，它不应该中断和功能上，snceit是选择和即插即用而不改变您的反应代码的工作方式。

希望这能有所帮助。编码愉快。