首先,关于您的编辑,该仓库中的组件旨在让您将函数作为道具传递给组件。只要运行React lifecycle methods,它们就会运行。这很有用。但是这些原因在该回购中进行了解释,与您的问题无关。
另外,你看到了这个:
const mapDispatchToProps = { getAllTehDatas };
这是 ES6 简写符号。它只是意味着:
const mapDispatchToProps = { getAllTehDatas: getAllTehDatas };
即属性名与变量名相同。因为这是一个很常见的操作,所以有人聪明地想出了这个速记。如果你不知道它可能会非常混乱。你应该阅读about es6。
向前。
有许多概念没有明确界定。哑组件。智能组件。容器组件。表示组件。连接的组件。纯功能组件。很多。
容器组件是智能组件,而展示组件是哑组件。
有时愚蠢的组件有点聪明。也许他们在鼠标悬停时有动画。他们甚至可以拥有状态。
纯函数式组件只是一个函数。所以没有方法也没有状态。这意味着只有道具。由于不能有状态或额外的逻辑,因此纯函数式组件始终是展示性的。
一个连接的组件是一个高阶组件。这只是一个将您的组件呈现为子组件的父组件。它还可以优化渲染。
演示组件应该只显示东西而不是做东西。如果在您单击或键入内容时完成,则应由父级处理,该父级可以将处理程序传递给演示组件。表示组件可以做一些事情,但这些事情不能影响它们之外的任何东西。
容器组件应该决定会发生什么。这就是逻辑被塞进的地方。它更像是一个 React 概念而不是 Redux 概念。
连接的组件是用connect 创建的。当它被调用时,我们传递了一些函数。 mapStateToProps 和 mapDispatchToProps。
mapStateToProps 可以做任何事情来生成一些道具供您的组件使用。这意味着您的组件随后可以使用这些道具,而无需进一步处理数据。所有需要的处理都可以在mapStateToProps完成。
mapDispatchToProps 可以做任何需要做的事情来传递直接用作事件处理程序的函数。我们经常传递绑定的动作创建者,它们通常已经完成了处理程序需要做的所有事情。但是我们可以传递任何函数并给它起任何名字。所以我们可以称它为onClick 并传递我们喜欢的任何函数。您还可以在 Redux-Thunk 的帮助下创建复杂的动作创建者,将任何事件处理程序变成智能动作创建者。 Thunked 动作创建者可以访问调度和状态。
以上2段勾勒了一个有趣的点:connect在我们mapStateToProps和mapDispatchToProps的帮助下创建的HOC可以很容易地做成一个完整的智能组件,并且包裹的组件可以完全呈现,即使由此产生的 HOC 是做聪明的事情。
或者得到这个:你可以connect一个已经连接的组件。肯定是令人兴奋的。这样做有用吗?当然可以。一个组件可能需要一些来自状态的通用数据,无论它在哪里使用。你connect它到那个数据。然后,生成的组件可以connected 到特定于它在其他地方使用的地方的数据。常见的?不,有用吗?是的!
您还可以将展示组件包装在容器组件中,然后用connect 包装。这可能是您正在寻找的。然后您可以使用componentDidMount 在容器组件中进行提取。
但表现性组件与它们的智能区分开来只有两个原因:
如果两者都不需要,则不应将两者分开。为什么要把事情复杂化却没有收获?
另外,使用componentDidMount,而不是componentWillMount。如果您使用通用组件,后者也在服务器端运行。您不希望您的 fetch 在服务器上运行。
请注意,即使连接的组件显然是一个包装器,您也不应该那样想它。将其视为原始版本的插件版本。包装只是一个实现细节。此外,包装器是由 React-Redux 创建和维护的,它的内部不能乱七八糟。这意味着您不能更改包装器的 componentDidMount 或任何其他部分。当我说你不能时,我的意思是你完全可以但真的不应该。
回顾一下,我建议了解 React、Redux 和 React-Redux。他们相处得很好,但不是一回事。
在你掌握了概念之后,你就去做你认为最好的事情。制定自己的规则。