如何将 componentDidMount() 与 React-Redux connect() 混合使用？

这似乎是一个简单的用例，但我无法弄清楚。我想显示从通过 HTTP 对远程 API 的请求中检索到的项目列表。我希望在请求发生时屏幕最初显示空白，然后在可用时填充结果。

所以我想我会有两个组件：哑的“项目列表”组件和包装器“演示”组件，呃，以某种方式启动远程请求，同时使用状态中的空项目列表渲染哑组件。

我知道如何启动初始远程请求：使用componentDidMount().

我知道如何处理调度/连接：我想使用类似的东西：

const OuterWrapper = connect(
   mapStateToProps,
   mapDispatchToProps
) (ItemList)

但我怎样才能让这些东西一起发挥作用呢？使用connect()似乎把事情变得遥不可及。我想异步启动 API 请求，然后以某种方式执行 `dispatch(updateItemList(items)) 来告诉世界有新项目要添加到状态中。

EDIT:

I found 反应生命周期组件 https://github.com/JamieDixon/react-lifecycle-component，但我不明白之前和之后的示例用法。在更长的情况下为什么是getAllTehDatas引用两次？为什么它在mapDispatchToProps显然没有key:value一对？如果的话，为什么还需要在那里呢？componentDidMount()称之为？如果需要使用该方法，你该怎么办dispatch()?

首先，关于您的编辑，该存储库中的组件旨在让您将函数作为 props 传递给组件。这些将在任何时候运行React 生命周期方法 https://facebook.github.io/react/docs/react-component.html#componentdidmount正在运行。这是有原因的。但这些原因在该存储库中进行了解释，与您的问题无关。

另外，你还看到了这个：

const mapDispatchToProps = { getAllTehDatas };

这是 ES6 简写符号。它的意思只是：

const mapDispatchToProps = { getAllTehDatas: getAllTehDatas };

也就是说，属性的名称与变量的名称相同。因为这是一个很常见的操作，所以有人聪明地想出了这个简写。如果您不了解这一点，可能会感到非常困惑。你应该阅读关于ES6 http://es6-features.org/.

Onward.

有很多概念没有明确界定。愚蠢的组件。智能组件。容器组件。展示组件。连接的组件。纯功能组件。很多。

容器组件are智能组件和演示组件are愚蠢的组件。

有时，愚蠢的组件也有一点聪明。也许他们在鼠标悬停时有动画。他们甚至可以拥有状态。

纯函数组件只是一个函数。所以没有方法，也没有状态。这意味着只有道具。由于不可能有状态或额外的逻辑，纯函数组件总是具有表现性的。

连接的组件是高阶组件。这只是一个将您的组件呈现为子组件的父组件。它还在优化渲染方面发挥了一些作用。

展示组件应该只显示东西，而不应该做东西。如果当您单击或输入内容时事情就完成了，那么它应该由父级处理，父级可以将处理程序传递给演示组件。展示组件可以做的事情some事物，但这些事物不能影响它们之外的任何事物。

容器组件应该决定发生什么。这就是逻辑被塞满的地方。它更像是一个 React 概念，而不是 Redux 概念。

连接的组件是用以下命令创建的connect。当它被调用时，我们传递一些函数。mapStateToProps and mapDispatchToProps.

mapStateToProps可以做任何需要的事情来生成一些道具供您的组件使用。这意味着您的组件可以使用这些道具，而无需进一步处理数据。所有需要的处理都可以在mapStateToProps.

mapDispatchToProps可以执行任何需要执行的操作来传递直接用作事件处理程序的函数。通常我们会传递绑定的动作创建者，它们通常已经完成了处理程序需要做的所有事情。但我们可以传递任何函数并给它任何名称。所以我们可以称之为onClick并传递我们喜欢的任何函数。您还可以借助 Redux-Thunk 创建复杂的操作创建器，将任何事件处理程序变成智能操作创建器。 Thunked 动作创建者可以访问调度和状态。

上面两段概述了一个有趣的点：由connect在我们的帮助下mapStateToProps and mapDispatchToProps可以很容易地制作成一个完整的智能组件，并且包装的组件可以完全具有演示性，即使最终的 HOC 是为了做智能的事情。

或者得到这个：你可以connect已连接的组件。当然，令人兴奋。这样做有用吗？当然可以。无论组件在何处使用，它都可能需要来自状态的一些常规数据。你connect到该数据。然后得到的组件可以是connect编辑为特定于其在其他地方使用的地方的数据。常见的？没有，有用吗？是的！

您还可以将演示组件包装在容器组件中，然后将其包装为connect。这可能就是您正在寻找的。然后您可以使用componentDidMount在容器组件中进行提取。

但表现组件与其智能部分的有效分离有两个原因：

• 可重复使用性
• 可测试性

如果您两者都不需要，那么您不应该将两者分开。为什么要把事情复杂化却没有任何好处呢？

另外，使用componentDidMount, not componentWillMount。如果您使用通用组件，后者也可以在服务器端运行。您不希望您的提取在服务器上运行。

请注意，即使连接的组件显然是一个包装器，您也不应该这样认为。将其视为原始版本的插件版本。包装只是一个实现细节。此外，包装器是由 React-Redux 创建和维护的，它的内部不能被搞乱。这意味着您无法更改componentDidMount包装纸或与此相关的任何其他部分。当我说你不能时，我的意思是你完全可以，但实际上不应该。

回顾一下，我建议了解 React、Redux 和 React-Redux。它们配合得很好，但并不是同一件事。

掌握概念后，您只需做您认为最好的事情即可。制定自己的规则。