reactjs - 如何减少传入的react props数量

Question

随着 React Web 应用程序变得复杂，某些组件具有大量 props，这会降低可读性，更难以预期该组件的功能，并且添加大量 props 类型检查并将 props 从最顶部组件传递到底部非常繁琐。这主要是由传递 Flux/Redux 操作和从上到下传递的存储引起的。

有没有什么好方法可以减少传入的 props 数量？

我想到了两种解决方案，并不完美:

1. 使用扩展运算符 {...props} 传递 props。这确实减少了编写大量 props 和 prop 类型检查，但命名可能会发生冲突，因此 actions/store 的名称应该是唯一的。另一个缺点是要格外小心传递或不传递哪些 Prop ，以避免副作用。

2. 用一个容器包装组件，该容器以一种特殊的方式直接将操作/存储连接到组件。例如，react-redux的connect()可以使用。这比解决方案 #1 更干净、更简单，但如果组件包含容器，由于 Redux 错误，则很难编写组件测试。错误的一个示例是

Invariant Violation: Could not find "store" in either the context or props of "Connect(Header)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Header)".

Answer 1

您很好地描述了两种方法及其优缺点。我将在您所说的基础上添加一些设计注意事项。

方法#2 是我的首选方法。减少通过组件的 props 数量可以避免复杂性。有多种方法可以在不触发该错误的情况下测试组件，但说实话，我认为这值得有一个单独的 Stack Overflow 问题。现在，我只想说研究浅层渲染，并考虑您是否真的需要在这里进行单元测试与集成测试。如果您还将在 Selenium 等中创建自动化测试，那么这也许可以作为您的集成测试。

可以通过严格使用 PropTypes 来验证正在传递的内容来改进方法 #1。省略对仅传递 ...props 的中间组件的 PropTypes 检查是合理的，但最终组件(实际使用 props 而不是仅传递的组件)应该具有非常严格的 PropTypes 声明。使用形状而不是对象。使用 ArrayOf 而不是 Array，并且基本上利用所有机会在 PropTypes 声明中进行具体说明。

关于您对名称冲突的担忧，有时将 Prop 分组为一个对象的成员并将该对象作为单个 Prop 传递会有所帮助。如果这些 props 在概念上是相关的或者有一个单一的目标组件，那么这是有道理的。我仍然非常喜欢拥有更多的容器组件(方法#2)，因为它会导致更少的信息流过 props。为具有嵌套成员的对象编写良好的 PropType 需要更多时间，并且会产生警告消息，从而需要更长的时间来进行故障排除。

人们有时会在开始使用 Redux/Flux 后忘记 .state，一些纯粹主义者更喜欢通过商店发送和接收所有内容。无状态组件声明的优雅进一步使我对向组件添加 .state 产生偏见。但 .state 非常适合跟踪动画和工具提示可见性等短暂的事物。并非所有东西都需要在商店中并通过 Prop 传递。