ReactJS：使用 Flux 构建的类似 jQuery 的组件答案

【问题标题】：ReactJS: jQuery like components built with FluxReactJS：使用 Flux 构建的类似 jQuery 的组件
【发布时间】：2015-08-25 13:02:17
【问题描述】：

场景：我想扩展现有的 React 组件并将其作为独立组件交付。

我们以 Facebook 的 FixedDataTable (https://github.com/facebook/fixed-data-table) 为例，添加一些额外的功能并将其包装为可重用的组件。

第一个额外功能是“多行选择” - 可以在此处找到演示 http://goo.gl/qRE9eB

这里任何人都可以注意到MovieTable 包装器处理行的检查/未检查状态。因此，我接下来要做的是将状态处理的责任委托给 Flux 存储（为简单起见，让我们考虑 Facebook Flux 实现 https://github.com/facebook/flux）。现在这样做可能没有太大意义，但随着MovieTable 的复杂性增加（排序、无限滚动等），集成 Flux 将是必要的。根据 Flux 架构（Action -> Dispatcher -> Store -> View），_onRowClick 和 _onCheckAll 将触发允许 Store 保存状态并通知视图发生更改的操作，以便视图重新渲染复选框的新状态。

接下来假设我想将MovieTable 视图与其操作/调度程序/存储捆绑在一起作为一个独立的组件，以便我以后可以重新使用它。第一个问题：

1) 将视图/操作/调度程序/存储作为独立组件捆绑在一起是否有意义？从我的角度来看，好处很明显：使用组件的人不需要照顾组件的“内部”（例如行选择、无限滚动、排序等）

让我们考虑一下我选择将所有内容捆绑在一起。接下来的问题是：

2) 如何从商店中获取数据？例如应用程序的某些部分可能需要从组件的 Store 中获取所有选定的行

3) 如何在组件的调度程序上触发操作？例如我想以编程方式检查一些行 - 我的第一个想法是客户端应该有权访问组件的操作

4) 鉴于 1)、2) 和 3)，我想要一个可重用的 DataTable 组件，它“感觉”像传统的 jQuery 组件（例如 jqGrid http://goo.gl/b7jPo3）。最终目标是将类似 jQuery 的组件与 React 组件结合在同一个页面中，而不会对混合这些组件造成太大的痛苦。

【问题讨论】：

标签： jquery facebook components reactjs flux

【解决方案1】：

我认为实现复杂的库在底层使用通量（或任何其他设计模式）很好，但库应该尽一切努力向最终用户隐藏这些复杂性。例如，Node.js 库可能使用回调、async control flow library，或承诺在库本身内部管理异步操作，但为了允许用户与大多数 Node 应用程序互操作，它至少应该支持公共 API 中的回调。（随着 Promise 在 JavaScript 中变得更加一流，这种模式可能会发生变化，但我希望你明白我的意思。）

在 React 中，基于组件的 API 的最小公分母是 props（用于提供数据，并提供函数引用以用作回调）。如果可能，请尝试仅使用道具使您的 API 工作。

如果在一个非常大或复杂的组件中，这是不可能的（我认为组件+道具策略can take you a very long way 在它真正崩溃之前），暴露一个更传统的对象/ 可能是有意义的基于方法的 API。但是，我仍然会努力不暴露通量基础——facade 与称为 dataTable.selectRows(rowIndicies)（它代表动作）的方法比dataTable.dispatcher.dispatch(DataTableActions.selectRows(rowIndicies)) 更容易理解/记住，并且不易更改/不易更改。

我不太确定我是否理解 #4 项（也许这不是一个真正的问题？）如果我已经在构建一个 React 应用程序，我不想将 React 组件公开为 jQuery 插件，如果我是构建一个非 React 的 jQuery 应用程序，我真的不希望将 React 作为依赖项来使用数据表。

【讨论】：

感谢您的回答！回顾一下公共 API 对于 React 组件的最低要求：a) 作为 setter 的 props 或方法（例如 <myComponent ref="myComponent" filtersProp={[{...},{...}]} 或 this.refs.myComponent.setFilters([{...},{...}]) /> b) 作为回调的 props 或方法（例如 <myComponent ref="myComponent" onGetData={function () {...}} 或 this.refs.myComponent.setOnGetData(function () {...})） c ) 方法作为吸气剂（例如this.refs.myComponent.getFilters()）
由于 c) 不能真正引起争议，因为只有一种方法可以暴露 getter，所以我会看看 a) 和 b)。让我们看看提供数据的“道具”方式有哪些优势（也包括回调）： - 与组件的生命周期很好地集成：propTypes、getDefaultProps()、componentWillReceiveProps () 等 - 很容易记住如何与组件：无需考虑组件的哪些行为必须指定为prop，哪些为方法
- 考虑到组件每次更改时都会重新呈现自己，我认为这看起来更像是每次调用构造函数，而不是只调用构造函数一次然后调用 setter每一个需要反映的变化我都没有看到“道具”有任何缺点——如果你能分享一些，那就太好了。
确实，#4 不是问题，而是与使用组件相关的场景。然而，让我给你更多的细节：我有一个 jQuery 应用程序，我想从一个库中“散布”这个和那里不同的 React 组件 - 我们称之为 MyReactLibrary。为了呈现它们，我需要在我的 jQuery 应用程序中包含 React，因为 MyReactLibrary 将“React”标记为“外部”，因为从 MyReactLibrary 的角度来看，消费者很有可能也在使用 React。
否则，MyReactLibrary 将不得不公开一种包装器，它允许我使用组件而不需要 React。但是，如果我的 jQuery 应用程序突然也需要使用 React 怎么办？你有一个可以在非 React jQuery 应用程序中使用的 React 组件的示例，不需要 React 作为依赖项，也不会强迫你在严格的非 React 环境中使用它？