[React]容器组件设计

Question

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

A，B，C

在DOM级别上，A includes B and B includes C.

因此，在React级别上，我想按以下方式设计组件树：

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

我将通过A redux方法使识别redux，并传递redux状态to B then -> C。

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

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

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

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

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

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

B和C都期望A的状态传递给它们。**

Answer 1

有时候，您可以了解更多我阅读的示例代码，看看这个redux提供的示例Todo列表，它清楚地显示出MainSection包含TodoItem和Footer，它们都是有状态的，MainSection本身也是有状态的。一个主要的例子甚至可能是Material库，它都是有状态组件，您可以将它与无状态或有状态组件一起使用。

无状态组件没有理由不能包含无状态组件，也没有理由无状态组件不能包含有状态组件。有时，包含有状态组件的无状态组件的一个示例就是顶级App或index文件。如果上面链接了回购，请看一下App.js。

包含有状态组件的有状态组件的主要关注点是对UI进行了大量不必要的更新。这在某些情况下并不明显，因为阴影DOM diff相对于DOM进行了适当的更改，但是对于diff来说并不是没有代价的，而且每次状态更改时都会触发操作。

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

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

老实说，只要您使用良好的编码实践，并且知道您的决策的后果，我就不认为这是一个问题。