Question

这一直是我的想法。我想知道是否有人有一些见解。

以下是两个例子：

<Route path="/" component={Container}>
    <Route path="user" component={Users}>
        <Route path="user/:id" component={Profile} />
    </Route>
</Route>

在上面的例子中，我的 Users 组件将通过props.children呈现 Profile 组件。

<Route path="/" component={Container}>
    <Route path="user" component={Users} />
    <Route path="user/:id" component={Profile} />
</Route>

此示例与第一个示例基本相同，只是我需要在Profile中导入 Users 组件。

在性能和/或架构方面，每种方法都有任何优点/缺点吗？

任何想法都会受到赞赏。

Answer 1

这不太可能导致任何性能问题，这两个选项的组织方式不同，行为也不同。没有更好的选择 - 只有对您的应用最有意义的选择。

要记住的最重要的事情是children只是一个道具。更改道具不会导致组件卸载。但是，新的children会导致之前的children卸载。

在第一个示例中，如果您导航到user/1，然后导航到user/5，则Profile组件将安装一次，然后卸载，然后重新安装..但是{{ 1}}只会安装一次。

如果你在第二个例子中做同样的事情，Users和Users将会挂载---然后再次卸载并挂载。这是因为在这种情况下，正在更改的Profile是children。

没有关于你的应用程序的任何其他信息..似乎第一种情况更令人满意，因为更少的组件挂载/卸载...也许你可以保留一些状态，但是这又取决于你的应用程序需要做什么

React Router：路由结构的优点/缺点

1 个答案: