[React]容器组件设计

Question

我在一个 html 页面中有 3 个组件。

A、B、C

由PSD设计，在DOM级别，A includes B and B includes C.

所以在 React 层面，我想设计组件树如下：

A(stateful component) ->B (stateless component) ->C (stateless component)

我将通过connect方法制作Aredux-aware，并传递redux状态to B then -> C。

然而许多指南建议有状态的组件只能包含无状态的组件，而没有提到是否：

1.一个无状态组件可以包含另一个无状态组件吗？

2。一个无状态组件可以包含另一个有状态组件吗？

3.一个有状态的组件可以包含另一个有状态的组件吗？

无论如何，如何设计我的组件，提前谢谢！！

A(stateful component) ->B (stateless component) ->C (stateless component)

B 和 C 都希望 A 的状态传递给他们。**

Answer 1

有时您可以了解更多我的阅读示例代码，看看这个example Todo List provided by redux 它清楚地表明MainSection 包含TodoItem 和Footer 两者都是有状态的，MainSection 本身是有状态的.一个主要的例子甚至可能是 Material-UI 库，它都是有状态的组件，您可以将它与无状态或有状态的组件一起使用。

无状态组件没有理由不能包含无状态组件，也没有理由无状态组件不能包含有状态组件。包含有状态组件的无状态组件的示例实际上是您的顶级 App 或 index 文件。如果上面链接的repo，看看App.js。

包含有状态组件的有状态组件的主要问题是对您的 UI 进行大量不必要的更新。这些有时并不明显，因为影子 DOM 差异与 DOM 相对并进行了适当的更改，但差异仍然存在成本，并且每次状态更改时都会触发操作。

解决此问题的一个好方法是让您的组件在其部门中相当平坦，或者根据需要实现shouldComponentUpdate 函数。

由于关注点分离，在组件中拥有状态只会让事情更容易管理，所以我很难相信在有状态或无状态组件下使用它们可能会成为问题。无状态组件将在每次包含它们的组件呈现时呈现，因此将无状态组件嵌入到无状态组件中的问题可能是深度问题之一，即您的 DOM 越深，差异操作就越复杂（纯粹根据经验猜测）所以指南不鼓励这样做，这样您就可以使树尽可能平坦。

老实说，只要您使用良好的编码实践并意识到您的决定的后果，我认为这不是问题。