〜免责声明：这是一个体系结构问题，包含伪代码的痕迹。
假设以下组件：
<MapScreen>
<Map filters={filtersObject}/>
<MapFilters
filtersChanged={callback} //where callback returns a filters object
/>
</MapScreen>
和一个看起来很像的过滤器对象
filters = [{
filterName: String
filterColor: String
}, ...]
有很多方法可以实现这一点，但是我对选择哪种实现背后的想法更感兴趣。
问题
A）鉴于
<Map Screen/>本身不需要了解滤镜对象，是否希望以某种方式（例如redux）将滤镜对象从回调传递给<Map/>对象？B）是的
<Map Screen/>可以保持过滤器状态，但是除了抓住它并向下传播它之外，它什么都不做，所以感觉就像我将基于方便性设计关注点分离一样。C）许多人都赞成B）方式。如果是这样，那么就有一个问题，
<Map Filters/>应该只发出filtersObject并将其作为属性接收回来，而不是也将其存储为自己的状态，从而避免同一事物具有两个状态吗？我知道这里的问题很大程度上取决于个人喜好，但我很想听听您对此的看法。
非常感谢。
最佳答案
答：是的。如果需要在组件之间共享数据，则可以在此处使用redux或其他数据流解决方案。
B.如果Map和MapFilter之间共享的数据从未在其他任何地方使用或仅在MapScreen及其子级内部使用，则MapScreen可以将数据保持其状态并作为道具传递给其子级。因为React组件被设计用于父子之间的数据流，所以通常使用这种方法。但是，您需要考虑以下这种方法的权衡：
由于数据由MapScreen及其子级共享，因此每当数据更改时，它将触发MapScreen及其所有子级重新呈现。根据数据的大小，数据的更新频率和MapScreen的子代数，方法B的性能可能会低于方法A。
如果您要处理MapScreen的任何子级中的动画，例如Map并希望在数据更新时提供平滑且不引人注目的动画，因此很难控制，因为它总是被迫与父级组件MapScreen一起重新渲染。当然，您可以使用shouldComponentUpdate来控制重新渲染行为，但是您必须将其放在MapScreen中，而不是直接放在子组件中。然后，如果您使用方法A，则MapScreen将是一个愚蠢的组件，它对子组件之间发生的任何情况视而不见。
C.即使不使用redux，仅保留一个单一的事实来源也很重要。 MapScreen应通过将数据保持在其自身状态，将状态数据作为道具传递给其子级并侦听其子级的回调以更新状态来充当事实的来源。
如果您对（B1）和（B2）绝对满意，那么我强烈建议您采用方法B，因为纯React解决方案通常比使用插件库更清晰，更快捷。但是，如果您的数据仍在增长，并且您想在将来添加更多行为，则选择A。
关于javascript - 关注点分离架构React/Redux，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49507216/