reactjs - 关于 Dan Abramov 关于展示和容器组件以及钩子(Hook)的更新

Question

关闭。这个问题是opinion-based .它目前不接受答案。












想改善这个问题吗？更新问题，以便可以通过 editing this post 用事实和引文回答问题.

去年关闭。




Improve this question




展示/容器组件在 React 中被认为是一种很好的关注点分离模式，如果我们搜索这个主题，你肯定会找到 Dan Abramov's post关于那个。
但不久前，他又更新了那篇文章，声明可以解释为，由于最近对使用 Hooks 的适应性，展示/容器组件模式不像以前那样推荐。因为我们可以创建包含该代码的自定义钩子(Hook)。
你如何解释他的意思？
拥有一个巨大的自定义钩子(Hook)来完成所有这些逻辑并返回一堆变量？然后在组件中调用该钩子(Hook)？
我个人仍然觉得容器组件很有用，因为它分隔了 业务逻辑 (调用 apis 并处理其结果流)来自 《UI逻辑》 (选项卡、动画的保存状态)
当您使用大型应用程序时，如果 API、redux 或 graphql 调用位于其自己的位置，并且始终遵循相同的模式，则可以更轻松地找到它们的位置。但是如果我们没有它，我们将如何解决这个问题，而不是让多个组件在应用程序/树中的任何地方都调用 api 并做自己的事情？
我问这个是因为即使仍然使用容器组件来仅获取 api 和/或获取 redux 状态，并保持一切整洁，有时我仍然发现某些组件调用 API 并执行“容器”会做的事情很有用自己做，以避免传递 Prop 或使容器太大/混淆。只有一些组件这样做而其余的留在容器组件中，这有点矛盾。你会怎么处理？

Answer 1

我认为展示组件模式仍然与钩子(Hook)相关。您仍然可以使用“Container”组件中的主要逻辑，但在钩子(Hook)的情况下，您可以从“Container”组件中消除使用不相关状态的问题。
例如，您有一个指导主要逻辑的列表组件，每个项目都有一个下拉列表，下拉是否显示与整个列表无关，因此它的状态应该保留在展示组件中。
此外，自定义钩子(Hook)只是允许您重用状态和生命周期功能的函数，因此它与模式无关。