React，Redux设计目标

Question

问题：

不能单独重新渲染可选组件，而不渲染不必渲染的组件。

有些研究：

该应用程序的基本思想：它有两个单独的项目池：1：“输入项目” 2：“输出项目”。 可以将输入分配给输出，但不能相反。 通过选择输入（单击输入）并仅按下某些输出项即可完成分配。 但是，相同的逻辑没有相反的意义。 因此，如果选择了某些输出并按下了输入，则取消选择这些输出会很好。

状态转换图像 <以下描述的可视版本

我的第一个想法是让SELECT / UNSELECT acton创建者和“ selection”简化器根据项目触发的动作来更新选择状态。 （基本上，此化简器决定选择什么，不选什么）池容器侦听此化简器，并相应地更新其子项。

在这种情况下，我面临一个巨大的问题。 每当用户单击该项目时，都会重新呈现每个项目。 感觉就像疯狂的处理过大的杀伤力，只是为了改变一些对象的属性。 此外，项目数可以轻松达到几百个。

我认为更好的性能解决方案是让项目自己切换外观，并在适当的情况下从“选择” reduce调度UNSELECT_INPUTS事件。 创建某种类型的“ inputsDeselected” reducer，并创建池来监听。

这种情况也不是很酷。

因此，在重做redux时，发现了以下代码：

     this.unsubscribe = store.subscribe(() => {
        this.setState({ storeState: store.getState() });
     });

当用户选择项目时，它可以用于动态订阅“选择” reduce，当用户未选择项目时，它可以取消订阅。 如果在选择减速器时改变其状态，则有机会做出相应的响应。 这可能会使性能问题可以接受。

到目前为止，这是我对react-redux的研究和了解。 希望有任何道理。

问题是：

您将如何解决这个“问题”？ 从Redux的角度来看，最后一种情况是否可以接受？

我非常感谢您的知识如何解决此问题。

PS我对所有这些Web UI内容和Javascript生态系统还很陌生，因此对所有这些都感到困惑。

我知道我可以通过一些SelectionState对象和从选定项中进行的少量回调或其他“捷径”方式来做到这一点，对于这个项目的规模来说，这是可以接受的。 但是我认为以某种或多或少的Redux“正确”方式实现这一点很酷。

感谢您阅读所有这些废话！ :)

Answer 1

好吧，如果我说对了

不能单独重新渲染可选组件，而不渲染不必渲染的组件。

您应该看看React PureComponent 。 基本上，它会在shouldComponentUpdate方法上比较组件的道具，如果道具未更改，它不会重新渲染（返回false ）。 如果需要更复杂的比较，仍可以在常规组件中手动进行操作。

这是一篇关于ReactDOM的工作原理的很棒的文章，它为我提供了一些有关如何提高应用程序性能的真实见解。

https://evilmartians.com/chronicles/optimizing-react-virtual-dom-explained

祝好运！

Answer 2

很难确定没有看到您的代码，但是我认为您可以从包含输入和输出原始数据的状态中受益。 然后，一个单独的状态会跟踪选择了哪些输入和选择了哪些输出，这样，只有已更改状态的输出才会重新呈现。

例如数据状态：{输入：[{id：1}，{id：2}]，输出：[{id：3}，{id：4}]}

选定状态：{selectedInputs：[1]，selectedOutputs：[3]}

为了清除输出，您只需要清除selectedOutputs数组即可。