使用闭包来封装React组件的状态

时间:2017-05-05 16:29:33

标签: reactjs

当在组件层次结构中彼此相距很远的两个元素之间传递数据时,通过props传递数据可能很繁琐。在这些用例中,我使用Redux只是因为在有大量组件的情况下跟踪它的时间较少。

我在一个小项目中所做的就是使用一个闭包来封装状态并导出该变量并在其他地方使用它。我觉得这是一个反模式,但确实有效。

它的工作方式是声明一个将在组件中修改的变量。这个变量是从其他地方导入并从其他地方消费的。

以下是我正在做的一个小样本(只是假装有一个大的组件层次结构):https://codesandbox.io/s/2R9RvYkN1

所以我的问题是:有没有更好的方法来实现相同的结果?我们是否应该针对这些用例使用Flux实现?是否可以通过大型组件层次传递道具?

1 个答案:

答案 0 :(得分:0)

正如您所说,redux通过为您的应用提供全局的“应用状态”来解决此问题,该应用状态允许您将所需的任何组件连接到该状态。

你的“关闭”只是一个穷人的Redux,它也是一个全局状态,只是它没有Redux提供的任何功能(除非你专门写它们)。

让CompA需要根据CompB上的click事件重新渲染,如何使用闭包自动执行此操作?您必须添加侦听器,检查相关状态是否已更改,然后重新渲染。

所有这些都是由Redux免费完成的,所以我没有看到任何额外的好处(除了不使用redux,这可能是它自己的好处)。

如果重要的是不使用redux,这可能是“很好”,但非常危险,我会说它不会很好地扩展。