钩子相当于 React Redux 中的容器组件



我是使用反应钩子 API 的新手。 早些时候,我曾经区分容器组件和表示组件。 项目目录结构就是根据这一区别进行的。

用于通过props将存储状态和操作创建者注入组件的容器组件。

对于钩子,我一直不知道目录结构应该如何,以及钩子是否应该通过 props 注入到组件中,或者只是简单地导入到组件内部。

是否应该区分容器和组件。

描述容器和表示组件的 redux 文档似乎也没有针对钩子进行更新。

欢迎任何相关的文章或答案。

关于容器组件和表示组件之间的分离,Dan Abramov(致力于ReactJs,Redux和Create React App的合著者(在Representational and Container Components中写道:

2019年更新:我很久以前写了这篇文章,此后我的观点发生了变化。特别是,我不建议再像这样拆分组件了。如果您发现代码库中很自然,则此模式可能很方便。但是我已经看到它被强制执行,没有任何必要,而且几乎是教条式的热情太多了。我发现它很有用的主要原因是因为它让我可以将复杂的有状态逻辑与组件的其他方面分开。钩子让我做同样的事情,没有任意划分。由于历史原因,本文保持不变,但不要太认真。

正如用户 adel 评论的那样,现在有react-redux东西的钩子等价物。 要读取 redux 状态,而不是connect,您可以使用useSelector

import { useSelector } from 'react-redux'
..
const somePieceOfData = useSelector( state => state.path.to.data )

关于容器组件,您仍然可以使用react-redux钩子的东西来分离容器。react-redux什么都没有.

我现在也遇到了同样的问题,并且正在寻找一些不错的资源,但在这里我得到了: 现在不需要区分 UI 和容器组件,您可以使用自定义钩子来实现相同的目的,您将拥有更少的代码行和更具可读性的代码行。从我所读到的内容来看(我还没有尝试过(,但它应该具有更好的性能,因为使用功能组件,包括自定义钩子和应用程序性能。 看看这个: https://dev.to/jenc/discuss-react-hooks-and-life-after-the-container-component-pattern-5bn

相关内容

  • 没有找到相关文章

最新更新