為了更好的闡述這個(gè)問題，讓我們來對一個(gè)一般的jquery 插件添加一個(gè)wrapper。

首先，我們在這個(gè)節(jié)點(diǎn)上添加一個(gè)ref屬性。在componentDidMount 方法里，我們通過獲取這個(gè)節(jié)點(diǎn)的引用，將它傳給jquery 插件。

為了避免react 在渲染期間對這個(gè)節(jié)點(diǎn)進(jìn)行改變， 我們在render() 方法里面返回了一個(gè)空的

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}
        
      
    );
  }
}

需要注意的是，我們在標(biāo)簽外加了一個(gè)

標(biāo)簽。這很有必要，因?yàn)槲覀兒罄m(xù)會(huì)在

標(biāo)簽后面添加一個(gè)傳入的節(jié)點(diǎn)。然而，就React而言，

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

由于ReactDOM.render()方法的靈活性使得React可以被嵌入到其他的應(yīng)用中。

由于React 通常被用來將一個(gè)React 節(jié)點(diǎn)渲染到某個(gè)DOM元素中，而且ReactDOM.render()可以被UI的各個(gè)獨(dú)立的部分多次調(diào)用，小到一個(gè)按鈕，大到一個(gè)app。

事實(shí)上，這就是React 在Facebook 被使用的方式。這使得我們可以在React 中一塊一塊的開發(fā)一個(gè)應(yīng)用，并且可以把它整合在現(xiàn)有的服務(wù)器渲染的模版中或者其他的客戶端代碼中。

在一些老的web 應(yīng)用,一種常見的方式是寫一大段DOM結(jié)構(gòu)作為字符串，然后使用$el.html(htmlString) 的方式插入到DOM節(jié)點(diǎn)中。如果你的代碼庫中有類似的場景，那么推薦你使用react。你只需要將使用字符串渲染的部分改成react 組件就可以了。
下面是一個(gè)jQuery 的實(shí)現(xiàn)

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

改成react 的實(shí)現(xiàn)

function Button() {
  return Say Hello;
}

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

接下來，你可以將更多的業(yè)務(wù)邏輯移到react組件中去并且采用更多react 實(shí)踐方式。例如，組件最好不要依賴id，因?yàn)橥瑯拥慕M件可能會(huì)被渲染多次。而且，我們推薦使用react 的事件系統(tǒng)，直接在組件元素上注冊事件處理。

function Button(props) {
  return 

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

你可以有很多這樣獨(dú)立的組件，并且使用ReactDOM.render()方法將他們渲染到不同的DOM節(jié)點(diǎn)中。慢慢的，你在app 中使用越來越多的react 技術(shù)，你就可以將這些獨(dú)立的組件整合成更大的組件。同時(shí)，將一些ReactDOM.render() 的調(diào)用移動(dòng)到不同的層級(jí)中。

將React 嵌入到Backbone 的視圖中

Backbone 的視圖就是典型的使用HTML 字符串，或者使用一些字符串模版函數(shù)來生成這樣的字符串，然后將之作為DOM元素的內(nèi)容。這種處理方式，也能被替換為使用React 組件渲染的方式。

下面，我們將會(huì)創(chuàng)建一個(gè)Backbone 的視圖ParagraphView. 我們會(huì)通過渲染一個(gè)React 組件，然后使用Backbone 提供的（this.el）方式將它插入到DOM元素中的方式來重寫B(tài)ackbone 的render() 方法. 當(dāng)然，我們也會(huì)使用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方法中調(diào)用 ReactDOM.unmountComponentAtNode() 方法來解除通過react 注冊的事件和一些其他的資源。

當(dāng)一個(gè)組件從react樹中移除時(shí)，一些清理工作會(huì)被自動(dòng)執(zhí)行。但是因?yàn)槲覀兪謩?dòng)的移除了整個(gè)樹，所以我們必須要調(diào)用這個(gè)方法來進(jìn)行清理工作。

和Model 層進(jìn)行交互

通常我們推薦使用單向數(shù)據(jù)流比如React state, Flux 或者Redux來管理react 應(yīng)用。其實(shí)，react 也能使用一些其他框架或者庫的Model 層來進(jìn)行管理。

在react 應(yīng)用中使用Backbone 的model層

在React 組件中消費(fèi)Backbone中model和collections 最簡單的方法是監(jiān)聽各種change 事件并手動(dòng)進(jìn)行強(qiáng)制更新。

渲染models 的組件會(huì)監(jiān)聽 "change"事件，渲染collections 的組件會(huì)監(jiān)聽‘a(chǎn)dd’和‘remove’事件。然后，調(diào)用this.forceUpdate() 來使用新數(shù)據(jù)重新渲染組件。

下面的例子中，List 組件會(huì)渲染一個(gè)Backbone 容器。并且使用Item 組件來渲染各個(gè)項(xiàng)。

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 中提取數(shù)據(jù)

上述的處理方式要求你的React 組件能夠感知到Backbone 的Models 和 Collections .如果你后續(xù)要整合其他的數(shù)據(jù)管理方案，你可能需要更多關(guān)注Backbone 的實(shí)現(xiàn)細(xì)節(jié)了。

解決這個(gè)問題的一個(gè)方法是，當(dāng)model 的屬性改變時(shí)，將它提取為普通的數(shù)據(jù)，并將這段邏輯保存在一個(gè)多帶帶的地方。下面演示的是一個(gè)高階組件，這個(gè)組件將Backbone 的model層的屬性轉(zhuǎn)換為state，然后把數(shù)據(jù)傳遞給被包裹的組件。

通過這種方式，只有這個(gè)高階組件需要知道Backbone Models的內(nèi)部細(xì)節(jié)信息，大部分的組件對Backbone 都是透明的。

下面的例子中，我們會(huì)對Model 的屬性進(jìn)行一份拷貝來作為初始state。我們注冊了change 事件（在unmounting 中取消注冊），當(dāng)監(jiān)聽到change事件的時(shí)候，我們用model 當(dāng)前的屬性來更新state。最后，我們要確保，如果model 的屬性自己改變的話，我們不要忘記從老的model上取消訂閱，然后訂閱新的model。

注意，這個(gè)例子不是為了說明和Backbone 一起協(xié)作的細(xì)節(jié)，你更應(yīng)該通過這個(gè)例子了解到處理這類問題的一種通用的方式。

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 ;
    }
  }
}

為了闡述如何來使用它，我們會(huì)將一個(gè)react組件NameInput 和Backbone 的model 層結(jié)合起來使用，并且每次輸入發(fā)生改變時(shí)，就會(huì)更新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 庫進(jìn)行整合，通過在生命周期中訂閱它的變化，并且，選擇性的，將數(shù)據(jù)復(fù)制到react 的state中。