如何从jQuery转到React.js？

Question

我已经读了React几天了.我能理解我正在看的大部分内容,但我对写作能力并不完全有信心.我一直在研究一个小型的Web应用程序,它通过jQuery完成所有html生成并相互追加元素.我想尝试使用React重建它,因为我相信它会更快.这个JSFiddle是我正在做的事情的一个小例子.你会怎么用React写的？

JS:

function remove() {
    this.remove();
}

function timed_append_new_element() {
    setTimeout(function () {
        var added_content = $("<span />", {
            class: "added_content",
            text: "Click to close",
            click: remove
        });
        container.append(added_content);
    }, 3000);
}

function append_new_element() {
    var added_content = $("<span />", {
        class: "timed_added_content",
        text: "Click to close",
        click: remove
    });
    container.append(added_content);
}


var container = $("<div />", {
    class: "container"
});
var header = $("<span />", {
    class: "header",
    text: "jQuery to React.js Header"
});
var add_button = $("<button />", {
    class: "add_button",
    text: "Add Element",
    click: append_new_element
});
var timed_add_button = $("<button />", {
    class: "add_button",
    text: "Add Element in 3 seconds",
    click: timed_append_new_element
});
container.append(header);
container.append(add_button);
container.append(timed_add_button);
$("body").append(container);

Answer 1

有一些基本的原则可以帮助您构建一个好的React应用程序:

您的UI应该是数据的函数

在许多"jQuery汤"风格的应用程序中,应用程序的业务逻辑,应用程序的数据和UI交互代码都是混合在一起的.这使得这些类型的应用程序难以调试,尤其难以增长.与许多现代客户端应用程序框架一样,React强制要求UI只是数据的表示.如果您希望更改UI,则应更改一段数据并允许框架使用的任何绑定系统为您更新UI.

在React中,每个组件(理想情况下)是两个数据的函数 - 传递给组件实例的属性,以及组件在内部管理的状态.给定相同的属性(或"props")和状态,组件应以相同的方式呈现.

如果没有具体的例子,这可能是一个抽象的想法,所以在我们继续前进时要记住它.

不要触摸DOM

在React中,甚至比其他数据绑定框架更重要的是,如果可能的话,你应该尽量不直接操作DOM.很多React的性能和复杂性特性都是可能的,因为React在内部使用带有差异算法的虚拟DOM来操作真正的DOM.每当你构建一个伸出并执行自己的DOM操作的组件时,你应该问自己是否可以使用React的虚拟DOM功能更具惯用地构建相同的功能.

当然,有时你需要访问DOM,或者你想要合并一些jQuery插件而不在React中重建它.在这些时候,React为您提供了良好的组件生命周期钩子,您可以使用它来确保React的性能不会受到太大影响(或者,在某些情况下,保持组件不会破坏).

不操纵DOM与上面的"UI作为数据的函数"相辅相成.

反转数据流

在大型React应用程序中,可能难以跟踪哪个子组件正在管理某个应用程序数据.因此,React团队建议将数据操作逻辑保存在中心位置.最直接的方法是将回调传递给子组件; Facebook还开发了一个名为Flux的架构,它拥有自己的网站.

创建可组合组件

很多时候,编写管理多个状态或几个UI逻辑的大型组件可能很诱人.在可能的情况下(并且在合理范围内),您应该考虑将较大的组件分解为在单个数据或UI逻辑上运行的较小组件.这使得扩展和移动应用程序的各个部分变得更加容易.

注意可变数据

由于组件状态只能通过this.setState组件内部的调用进行更新,因此警惕可变数据会很有帮助.当多个函数(或组件!)可能在同一个tick中更新可变对象时,这是双重的.React可能会尝试批量更改状态,您可能会丢失更新!正如Eliseu Monar的评论中所提到的,考虑在变异之前克隆可变对象.React拥有可以提供帮助的不变性助手.

另一种选择是放弃直接在州内保持可变数据结构; 上面提到的Flux模式对这个想法很有意思.

React网站上有一篇很棒的文章名为Thinking in React,它讨论了如何将一个想法或一个模型转化为一个React应用程序,我强烈建议你继续讨论它.作为一个具体的例子,让我们来看看你提供的代码.您基本上需要管理一个数据:container元素中存在的内容列表.您对UI的所有更改都可以通过添加,删除和对该数据的更改来表示.

通过应用上述原则,您的最终应用程序可能如下所示:

/** @jsx React.DOM */

var Application = React.createClass({
  getInitialState: function() {
    return {
      content: []
    };
  },

  render: function() {
    return (
      <div className="container">
        <span className="header">jQuery to React.js Header</span>
        <button className="add_button"
                onClick={this.addContent}>Add Element</button>
        <button className="add_button"
                onClick={this.timedAddContent}>Add Element in 3 Seconds</button>
        {this.state.content.map(function(content) {
          return <ContentItem content={content} removeItem={this.removeItem} />;
        }.bind(this))}
      </div>
    );
  },

  addContent: function() {
    var newItem = {className: "added_content", text: "Click to close"},
        content = this.state.content,
        newContent = React.addons.update(content, {$push: [newItem]});
    this.setState({content: newContent});
  },

  timedAddContent: function() {
    setTimeout(function() {
      var newItem = {className: "timed_added_content", text: "Click to close"},
          content = this.state.content,
          newContent = React.addons.update(content, {$push: [newItem]});
      this.setState({content: newContent});
    }.bind(this), 3000);
  },

  removeItem: function(item) {
    var content = this.state.content,
        index = content.indexOf(item);
    if (index > -1) {
      var newContent = React.addons.update(content, {$splice: [[index, 1]]});
      this.setState({content: newContent});
    }
  }
});

var ContentItem = React.createClass({
  propTypes: {
    content: React.PropTypes.object.isRequired,
    removeItem: React.PropTypes.func.isRequired
  },

  render: function() {
    return <span className={this.props.content.className}
                 onClick={this.onRemove}>{this.props.content.text}</span>;
  },

  onRemove: function() {
    this.props.removeItem(this.props.content);
  }
});

React.renderComponent(<Application />, document.body);

你可以在这个JSFiddle中看到代码:http://jsfiddle.net/BinaryMuse/D59yP/

该应用程序由两个组件组成:一个名为top-level的组件Application,用于管理(在其状态下)一个名为的数组content,以及一个名为的组件ContentItem,它表示该数组中单个项的UI和行为.Application的render方法ContentItem为内容数组中的每个项返回一个元素.

需要注意的一点是,管理content数组内部值的所有逻辑都在Application组件中处理; 该ContentItem成分被送到一个参考到Application的removeItem方法,其中所述ContentItem点击时委托给.这保留了在顶层组件内操作状态的所有逻辑.