Javascript 关注点分离体系结构反应/重复使用

~免责声明：这是一个架构问题，包含伪代码的痕迹~

假设以下组件：

<MapScreen>
    <Map filters={filtersObject}/>
    <MapFilters
        filtersChanged={callback} //where callback returns a filters object
    /> 
</MapScreen>

有很多方法可以实现这一点，但我更感兴趣的是，在选择哪种实现方式的背后，我有什么想法

问题 A） 鉴于

不需要知道过滤器对象本身，是否需要以某种方式（例如redux）将过滤器对象从回调直接传递到

对象

B） 是的，

可以保持过滤器状态，但它除了抓取它并向下传播它之外什么都不做，所以感觉就像我在设计基于方便的关注点分离

C） 许多人赞成这种方式。如果是这样，那么问题是，

是否应该只发出filtersObject并将其作为属性接收回来，而不是将其存储到自己的状态，从而避免同一事物有两种状态

---

我知道这里的问题很大程度上取决于个人品味，但我很想听听你对此的看法

---

非常感谢。

A.是的。如果需要在组件之间共享数据，那么redux或其他数据流解决方案在这里是非常好的

B.如果

Map

和

MapFilter

之间共享的数据从未在其他任何地方使用过，或仅在

MapScreen

及其子级内部使用过，则

MapScreen

可以将数据保持在其状态并作为道具传递给其子级。由于React组件设计用于父子之间的数据流，因此通常使用这种方法。但是，你需要考虑以下方法的权衡：

由于数据由

MapScreen

及其子级共享，因此每当数据更改时，它将触发

MapScreen

及其所有子级重新渲染。根据数据的大小、数据更新的频率以及

MapScreen

的子级数量，方法B的性能可能不如方法A

如果您正在处理

MapScreen

的任何子对象（例如

Map

）中的动画，并且希望在数据更新时提供平滑且不可见的动画，则很难控制，因为它总是被迫与父组件

MapScreen

一起重新渲染。当然，您可以使用

shouldComponentUpdate

来控制重新渲染行为，但您必须将其放在

MapScreen

中，而不是直接放在子组件中。然后，如果使用方法A，

MapScreen

将是一个哑组件，它对其子级之间发生的任何事情都视而不见

即使不使用redux，只保留一个真实来源也是很重要的

MapScreen

应该通过将数据保持在其自己的状态、将状态数据作为道具传递给其子级以及侦听其子级的回调以更新状态来充当真相的来源

---

如果您对（B1）和（B2）完全满意，那么我强烈建议您采用方法B，因为纯React解决方案通常比使用外接程序库更清晰、更快。但是，如果您的数据仍在增长，并且您希望在将来添加更多行为，那么请选择A。

应该在“谢谢”中询问架构问题，我不知道。有没有一种简单的方法可以移动它？请在移动之前阅读和。@sabithpocker在引用其他网站时，指出这一点通常是有帮助的

filters = [{
filterName: String
filterColor: String
}, ...]