# 与第三方库协同

* React 可以被用于任何 Web 应用中
* 它可以被嵌入到其他应用中，其他应用也可以嵌入到 React

## 集成带有 DOM 操作的插件

* React 不会理会 React 自身之外的 DOM 操作 它根据内部虚拟 DOM 来决定是否需要更新
* 如果同一个 DOM 节点被另一个库操作了，React 会觉得困惑而且没办法恢复
* 这不意味着 React 与其他操作 DOM 的方式不能结合，也不一定结合困难，只不过需要你去关注每个库所做的事情
* 避免操作最简单的方法就是 防止 React 组件更新。
  * 你可以渲染无需更新的 React 元素，比如一个空的 div

### 如何解决这个问题

* 这是一个用于通用 jQuery 插件的 wrapper

  \`\`\`jsx harmony

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

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

render() {
    return <div ref={el => this.el = el} />
}
```

}

\`\`\`

* render() 函数返回一个空的 div，这个 div 元素既没有属性也没有子元素，所以 React 没有理由去更新它，这使得 jQuery 可以自由的管理这部分的 DOM
* 注意：
  * 同时定义了 componentDidMount 和 componentWillUnmount&#x20;
  * 很多 jQuery 绑定事件监听到 DOM 上，使用 componentWillUnmount 来注销监听是很必要的
  * 如果这个插件没有提供一个用于清理的方法，你需要自己来实现一个
  * 为了避免内存泄漏，要把所有的插件注册的监听都移除掉

## 和其他视图库集成

* 得益于 ReactDOM.render() 的灵活性 React 可以被嵌入到其他的应用中