WijmoJS 是一款基于 HTML5 的前端开发工具包，由 80 多种灵活、高效、跨平台、零依赖的 JavaScript UI 组件构成，如表格（Grid）、图表（Chart）、数据分析（Olap）、导航（Navigation）和金融图表等，完美兼容原生 JavaScript，以及 Angular、React、Vue、TypeScript、Knockout 和 Ionic 等框架，可助力企业以最快的速度开发并构建出一套成熟的 Web 应用程序。

WijmoJS正式版

React Redux是什么ijmoJS 增加的此项功能对于前端开发者来说意味着什么文将告诉你答案。

开发人员为何如此钟情于Redux/strong>

Redux是当今流行的应用程序架构，尤其是在React 区中。

它鼓励开发人员使用单向数据流，并使用Redux reducer在全局Redux Store中更改应用于单个位置的数据。可以肯定的是，该体系结构使应用程序更可靠，更易于维护 —— 这就是为什么许多开发团队选择将Redux作为应用程序基础架构的主要原因。

在使用Redux 时，需要注意：数据的所有更改都必须通过克隆Redux reducer中现有的数据来进行。

• 如果需要将项目添加到数组中，则应使用添加的新项目创建此数组的副本
• 如果需要更改项目属性，则应创建此项目的副本，其中包含此属性的新值
• 您永远不应更改现有的数组和对象

Redux 与 DataGrid 组件之间的矛盾

DataGrid组件在设计之初，定位为直接更改绑定数据。这对于“常规”应用程序来说，可以满足需求，但是由于数据不变性的要求，它不能与Redux一起使用。

WijmoJS 的回答是：有！

WijmoJS 的 FlexGrid 组件与 Redux

WijmoJS的 FlexGrid表格组件，可将 格绑定到数据源，并允许您选择数据项的数量、数据显示模式、数据类型，以及是否使用数据映射和格式。即使有大量数据项，FlexGrid 格仍然可以保持快速流畅。

在应用于FlexGrid组件后，它将通过以下方式更改其行为：

下面，让我们看看它是如何工作的。

ImmutabilityProvider

在组件的render方法中，添加数据绑定最简单的JSX方法看起来像这样：

<FlexGrid itemsSource={this.props.items}></FlexGrid>

<FlexGrid>    <ImmutabilityProvider        itemsSource={this.props.items}        dataChanged={this.onGridDataChanged} /></FlexGrid>

请注意，现在在ImmutabilityProvider组件上指定了itemsSource属性，但未在FlexGrid上指定。

• 现有项目的属性值已更改
• 新项目已添加
• 项目已删除

触发此事件后，尽管看起来数据已发生更改，但实际基础项数组保持不变（数组本身及其项的属性）。

我们使用此事件将相应的数据更改操作调度到Redux Store，以将用户所做的更改应用于全局应用程序状态。

事件处理程序如下：

onGridDataChanged(s: ImmutabilityProvider, e: DataChangeEventArgs) {    switch (e.action) {        case DataChangeAction.Add:            this.props.addItemAction(e.newItem);            break;        case DataChangeAction.Remove:            this.props.removeItemAction(e.newItem, e.itemIndex);            break;        case DataChangeAction.Change:            this.props.changeItemAction(e.newItem, e.itemIndex);            break;        default:            throw 'Unknown data action'    }}

根据在FlexGrid中发生的数据更改的类型（添加、删除或更改），事件处理程序将向Redux Store的reducer调度相应的操作，后者将使用包含分派的更改数组的克隆更新全局状态。

由于此数组直接绑定到ImmutabilityProvider.itemsSource属性，后者将检测到更改并让FlexGrid刷新其内容以反映存储中发生的更改。

尽管看似复杂，但即使在相当大的数据上，用户所做的更改也可立即生效。

WijmoJS版本亮点持续更新中，感兴趣的朋友可以继续关注 了解更多产品资讯~您可以下载WijmoJS最新版免费试用~

想要购买WijmoJS正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：