React 组件变大答案

【问题标题】：React Component Getting To BigReact 组件变大
【发布时间】：2020-01-25 06:13:15
【问题描述】：

我开始注意到我构建 React 应用程序的方式存在潜在问题。

我喜欢通过使用一个充当容器的文件和多个通过props 获取传递的数据和事件发射器的无状态组件来构建我的组件。此容器将包含所有状态、API 调用和事件处理程序。此容器将呈现无状态的子组件。

这是我使用的结构示例：

- folder
  - index.js <-- container file
  - childComponent1.js
  - childComponent2.js
  - childComponent3.js
  - childComponent4.js
  ...

容器文件的大小和子组件的数量取决于功能的大小。我最近遇到的问题是我必须实现一个非常大的功能，虽然我喜欢使用这种结构，但我开始意识到我的容器文件变得非常大，就像将近 1000 行代码一样大。现在，我不确定这是否是一个问题，但在一个文件中看到 1000 行代码让我很担心。只有很多状态需要跟踪，还有事件处理程序可以读取/设置新状态。

我想知道是否有任何解决方法的提示，或者是否有我可以尝试和试验的不同设计模式。任何答案都可以接受！

谢谢！

【问题讨论】：

这是一个很好的问题，但它是其中一个可以变成选择列表的问题，通常不适合 Stack Overflow。换句话说，“每个答案都同样有效”（参见stackoverflow.com/help/dont-ask）。里面有一个很好的问题。我建议阅读Real Questions Have Answers 并可能重新格式化您的问题。具体来说，您在寻找什么样的答案？只是一个带有设计模式的句子，还是更多？什么是可接受的答案？
这就是 Redux 和所有其他状态库的目的。

标签： javascript node.js reactjs design-patterns architecture

【解决方案1】：

如果您的要求是：

无状态组件
组件必须共享一个状态（容器状态）
当单个状态中的某些值发生变化时，必须通知某些组件

你应该使用 Redux。简而言之 Redux：

创建一个商店（代表应用程序状态的单例/只是一个它的一部分，那是你的选择）其属性可以修改从actions或者你自己的组件只要他可以dispatch到商店。
可以通知您的组件存储发生变化。
您可以选择组织商店的方式。它可以由多个 reducer 组成，您可以将它们与文件系统中的文件夹进行比较。

在使用它之前去检查它是什么，因为没有共识。一半的 React 使用它（很久以前的互联网搜索），另一半更喜欢使用内置的 react 解决方案，如 context 以避免通过“几层”组件传递数据和函数。

【讨论】：

【解决方案2】：

哇！我从未在 React 应用程序中见过这么大的单个文件。你看，在我看来，拥有这么大的文件违背了使用 react 的目的之一。解决此问题的最佳方法是使用状态管理。上下传递道具（道具钻孔）并不理想会使您的代码复杂化。我建议您实现一些状态管理器，例如 context 或 redux。

【讨论】：