[阵营]容器组件设计([React]Container Component design)

I have 3 components in a html page.

A,B,C

By the PSD desgin ,in the DOM level , A includes B and B includes C.

so in the React level , I'd like to design component tree as follow:

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

I will make A redux-aware by connect method and hand down the redux state to B then -> C.

However many guides recommend that a stateful component can only contain stateless components whereas there's no mentioned whether:

1. a stateless component can contain another stateless component?

2. a stateless component can contain another stateful component?

3. a stateful component can contain another stateful compoent?

so anyway ,how to design my components, thanks in advance!!

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

both B and C expect the state from A to pass down to them.**

Answer 1:

有些时候，你可以了解更多我阅读示例代码，来看看这个例子待办事项列表提供终极版它清楚地表明， MainSection包含TodoItem和Footer这两者是有状态和MainSection本身是有状态的。 一个主要的例子甚至可以是材料的UI库，是所有状态的组件，你可以使用无状态或有状态的组件使用它。

没有理由无状态组件不能包含无状态的组件和没有理由无状态组件不能包含有状态的组件。 含状态的组件的无状态组分的一个例子是从字面上你的顶层App或index有时文件。 如果回购上面链接，看看App.js 。

包含有状态的组件状态的组件主要关注的是很多不必要的更新您的UI。 这些都是一些时候并不明显，因为影子DOM差异兑DOM并进行相应的更改，但非的少成本的差异，并且操作触发您的每一次状态的变化。

解决这个问题的一个好方法是将您的组件保持在他们的部门基本持平或实现shouldComponentUpdate需要的功能。

在你的组件状态只是使事情变得更容易，由于关注点分离管理，所以我觉得很难用它们在状态或无状态的组件可能是一个问题相信。 无状态组件将呈现每一个包含这些组件呈现时间，所以也许嵌入无状态组件内的无状态组件的问题是深度的，即更深的DOM更复杂的区分操作（根据经验纯属猜测），所以指南阻止这种让你可以保持你的树尽可能平坦。

老实说，我没有看到任何这是一个问题，只要你使用良好的编码实践，并且知道你决定的后果。

文章来源: [React]Container Component design