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

时间:2019-08-09 09:22:47

标签: reactjs redux react-redux react-hooks

我是使用React hooks api的新手。 之前,我曾经区分容器组件和呈现组件。 项目目录结构就是根据这种区别。

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

对于钩子,我一无所知,目录结构应如何,钩子是否应该通过props注入到组件中,还是应该简单地导入到组件内部。

应该在容器和组件之间有区别。

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

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

3 个答案:

答案 0 :(得分:1)

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

  

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

答案 1 :(得分:0)

正如用户adel所评论的那样,现在有react-redux项的钩子等效项。要读取redux状态,可以使用connect代替useSelector

import { useSelector } from 'react-redux'

..
const somePieceOfData = useSelector( state => state.path.to.data )

关于容器组件,您仍然可以使用react-redux钩子来分离容器。 react-redux与此无关。

答案 2 :(得分:0)

我现在也遇到了同样的问题,并且一直在寻找一些好的资源,但是在这里我已经达到了: 现在,UI和容器组件之间没有太大区别,您可以将自定义钩子用于相同的目的,并且代码行更少,可读性更高。从我读过的内容(我还没有做过实验)来看,它应该具有更好的性能,因为使用功能组件(包括自定义钩子)可以提高应用程序的性能。 看看这个 : https://dev.to/jenc/discuss-react-hooks-and-life-after-the-container-component-pattern-5bn