ReactJs的功能风格打破了封装

Question

我做不到。这件事：我制作了两个小工具，一个TabBar和一个TabNavigator。 tabNav包含索引 currentSelectedTab 的状态。因此，当TabBar收到用户点击时，它会通知父母（TabNav）做某事（带回调），并且父母正好注入新道具说：亲爱的tabbar，选择此选项卡：currentSelectedTab 同时，tabNav显示选项卡的正确内容。

到目前为止一切顺利。但是，现在我希望应用程序能够将TabNav设置为特定选项卡。一旦我介绍它，作为道具，它就打破了tabnav中currentSelectedTab的封装。它必须在应用程序外部定义。这很糟糕。

在OOP的角度来看，我会在窗口小部件TabNav中有一个setCurrentTab，但在FP中，特别是在React中，这是禁止的。小部件的唯一入口是道具。 （参考是邪恶的，对吗？）。

这意味着当TabBar收到用户点击时，它将在TabNav中调用回调，并且TabNav还必须调用应用程序中定义的上部回调。然后这个回调将改变应用程序状态，并设置currentSelectedTab，因此它将通过props传递给TabNav。

必须在TabNav之外定义currentSelectedTab的事实简直太可怕了。你不这么认为吗？在我看来，它打破了组件封装。怎么做得好？助焊剂？同样的事情：currentSelectedTab不必在全局状态下定义。

基本上看起来，如果一切都是功能性的，你最终会在顶部有一个包含属于某些小部件的东西的巨型状态。封装已经深深打破。

可能有人可以向我解释这里有什么问题？

Answer 1

在命令式语言中使用公共方法设置选定的选项卡与在反应中执行相同操作的道具没有太大区别。

一旦你觉得需要控制组件之外的某些财产，它自然就会成为公共合同的一部分。在反应中，这通常是优选的道具，通常是OOP语言 - 公共类方法/字段。

反应道具没有必要直接表示其内部状态。完全可以使用道具作为州的初始值。甚至还有一个特殊的钩子componentWillReceiveProps，它允许你在道具变化时改变你封装的内部状态。

希望这能澄清一点。

Answer 2

我找到了解决问题的正确方法。 应用程序的责任只是提供初始值。所以我命名了我的道具： initialSelectedTabIndex TabNavigator是当前索引的所有者，而不是应用程序，并将在TabBar上使用回调来做正确的事情（更新其包含 selectedTabIndex 之类的内部状态）。 通过这种方式，封装不会被破坏。应用程序不必使用回调来重新发送新索引，TabNav就是这样做的。

当TabNav中出现 componentWillReceiveProps 时，我没有做任何事情。因为我不想用props initialSelectedTabIndex覆盖内部状态，因为它不再是初始化。