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

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

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

需要注意的是，我們定義了componentDidMount() 和componentWillUnmount() 兩個(gè)生命周期的鉤子函數(shù)。這是因?yàn)榇蠖鄶?shù)的jQuery插件都將事件監(jiān)聽綁定在DOM上，所以在componentWillUnmount 中一定要移除事件監(jiān)聽。如果這個(gè)插件沒(méi)有提供移除的方法，那你就要自己寫了。一定要記得移除插件所注冊(cè)的事件，否則可能會(huì)出現(xiàn)內(nèi)存泄露。

為了對(duì)這些概念有更深入的了解，我們?yōu)镃hosen 插件寫了一個(gè)小型的wrapper。Chosen 插件的參數(shù)是一個(gè)

注意，雖然可以這樣用，但這并不是最好的方式。我們推薦盡可能的使用react組件。這樣在react應(yīng)用中可以更好的復(fù)用，而且會(huì)有更好的使用效果

首先，讓我們來(lái)看看Chosen 插件對(duì)DOM元素做了什么。
如果你在對(duì)一個(gè)

節(jié)點(diǎn)應(yīng)用了該組件。它會(huì)讀取原始DOM節(jié)點(diǎn)的屬性，使用內(nèi)聯(lián)樣式隱藏它。并且使用自己的展示方式在節(jié)點(diǎn)后面插入新的DOM節(jié)點(diǎn)。然后它觸發(fā)jQuery的事件來(lái)通知我們這些改變。

這就是我們想要我們的Chosen 插件包裝完成的功能

function Example() {
  return (
     console.log(value)}>
      vanilla
      chocolate
      strawberry
    
  );
}

為了簡(jiǎn)單起見(jiàn)，我們使用一個(gè)非受控組件來(lái)實(shí)現(xiàn)它
首先，我們創(chuàng)建一個(gè)只有render方法的組件。在render方法中我們返回一個(gè)

componentDidMount() {
  this.$el = $(this.el);
  this.$el.chosen();
}

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

記住，react 不會(huì)對(duì)this.el 字段賦予任何特殊的含義。除非你之前在render方法里面對(duì)它進(jìn)行賦值。

 this.el = el}>
以上對(duì)于在render 里面獲取你的組件就足夠了，但是我們還希望值變化時(shí)能給實(shí)現(xiàn)通知。因?yàn)椋覀兺ㄟ^(guò)Chosen 在上 訂閱了jQuery 的change事件。

我們不會(huì)直接的將this.props.onChange傳給Chosen. 因?yàn)榻M件的屬性可能會(huì)一直改變，而且這里還包含著事件的處理。因?yàn)?，我們聲明了一個(gè)handleChange方法來(lái)調(diào)用this.props.onChange.并且為它訂閱了jQuery的change事件中。也就是說(shuō)，只要一發(fā)生change 事件。就會(huì)自動(dòng)執(zhí)行handleChange 方法。
componentDidMount() {
  this.$el = $(this.el);
  this.$el.chosen();

  this.handleChange = this.handleChange.bind(this);
  this.$el.on("change", this.handleChange);
}

componentWillUnmount() {
  this.$el.off("change", this.handleChange);
  this.$el.chosen("destroy");
}

handleChange(e) {
  this.props.onChange(e.target.value);
}
最后，我們還有一件事要做。在React 中，由于屬性是可以一直改變的。例如，組件能夠獲取不同的children 如果父組件狀態(tài)改變的話。這意味著在交互過(guò)程中，很重要的一點(diǎn)是，當(dāng)屬性改變時(shí)，我們需要手動(dòng)的控制DOM的更新，不再需要react 來(lái)為我們管理DOM節(jié)點(diǎn)了。
Chosen 的文檔建議我們使用jQuery 的trigger() 方法來(lái)通知原始DOM元素的變化。我們將使React重點(diǎn)關(guān)注在中的屬性this.props.children 的更新。但是我們同時(shí)也在componentDidUpdate 的生命周期函數(shù)里添加通知Chosen 他的children 列表變化的函數(shù)。

componentDidUpdate(prevProps) {
    if (preProps.children !== this.props.children) {
        this.$el.trigger("chosen:updated");
    }
}
通過(guò)這種方式，當(dāng)通過(guò)React 管理的 節(jié)點(diǎn)改變的時(shí)候，Chosen 就會(huì)知道需要更新DOM元素了。
class Chosen extends React.Component {
    componentDidMount() {
        this.$el = $(this.el);
        this.$el.chosen();
        this.handleChange = this.handleChange.bind(this);
        this.$(el).on("change", this.handleChange);
    }
    
    componentDidUpdate(prevProps) {
        if (prevProps.children !== this.props.children) {
            this.$el.trigger("chosen:updated");
        }
    }
    
    componentWillUnmount() {
        this.$el.off("change", this.handleChange);
        this.$el.chosen("destory");
    }
    
    handleChange(e) {
        this.props.onChange(e.target.value);
    }
    
    render() {
        return (
            

                 this.el = el}>
                    {this.props.children}
                
            
        );
    }
}
和其他的View 庫(kù)共用
由于ReactDOM.render()方法的靈活性使得React可以被嵌入到其他的應(yīng)用中。
由于React 通常被用來(lái)將一個(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ù)器渲染的模版中或者其他的客戶端代碼中。
使用React替換基于字符串的渲染
在一些老的web 應(yīng)用,一種常見(jiàn)的方式是寫一大段DOM結(jié)構(gòu)作為字符串，然后使用$el.html(htmlString) 的方式插入到DOM節(jié)點(diǎn)中。如果你的代碼庫(kù)中有類似的場(chǎng)景，那么推薦你使用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!");
    });
  }
);
接下來(lái)，你可以將更多的業(yè)務(wù)邏輯移到react組件中去并且采用更多react 實(shí)踐方式。例如，組件最好不要依賴id，因?yàn)橥瑯拥慕M件可能會(huì)被渲染多次。而且，我們推薦使用react 的事件系統(tǒng)，直接在組件元素上注冊(cè)事件處理。

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 中使用越來(lái)越多的react 技術(shù)，你就可以將這些獨(dú)立的組件整合成更大的組件。同時(shí)，將一些ReactDOM.render() 的調(diào)用移動(dòng)到不同的層級(jí)中。

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

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

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

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

在React 組件中消費(fèi)Backbone中model和collections 最簡(jiǎn)單的方法是監(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() 來(lái)使用新數(shù)據(jù)重新渲染組件。

下面的例子中，List 組件會(huì)渲染一個(gè)Backbone 容器。并且使用Item 組件來(lái)渲染各個(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 => (
          
        ))}
      
    );
  }
}

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

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

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

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

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

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

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