与第三方库协同

Integrating With Other Libraries

• 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

  • 很多 jQuery 绑定事件监听到 DOM 上，使用 componentWillUnmount 来注销监听是很必要的

  • 如果这个插件没有提供一个用于清理的方法，你需要自己来实现一个

  • 为了避免内存泄漏，要把所有的插件注册的监听都移除掉

和其他视图库集成

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