ReactJS - 与其他库集成
尽管 React 提供了创建完整 Web 应用程序所需的所有功能，但由于遗留系统在另一个库中编码、从另一个框架迁移等原因，与其他库集成是必须的，React 可以与其他库共存，并提供与其他系统一起使用所需的基础架构。
在本章中，让我们看看如何将 React 组件与其他库(如 jQuery、backbone 等)一起使用。
基于 CreateRoot 的集成
React 使用 ReactDOMClient 模块中的 createRoot() 方法将自身附加到主 HTML 文档。createRoot() 不会干扰除附加元素之外的 HTML 文档。开发人员可以利用此行为在同一文档中混合多个库。
让我们看看如何通过将 React 应用程序附加到单独的元素中，将 jQuery 和 React 组件集成到单个文档中。
首先，创建一个新的 React 应用程序并使用以下命令启动它。
create-react-app myapp cd myapp npm start
接下来，在组件文件夹 (src/components/Hello.js) 下创建一个 React 组件 Hello
import React from "react";
class Hello extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div>Hello, {this.props.name}</div>
);
}
}
export default Hello;
接下来，打开index.html (public/index.html)并添加一个新容器(jquery-root)，如下所示 −
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<script src="https://code.jquery.com/jquery-3.6.1.slim.min.js"></script>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div style="padding: 10px;">
<div id="root"></div>
<div id="jquery-root"></div>
</div>
<script>
$(document).ready(function() {
$("#jquery-root").text("Hello, from jQuery")
})
</script>
</body>
</html>
这里，
jQuery 库通过 CDN 链接
它通过 $(document).ready 方法按传统方式初始化
并使用 jQuery 选择器 (#jquery-root) 和文本方法附加消息
接下来，打开 index.js (src/index.js) 并将我们的 hello 组件附加到根容器中，如下所示 −
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Hello from './Components/Hello';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Hello name="from React" />
</React.StrictMode>
);
reportWebVitals();
这里，
使用 createRoot() 方法附加 React 应用程序。
将 Hello 组件渲染到 HTML 文档的根元素中。
最后，在浏览器中打开应用程序并检查结果。react 和 jQuery 库都会发出 hello 消息，如下所示 −
Ref 基于集成
一般来说，React 不知道其他库执行的任何 DOM 操作。因此，要将 React 与其他库一起使用，React 不应进行任何 DOM 操作，而应将所有更改转发给其他库。
众所周知，React 提供了一个名为 Ref 的出口，用于操作 DOM 元素而不影响/受状态更改的影响。开发人员可以利用这些功能创建其他库的包装器 React 组件，并在 React 应用程序中使用它。在 React 组件中使用其他库的标准步骤如下，
创建一个 React 组件并渲染一个空的 div
render() {
return <div />
}
将 ref 附加到渲染的 div，如下所示 −
render() {
return <div ref={el => this.el = el} />
}
在 componentDidMount() 生命周期事件中使用附加的 ref 操作 dom 元素，如下所示 −
componentDidMount() {
this.$el = $(this.el);
this.$el.somePlugin(); // create dom
// 根据需要调用 this.$el.pluginAPI()
}
在 componentWillUnmount() 生命周期事件中使用附加的 ref 销毁 dom 元素，如下所示−
componentWillUnmount() {
this.$el.somePlugin('destroy'); // destroy dom
// this.$el.destroyAPI() 从 dom 中删除元素
}
让我们在下一节中应用这些技术将 jQuery 插件集成到应用程序中。
JQuery slick 插件集成
让我们尝试将 slick jquery 插件(https://github.com/kenwheeler/slick)集成到 react 组件中
首先，创建一个新的 react 应用程序并使用以下命令启动它。
create-react-app myapp cd myapp npm start
接下来，安装 slick jQuery 插件
npm install jquery slick-carousel --save
接下来，将 slick 插件包(css 和 assets)中的 slick 文件夹复制到应用程序的公共文件夹中。滑块文件夹的内容如下所示 −
. ├── ajax-loader.gif ├── config.rb ├── fonts │ ├── slick.eot │ ├── slick.svg │ ├── slick.ttf │ └── slick.woff ├── slick-theme.css ├── slick-theme.less ├── slick-theme.scss ├── slick.css ├── slick.js ├── slick.less ├── slick.min.js └── slick.scss
接下来，创建一个简单的组件 ReactSlick (src/Components/ReactSlick.js)，如下所示 −
import React from "react";
import $ from 'jquery';
import slick from 'slick-carousel';
class ReactSlick extends React.Component {
componentDidMount() {
this.$el = $(this.el);
this.$el.slick();
}
componentWillUnmount() {
this.$el.slick('destroy');
}
render() {
return (
<div>
<div ref={el => this.el = el}>
{this.props.children}
</div>
</div>
);
}
}
export default ReactSlick;
这里，
使用 props 中的子元素渲染一个 div
将 ref 附加到 div 元素
在 componentDidMount() 生命周期事件中使用 ref 将插件附加到元素
在 componentWillUnmount 生命周期事件中使用 ref 将插件销毁到元素
接下来，打开 App 组件 (src/App.js) 并使用 ReactSlick 组件更新内容，如下所示 −
import ReactSlick from './Components/ReactSlick';
function App() {
return (
<ReactSlick>
<div className="box"><h1>1</h1></div>
<div className="box"><h1>2</h1></div>
<div className="box"><h1>3</h1></div>
<div className="box"><h1>4</h1></div>
</ReactSlick>
);
}
export default App;
这里，
渲染 ReactSlick 组件
使用四个带有数字(1、2、3 和 4)的 div 作为滑块
接下来，打开 App.css (src/App.css) 并删除所有 CSS 类。然后，打开 index.html (public/index.html) 并添加必要的样式，如下所示 −
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<style>
#root {
margin: auto;
padding-left: 25px;
padding-top: 25px;
width: 300px;
color: gray;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
padding-left : 25px;
text-align: center;
}
.box {
background-color: skyblue;
text-align: center;
color: white
}
</style>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div style="background-color: white; margin: 2px;">
<div id="root"></div>
</div>
</body>
</html>
这里我们有，
更新了根组件的样式
更新了滑块的样式(.box)
包括 slick 插件特定的样式(slick/slick.css 和 slick/slick-theme.css)
最后，在浏览器中打开应用程序。jQuery slick 滑块将通过 React 组件呈现，如下所示 −
摘要
React 提供了多种在同一个项目中使用 react 和其他库的方法。每种集成方法都简单有效。开发人员应避免使用其他库，除非在不可避免的情况下，例如遗留应用程序、迁移应用程序等。
