关注点的分离架构反应/redux

Question

〜免责声明：这是一个架构问题，包含伪模的痕迹。〜

假设以下组件：

<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/>应该只发出过滤器，并将其作为属性接收回去，而不是将其存储到自己的状态中，从而避免使用两个状态？

---

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

非常感谢。

Answer 1

a。是的。如果需要在组件之间共享数据，则此处的REDUX或其他数据流解决方案非常好。

b。如果Map和MapFilter之间共享的数据从未在其他任何地方或MapScreen及其子女内使用，则MapScreen可以将数据保存在其状态下并将其作为道具传递给其孩子。这种方法通常使用，因为React组件旨在用于亲子之间的数据流。但是，您需要考虑遵循这种方法的权衡：

1. 由于MapScreen及其子女共享数据，每当数据更改时，它将触发MapScreen以及其所有子女重新渲染。根据数据的大小，更新数据的频率和MapScreen的儿童数量，方法B在绩效方面可能较低，以接近A。

2. 如果您正在处理MapScreen的任何孩子中的动画，例如Map并希望在更新数据时提供平稳且不可忽视的动画，因此很难控制它，因为它总是被迫与父母组件MapScreen一起重新渲染。当然，您可以使用shouldComponentUpdate来控制重新渲染行为，但是您必须将其放入MapScreen中，而不是直接将其放入子女组件中。然后，如果您使用方法A，则MapScreen将是一个愚蠢的组件，对孩子之间发生的任何事情视而不见。

c。即使不使用redux，只保留一个真理的来源也很重要。MapScreen应该通过将数据保持在自己的状态，将状态数据作为道具传递给孩子并倾听其孩子的回调来更新状态。

如果您对(b1(和(b2(绝对可以，那么我强烈建议您选择近似B，因为纯React解决方案通常比使用加载项库更清晰，更快。但是，如果您的数据仍在增长，并且您想在将来添加更多行为，请进行A。