与第三方库协同
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(); }
}
```
render() 函数返回一个空的 div,这个 div 元素既没有属性也没有子元素,所以 React 没有理由去更新它,这使得 jQuery 可以自由的管理这部分的 DOM
注意:
同时定义了 componentDidMount 和 componentWillUnmount
很多 jQuery 绑定事件监听到 DOM 上,使用 componentWillUnmount 来注销监听是很必要的
如果这个插件没有提供一个用于清理的方法,你需要自己来实现一个
为了避免内存泄漏,要把所有的插件注册的监听都移除掉
和其他视图库集成
得益于 ReactDOM.render() 的灵活性 React 可以被嵌入到其他的应用中
最后更新于
这有帮助吗?