為了更好的闡述這個問題，讓我們來對一個一般的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中。