和其他库（jquery,backbone）一起使用react

为了更好的阐述这个问题，让我们来对一个一般的jquery 插件添加一个wrapper。

首先，我们在这个节点上添加一个ref属性。在componentDidMount 方法里，我们通过获取这个节点的引用，将它传给jquery 插件。

为了避免react 在渲染期间对这个节点进行改变， 我们在render() 方法里面返回了一个空的

class SomePlugin extends React.Component {
  componentDidMount() {
    this.$el = $(this.el);
    this.$el.somePlugin();
  }

  componentWillUnmount() {
    this.$el.somePlugin("destroy");
  }

  render() {
    return 
 this.el = el} />;
  }
}

class Chosen extends React.Component {
  render() {
    return (
      

         this.el = el}>
          {this.props.children}
        
      
    );
  }
}

需要注意的是，我们在标签外加了一个

标签。这很有必要，因为我们后续会在

标签后面添加一个传入的节点。然而，就React而言，

componentDidUpdate(prevProps) {
    if (preProps.children !== this.props.children) {
        this.$el.trigger("chosen:updated");
    }
}

由于ReactDOM.render()方法的灵活性使得React可以被嵌入到其他的应用中。

由于React 通常被用来将一个React 节点渲染到某个DOM元素中，而且ReactDOM.render()可以被UI的各个独立的部分多次调用，小到一个按钮，大到一个app。

事实上，这就是React 在Facebook 被使用的方式。这使得我们可以在React 中一块一块的开发一个应用，并且可以把它整合在现有的服务器渲染的模版中或者其他的客户端代码中。

在一些老的web 应用,一种常见的方式是写一大段DOM结构作为字符串，然后使用$el.html(htmlString) 的方式插入到DOM节点中。如果你的代码库中有类似的场景，那么推荐你使用react。你只需要将使用字符串渲染的部分改成react 组件就可以了。
下面是一个jQuery 的实现

$("#container").html("Say Hello");
$("#btn").click(function() {
  alert("Hello!");
});

改成react 的实现

function Button() {
  return Say Hello;
}

ReactDOM.render(
  ,
  document.getElementById("container"),
  function() {
    $("#btn").click(function() {
      alert("Hello!");
    });
  }
);

接下来，你可以将更多的业务逻辑移到react组件中去并且采用更多react 实践方式。例如，组件最好不要依赖id，因为同样的组件可能会被渲染多次。而且，我们推荐使用react 的事件系统，直接在组件元素上注册事件处理。

function Button(props) {
  return 

Say Hello; } function HelloButton() { function handleClick() { alert("Hello!"); } return ; } ReactDOM.render( , document.getElementById("container") );

你可以有很多这样独立的组件，并且使用ReactDOM.render()方法将他们渲染到不同的DOM节点中。慢慢的，你在app 中使用越来越多的react 技术，你就可以将这些独立的组件整合成更大的组件。同时，将一些ReactDOM.render() 的调用移动到不同的层级中。

将React 嵌入到Backbone 的视图中

Backbone 的视图就是典型的使用HTML 字符串，或者使用一些字符串模版函数来生成这样的字符串，然后将之作为DOM元素的内容。这种处理方式，也能被替换为使用React 组件渲染的方式。

下面，我们将会创建一个Backbone 的视图ParagraphView. 我们会通过渲染一个React 组件，然后使用Backbone 提供的（this.el）方式将它插入到DOM元素中的方式来重写Backbone 的render() 方法. 当然，我们也会使用ReactDOM.render()方法.

function Paragraph(props) {
  return 
{props.text}
;
}

const ParagraphView = Backbone.View.extend({
  render() {
    const text = this.model.get("text");
    ReactDOM.render(, this.el);
    return this;
  },
  remove() {
    ReactDOM.unmountComponentAtNode(this.el);
    Backbone.View.prototype.remove.call(this);
  }
});

很重要的一件事是，我们必须在remove方法中调用 ReactDOM.unmountComponentAtNode() 方法来解除通过react 注册的事件和一些其他的资源。

当一个组件从react树中移除时，一些清理工作会被自动执行。但是因为我们手动的移除了整个树，所以我们必须要调用这个方法来进行清理工作。

和Model 层进行交互

通常我们推荐使用单向数据流比如React state, Flux 或者Redux来管理react 应用。其实，react 也能使用一些其他框架或者库的Model 层来进行管理。

在react 应用中使用Backbone 的model层

在React 组件中消费Backbone中model和collections 最简单的方法是监听各种change 事件并手动进行强制更新。

渲染models 的组件会监听 "change"事件，渲染collections 的组件会监听‘add’和‘remove’事件。然后，调用this.forceUpdate() 来使用新数据重新渲染组件。

下面的例子中，List 组件会渲染一个Backbone 容器。并且使用Item 组件来渲染各个项。

class Item extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange() {
    this.forceUpdate();
  }

  componentDidMount() {
    this.props.model.on("change", this.handleChange);
  }

  componentWillUnmount() {
    this.props.model.off("change", this.handleChange);
  }

  render() {
    return 
{this.props.model.get("text")}
;
  }
}

class List extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange() {
    this.forceUpdate();
  }

  componentDidMount() {
    this.props.collection.on("add", "remove", this.handleChange);
  }

  componentWillUnmount() {
    this.props.collection.off("add", "remove", this.handleChange);
  }

  render() {
    return (
      

        {this.props.collection.map(model => (
          
        ))}
      
    );
  }
}

从Backbone 的Models 中提取数据

上述的处理方式要求你的React 组件能够感知到Backbone 的Models 和 Collections .如果你后续要整合其他的数据管理方案，你可能需要更多关注Backbone 的实现细节了。

解决这个问题的一个方法是，当model 的属性改变时，将它提取为普通的数据，并将这段逻辑保存在一个多带带的地方。下面演示的是一个高阶组件，这个组件将Backbone 的model层的属性转换为state，然后把数据传递给被包裹的组件。

通过这种方式，只有这个高阶组件需要知道Backbone Models的内部细节信息，大部分的组件对Backbone 都是透明的。

下面的例子中，我们会对Model 的属性进行一份拷贝来作为初始state。我们注册了change 事件（在unmounting 中取消注册），当监听到change事件的时候，我们用model 当前的属性来更新state。最后，我们要确保，如果model 的属性自己改变的话，我们不要忘记从老的model上取消订阅，然后订阅新的model。

注意，这个例子不是为了说明和Backbone 一起协作的细节，你更应该通过这个例子了解到处理这类问题的一种通用的方式。

function connectToBackboneModel(WrappedComponent) {
  return class BackboneComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = Object.assign({}, props.model.attributes);
      this.handleChange = this.handleChange.bind(this);
    }

    componentDidMount() {
      this.props.model.on("change", this.handleChange);
    }

    componentWillReceiveProps(nextProps) {
      this.setState(Object.assign({}, nextProps.model.attributes));
      if (nextProps.model !== this.props.model) {
        this.props.model.off("change", this.handleChange);
        nextProps.model.on("change", this.handleChange);
      }
    }

    componentWillUnmount() {
      this.props.model.off("change", this.handleChange);
    }

    handleChange(model) {
      this.setState(model.changedAttributes());
    }

    render() {
      const propsExceptModel = Object.assign({}, this.props);
      delete propsExceptModel.model;
      return ;
    }
  }
}

为了阐述如何来使用它，我们会将一个react组件NameInput 和Backbone 的model 层结合起来使用，并且每次输入发生改变时，就会更新firstName 属性。

function NameInput(props) {
  return (
    

      
      

      My name is {props.firstName}.
    
  );
}

const BackboneNameInput = connectToBackboneModel(NameInput);

function Example(props) {
  function handleChange(e) {
    model.set("firstName", e.target.value);
  }

  return (
    
  );
}

const model = new Backbone.Model({ firstName: "Frodo" });
ReactDOM.render(
  ,
  document.getElementById("root")
);

这些处理技巧不仅限于Backbone. 你也可以使用React 和其他的model 库进行整合，通过在生命周期中订阅它的变化，并且，选择性的，将数据复制到react 的state中。