Question

我有两个容器，其中大部分组件相同但有些组件不相同。因此，我将相同的组件提取到一个新容器中，并使用if-else为它们提供独特的组件。这是处理容器的好方法吗？为了澄清，我在下面添加了代码。

// container A has below components
<Component1 data={dataA1} style={style} />
<Component2 data={dataA2} />
<Component3 data={dataA3} />

// container B has below components
<Component1 data={dataB1} style={style} />
<Component2 data={dataB2} />
<Component4 data={dataB4} />

// A and B have same components, so I made a new container C
<Component1 data={is this container A ? dataA1 : dataB1} style={style} />
<Component2 data={is this container A ? dataA2 : dataB2} />
is this container A ? <Component3 data={dataA3} /> : <Component4 data={dataB4} />

我觉得这不好，虽然它有一些重用的东西。如果我们有另一个容器，由于if-else的使用太多，这个结构太难以理解并且难以维护。

那你怎么看待这种情况呢？任何意见表示赞赏和欢迎。感谢。

Answer 1

每个component都应该是可重用的，这就是为什么以这种方式创建它的原因之一。

但重用有一个成本，即耦合。

可能你的容器不会只有数据差异，它们会有不同的逻辑，会调度不同的函数或调用不同的API。

如果数据完全不同，请为这些components创建一个工厂，它将接收容器/数据并返回相应的组件。（见factory method design pattern）

否则，我会完全为此创建不同的组件。

React中的容器应该可重用吗？

1 个答案: