这里是一篇关于如何在您的ReactJS应用程序中使用Wijmo控件的快速入门。

什么是React?

React是Facebook用来通过JavaScript构建用户界面的框架库。由于React是如此的独特并且如此地流行,因此我们无须在此花费一些时间来介绍其细节。如果您有兴趣了解关于React的快速介绍,以及更进一步的和其他流行框架进行比较,这里推荐一篇关于该主题的好文章: 对比Angular 2 和 React。

React和Angular到底有什么不同?

React不是一个完整的框架,而是一个“用做构建用户界面的JavaScript库”。这一点和Angular以及大多数典型的JavaScript框架有所不同。

它并没有在HTML标记语法中添加对自定义标签和属性的支持,而是构建并管理了一个虚拟的文档树,并在需要时将其和浏览器的实际DOM结构进行同步。该虚拟树通过JavaScript或者JSX(一种JavaScript语法扩展,使得JavaScript看起来像是HTML)进行创建。

React使用支持自我状态管理的组件。构建复杂的UI 用户界面就是将这些组件进行组合。组件的逻辑通过JavaScipt进行编写(而不是使用模板),因此您可以保持在整个应用程序中对数据的访问。

以下代码片段展示了一个非常简单的React应用程序:

<!-- React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<!-- JSX 脚本 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
<script type="text/babel">
  var TodoList = React.createClass({
    // TodoList 组件定义...
    return <ul>{this.props.items.map(createItem)}</ul>;
  });
  var TodoApp = React.createClass({
    // TodoApp 组件定义...
    render: function() {
      return (
        <div>
          <h3>TODO</h3>
          <TodoList items={this.state.items} />
        </div>
      );
    }
  });
  // 将此应用程序组件呈现到浏览器
  ReactDOM.render(<TodoApp />, mountNode);
</script>

该应用程序创建了两个组件,并将其中的一个呈现在浏览器上。

该脚本通过JSX进行编写,编写的JSX脚本将在运行时通过babel转换为JavaSript。这一转换过程同样可以在编译时离线执行。

React的底层实现想法之一是使用其自有的数据结构保存一份DOM模型的复制。React应用程序针对这份复制进行操作,而React将负责将发生的改变更新回实际的DOM。这可以实现性能提升的结果,因为React会计算两份DOM之间的不同,并且在应用这些变化时非常的智能。

由于React创建了自己的DOM版本,使用其自有的组件,因此可以实现彻底的绕过浏览器并自己呈现文档。这是在React Native背后的理念,可以同它来创建IOS和安卓的原生应用程序。当然,如果您选择了该方向,您将无法使用Wijmo以及其他实际上依赖“真实”HTML的类库。

如何在React应用程序中使用Wijmo

为了在您的React应用程序中使用Wijmo,首先要添加到React和Wijmo的引用到您的页面,接下来包含“wijmo.react.js” 模块,该模块定义了封装Wijmo控件的React组件。例如:

<head>
    <title>Wijmo 和 React</title>
    <!-- React -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
    <!--JSX/babel -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
    <!-- Wijmo -->
    <link href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css" rel="stylesheet"/>
    <script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
    <script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
    <script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
    <!--Wijmo/React 互操作 -->
    <script src="scripts/wijmo.react.js"></script>
    <!-- 应用程序脚本和样式 -->
    <link href="styles/app.css" rel="stylesheet"/>
    <script src="scripts/app.js"></script>
</head>

现在您可以在React应用程序中使用Wijmo组件了。

举个例子,以下是一些创建并绑定数据到一个FlexGrid的JSX脚本:

<WjFlexGrid
    autoGenerateColumns={false}
    columns={[
        { binding: 'name', header: 'Name' },
        { binding: 'sales', header: 'Sales', format: 'c0' },
        { binding: 'expenses', header: 'Expenses', format: 'c0' },
        { binding: 'active', header: 'Active' },
        { binding: 'date', header: 'Date' }
    ]}
    itemsSource={this.state.view}>
</WjFlexGrid>

该语法在JSX/React中非常典型,相对于HTML/Angular的用法却相距甚远。

组件和属性的名称不包含任何的连字符(JSX最终将成为JavaScript)。指定给属性的值可以是字面值(用引号括起来),或者也可能是JavaScript对象(用一对花括号括起来)。

在本示例中,我们设置了grid的columns属性为一个包含列属性的项目的数组。不需要任何特殊的组件来定义grid的列。

这里有另外一个示例,创建并绑定了一个ComboBox控件:

<WjComboBox
    text={this.state.view.currentItem.name}
    itemsSource={this.state.names}
    isEditable={true}
    required={false}
    placeholder="Name"
    textChanged={this.nameChanged}>
</WjComboBox>

该示例将非常有趣,因为它展示了如何实现一个双向绑定。当当前项目发生变化时,该ComboBox的text属性将被自动设置。这是标准的单向绑定,由React及其组件内建支持。

当最终用户编辑其中的文本时,ComboBox将不会自动地将此新值应用给绑定的数据对象。组件必须自行处理textChanged事件,并将此新值同步给数据对象。在本示例中,这一过程通过处理App组件(该组件包含此ComboBox)的“nameChanged”方法实现:

var App = React.createClass({
  // 初始化模型:
  getInitialState: function() {
      return { names: names, view: view }
  },
  // 双向绑定
  nameChanged: function(s, e) {
    this.state.view.currentItem.name = s.text;
    this.state.view.refresh();
    this.forceUpdate();
}

这是在React应用程序中实现双向绑定的标准方式。处理changed事件通知并通过改变组件状态已应用此新值。

试试看吧!

“wijmo.react.js” 文件没有包含在Wijmo的正式发布包中,但是您可以从github上获取:

https://github.com/Bernardo-Castilho/WijmoReact

您可以在以下示例中看到并体验最终效果:

http://bernardo-castilho.github.io/WijmoReact/default.htm

我们期待您的反馈!

目前Wijmo还没有“官方地”支持React。 “wijmo.react.js” 文件仅包含Wijmo可用控件的很少一部分,同时一些功能(比如说grid单元格模板)尚未支持。

如果您计划使用React,并且希望我们在Wijmo的平台上正式地支持React(连同Angular 1.x,2.x,以及KnockoutJS),或者您有任何的建议和需求,请向我们发回您的 反馈