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/>应该只发出filtersObject并作为属性接收它，而不是将其存储到它自己的状态，从而避免有两个状态为了同样的事情？

我知道这里的问题非常符合个人品味，但我很乐意听到你的想法。

非常感谢。

Answer 1

一个。是。如果需要在组件之间共享数据，还可以使用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.

关注架构React / Redux的分离

问题

1 个答案: