在CodePen上试用它。

与其他视图库集成

由于灵活性，React可以嵌入到其他应用程序中ReactDOM.render()。

虽然React在启动时通常用于将单个根React组件加载到DOM中，ReactDOM.render()但也可以为UI的独立部分多次调用，该部分可以像按钮一样小，也可以与应用程序一样大。

事实上，这正是Facebook如何使用React。这让我们可以在React中逐个编写应用程序，并将其与我们现有的服务器生成的模板和其他客户端代码结合使用。

用React替换基于字符串的渲染

旧Web应用程序中的一种常见模式是将DOM的块描述为字符串，并将其插入到DOM中，如下所示：$el.html(htmlString)。代码库中的这些点非常适合引入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实践。例如，在组件中，最好不要依赖ID，因为可以多次渲染相同的组件。相反，我们将使用React事件系统，并将点击处理程序直接注册到React元素上：

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

在CodePen上试用它。

您可以拥有任意数量的此类隔离组件，并使用ReactDOM.render()它们将它们呈现给不同的DOM容器。逐渐地，当您将更多应用程序转换为React时，您将能够将它们组合成更大的组件，并将一些ReactDOM.render()调用移动到层次结构中。

在骨干视图中嵌入React

主干视图通常使用HTML字符串或字符串生成模板函数来为其DOM元素创建内容。这个过程也可以用渲染React组件来替换。

下面，我们将创建一个名为Backbone的视图ParagraphView。它将覆盖Backbone的render()函数，将React组件渲染到由Backbone（this.el）提供的DOM元素中。在这里，我们也在使用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); }});

在CodePen上试用它。

我们也呼吁是非常重要ReactDOM.unmountComponentAtNode()的remove方法，以便作出反应注销事件处理程序，并与组件树相关的其他资源，当它被分离。

当一个组件从一个React树中被移除时，清理会自动执行，但因为我们要手动移除整个树，所以我们必须把它称为这个方法。

与模型层集成

虽然通常建议使用单向数据流，例如React状态，Flux或Redux，但React组件可以使用其他框架和库中的模型层。

在React组件中使用Backbone模型

使用React组件的Backbone模型和集合的最简单方法是侦听各种更改事件并手动强制更新。

负责渲染模型的组件将监听'change'事件，而负责渲染集合的组件将监听'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 => ( )) } 
 ); } }

在CodePen上试用它。

从主干模型中提取数据

上述方法要求您的React组件知道Backbone模型和集合。如果您后来计划迁移到另一个数据管理解决方案，则可能需要尽可能少地将有关Backbone的知识集中在代码中。

解决这个问题的一个办法是在模型的属性发生变化时将模型的属性作为普通数据提取出来，并将这个逻辑放在一个地方。以下是一个高阶组件，它将Backbone模型的所有属性提取到状态中，并将数据传递给包装组件。

这样，只有高阶组件需要了解Backbone模型内部，并且应用程序中的大多数组件都可以不依赖于Backbone。

在下面的例子中，我们将复制模型的属性以形成初始状态。我们订阅change事件（并取消订阅卸载），当它发生时，我们用模型的当前属性更新状态。最后，我们确保如果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 ; } } }

为了演示如何使用它，我们将NameInputReact组件连接到Backbone模型，并在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'));

在CodePen上试用它。

这项技术不限于Backbone。您可以通过订阅其生命周期挂钩中的更改并将数据复制到本地React状态，从而将React用于任何模型库。