Javascript [React]容器组件设计

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

A、B、C

根据PSD设计，在

DOM

级别中，

A包括B，B包括C。

因此，在React级别，我想设计组件树，如下所示：

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

我将通过

connect

方法使

A

能够识别redux，然后将redux状态

传递给B->C

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

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

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

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

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

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

---

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

有时候你可以了解更多我的阅读示例代码，看一看，它清楚地表明，

mainsecute

包含

TodoItem

和

Footer

，两者都是有状态的，

mainsecute

本身也是有状态的。一个主要的例子可能是MaterialUI库，它是所有有状态的组件，您可以将其用于无状态或有状态的组件

没有理由无状态组件不能包含无状态组件，也没有理由无状态组件不能包含有状态组件。包含有状态组件的无状态组件的一个示例就是您的顶级

应用程序

或

索引

文件。如果上面链接了回购协议，请查看

App.js

包含有状态组件的有状态组件的主要问题是对UI进行了大量不必要的更新。这些情况有时并不明显，因为阴影DOM diff与DOM相对，并进行了适当的更改，但是diff的成本非常低，并且每次状态更改时都会触发该操作

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

shouldComponentUpdate

功能

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

---

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

检查这一点，它可能会对您有所帮助，但此代码示例似乎讲述了不同的故事。非常感谢！！非常感谢您的详细解释，给了我启发！