你如何将 componentDidMount() 与 react-redux connect() 混合使用？
How do you mix componentDidMount() with react-redux connect()?
这似乎是一个简单的用例，但我想不通。我想显示从通过 HTTP 发送到远程 API 的请求中检索到的项目列表。我希望在请求发生时屏幕最初显示空白，然后在可用时填充结果。
所以我想我会有两个组件：哑 "item list" 组件和包装器 "presentational" 组件，呃，在用空项目渲染哑组件时以某种方式启动远程请求来自州的名单。
我知道如何启动初始远程请求：使用 componentDidMount().
我知道如何处理调度/连接：我想使用类似的东西：
const OuterWrapper = connect(
mapStateToProps,
mapDispatchToProps
) (ItemList)
但是如何让这些东西一起玩呢？使用 connect() 似乎让事情变得遥不可及。我想异步启动 API 请求，然后以某种方式执行 `dispatch(updateItemList(items)) 告诉世界有新项目要添加到状态。
编辑：
我找到了react-lifecycle-component，但我不明白示例用法，前后都一样。在较长的情况下，为什么 getAllTehDatas 被引用两次？为什么明明是 mapDispatchToProps 而没有 key:value 对呢？如果 componentDidMount() 调用它，为什么在那里需要它？如果该方法需要使用 dispatch() 怎么办？
我前段时间做的This answer给你一个例子，告诉你如何正确使用connect，并在组件中调用action。唯一的区别是它在我的 componentWillMount 中：P
首先，关于您的编辑，该存储库中的组件旨在让您将函数作为 props 传递给组件。只要 React lifecycle methods 是 运行，这些就会 运行。这是有用的原因。但是这些原因在该回购协议中有解释，与您的问题无关。
此外，您还看到了这个：
const mapDispatchToProps = { getAllTehDatas };
这是 ES6 shorthand 表示法。它只是意味着：
const mapDispatchToProps = { getAllTehDatas: getAllTehDatas };
即属性的名称与变量的名称相同。因为这是一个很常见的操作，所以有人聪明地想出了这个shorthand。如果您不知道它，可能会非常混乱。你应该阅读 about es6.
前进。
有许多概念没有明确界定。愚蠢的组件。智能组件。容器组件。演示组件。连接的组件。纯功能组件。很多。
容器组件是智能组件，而展示组件是哑组件。
有时候，愚蠢的组件有点聪明。也许他们在鼠标悬停时有动画。他们甚至可以有状态。
纯函数式组件只是一个函数。所以没有方法也没有状态。这意味着只有道具。由于不能有状态或额外的逻辑，纯功能组件始终是表示性的。
连通分量是高阶分量。这只是一个将您的组件呈现为子组件的父组件。它还可以优化渲染。
演示组件应该只显示东西而不做东西。如果当你点击或输入时事情已经完成，它应该由父级处理，它可以将处理程序传递给展示组件。展示组件可以做 一些 事情，但这些事情不能影响它们之外的任何事情。
容器组件应该决定发生什么。这是逻辑被塞进去的地方。它更像是一个 React 概念而不是 Redux 概念。
连接的组件是用 connect 创建的。当它被调用时，我们传递一些函数。 mapStateToProps 和 mapDispatchToProps.
mapStateToProps 可以做任何它需要的事情来生成一些 props 供你的组件使用。这意味着您的组件可以使用这些道具而无需进一步处理数据。所有需要的处理都可以在 mapStateToProps.
中完成
mapDispatchToProps 可以做任何它需要做的事情来传递直接用作事件处理程序的函数。通常我们传递绑定的动作创建者，它们通常已经完成了处理程序需要做的所有事情。但是我们可以传递任何函数并给它起任何名字。所以我们可以调用它 onClick 并传递我们喜欢的任何函数。您还可以在 Redux-Thunk 的帮助下创建复杂的动作创建器，使任何事件处理程序成为智能动作创建器。 thunked 动作创建者可以访问 dispatch 和 state。
以上两段概述了一个有趣的点：connect在我们mapStateToProps和mapDispatchToProps的帮助下创建的HOC可以很容易地制成一个完整的智能组件，并且包装的组件可以完全表现出来，即使生成的 HOC 是做一些聪明的事情。
或者得到这个：你可以 connect 一个已经连接的组件。当然，令人兴奋。这样做有用吗？当然可以。无论在何处使用，组件都可能需要来自状态的一些通用数据。你 connect 它到那个数据。然后可以将生成的组件 connected 到特定于它在其他地方使用的地方的数据。常见的？没有。有用吗？是的！
您还可以将展示组件包装在容器组件中，然后用 connect 包装容器组件。这可能就是您要找的。然后，您可以使用 componentDidMount 在容器组件中进行提取。
但是出于 2 个原因，表示组件与其智能分离只是有用的：
- 可重用性
- 可测试性
如果两者都不需要，则不应将两者分开。为什么要使事情复杂化却没有好处？
此外，请使用 componentDidMount，而不是 componentWillMount。如果您使用通用组件，后者也是 运行 的服务器端。您不想在服务器上获取 运行ning。
请注意，即使连接组件显然是包装器，您也不应该那样想。将其视为原始版本的插入版本。包装只是一个实现细节。此外，包装器是由 React-Redux 创建和维护的，它的内部结构不容乱动。这意味着您不能更改包装器的 componentDidMount 或与此相关的任何其他部分。当我说你不能时，我的意思是你完全可以但真的不应该。
总而言之，我建议您了解 React、Redux 和 React-Redux。他们在一起很好，但不是一回事。
掌握了概念之后，你就可以做你认为最好的事情了。制定自己的规则。
这似乎是一个简单的用例，但我想不通。我想显示从通过 HTTP 发送到远程 API 的请求中检索到的项目列表。我希望在请求发生时屏幕最初显示空白，然后在可用时填充结果。
所以我想我会有两个组件：哑 "item list" 组件和包装器 "presentational" 组件，呃，在用空项目渲染哑组件时以某种方式启动远程请求来自州的名单。
我知道如何启动初始远程请求：使用 componentDidMount().
我知道如何处理调度/连接：我想使用类似的东西：
const OuterWrapper = connect(
mapStateToProps,
mapDispatchToProps
) (ItemList)
但是如何让这些东西一起玩呢？使用 connect() 似乎让事情变得遥不可及。我想异步启动 API 请求，然后以某种方式执行 `dispatch(updateItemList(items)) 告诉世界有新项目要添加到状态。
编辑：
我找到了react-lifecycle-component，但我不明白示例用法，前后都一样。在较长的情况下，为什么 getAllTehDatas 被引用两次？为什么明明是 mapDispatchToProps 而没有 key:value 对呢？如果 componentDidMount() 调用它，为什么在那里需要它？如果该方法需要使用 dispatch() 怎么办？
This answer给你一个例子，告诉你如何正确使用connect，并在组件中调用action。唯一的区别是它在我的 componentWillMount 中：P
首先，关于您的编辑，该存储库中的组件旨在让您将函数作为 props 传递给组件。只要 React lifecycle methods 是 运行，这些就会 运行。这是有用的原因。但是这些原因在该回购协议中有解释，与您的问题无关。
此外，您还看到了这个：
const mapDispatchToProps = { getAllTehDatas };
这是 ES6 shorthand 表示法。它只是意味着：
const mapDispatchToProps = { getAllTehDatas: getAllTehDatas };
即属性的名称与变量的名称相同。因为这是一个很常见的操作，所以有人聪明地想出了这个shorthand。如果您不知道它，可能会非常混乱。你应该阅读 about es6.
前进。
有许多概念没有明确界定。愚蠢的组件。智能组件。容器组件。演示组件。连接的组件。纯功能组件。很多。
容器组件是智能组件，而展示组件是哑组件。
有时候，愚蠢的组件有点聪明。也许他们在鼠标悬停时有动画。他们甚至可以有状态。
纯函数式组件只是一个函数。所以没有方法也没有状态。这意味着只有道具。由于不能有状态或额外的逻辑，纯功能组件始终是表示性的。
连通分量是高阶分量。这只是一个将您的组件呈现为子组件的父组件。它还可以优化渲染。
演示组件应该只显示东西而不做东西。如果当你点击或输入时事情已经完成，它应该由父级处理，它可以将处理程序传递给展示组件。展示组件可以做 一些 事情，但这些事情不能影响它们之外的任何事情。
容器组件应该决定发生什么。这是逻辑被塞进去的地方。它更像是一个 React 概念而不是 Redux 概念。
连接的组件是用 connect 创建的。当它被调用时，我们传递一些函数。 mapStateToProps 和 mapDispatchToProps.
mapStateToProps 可以做任何它需要的事情来生成一些 props 供你的组件使用。这意味着您的组件可以使用这些道具而无需进一步处理数据。所有需要的处理都可以在 mapStateToProps.
mapDispatchToProps 可以做任何它需要做的事情来传递直接用作事件处理程序的函数。通常我们传递绑定的动作创建者，它们通常已经完成了处理程序需要做的所有事情。但是我们可以传递任何函数并给它起任何名字。所以我们可以调用它 onClick 并传递我们喜欢的任何函数。您还可以在 Redux-Thunk 的帮助下创建复杂的动作创建器，使任何事件处理程序成为智能动作创建器。 thunked 动作创建者可以访问 dispatch 和 state。
以上两段概述了一个有趣的点：connect在我们mapStateToProps和mapDispatchToProps的帮助下创建的HOC可以很容易地制成一个完整的智能组件，并且包装的组件可以完全表现出来，即使生成的 HOC 是做一些聪明的事情。
或者得到这个：你可以 connect 一个已经连接的组件。当然，令人兴奋。这样做有用吗？当然可以。无论在何处使用，组件都可能需要来自状态的一些通用数据。你 connect 它到那个数据。然后可以将生成的组件 connected 到特定于它在其他地方使用的地方的数据。常见的？没有。有用吗？是的！
您还可以将展示组件包装在容器组件中，然后用 connect 包装容器组件。这可能就是您要找的。然后，您可以使用 componentDidMount 在容器组件中进行提取。
但是出于 2 个原因，表示组件与其智能分离只是有用的：
- 可重用性
- 可测试性
如果两者都不需要，则不应将两者分开。为什么要使事情复杂化却没有好处？
此外，请使用 componentDidMount，而不是 componentWillMount。如果您使用通用组件，后者也是 运行 的服务器端。您不想在服务器上获取 运行ning。
请注意，即使连接组件显然是包装器，您也不应该那样想。将其视为原始版本的插入版本。包装只是一个实现细节。此外，包装器是由 React-Redux 创建和维护的，它的内部结构不容乱动。这意味着您不能更改包装器的 componentDidMount 或与此相关的任何其他部分。当我说你不能时，我的意思是你完全可以但真的不应该。
总而言之，我建议您了解 React、Redux 和 React-Redux。他们在一起很好，但不是一回事。
掌握了概念之后，你就可以做你认为最好的事情了。制定自己的规则。