React:如何在同一页面中使用同一组件两次，但只加载一次脚本标记

在同一页面中使用同一组件两次，但只加载一次脚本标记，可以通过以下步骤实现：

首先，确保你已经正确地引入了React库和相关组件的脚本标记。
创建一个React组件，并在组件中定义你需要的功能和样式。
在页面中使用该组件的第一次实例时，正常地引入组件的脚本标记，并将其渲染到页面上的相应位置。
在页面中使用该组件的第二次实例时，不再引入组件的脚本标记，而是通过React的cloneElement方法克隆第一次实例，并将其渲染到页面上的另一个位置。

以下是一个示例代码：

// 引入React库和相关组件的脚本标记
<script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.development.js"></script>

// 创建一个React组件
class MyComponent extends React.Component {
  render() {
    return (
      <div>
        // 组件的功能和样式
      </div>
    );
  }
}

// 在页面中使用该组件的第一次实例
ReactDOM.render(<MyComponent />, document.getElementById('first-instance'));

// 在页面中使用该组件的第二次实例
const firstInstance = document.getElementById('first-instance');
const secondInstance = document.getElementById('second-instance');
ReactDOM.render(React.cloneElement(<MyComponent />, { key: 'second-instance' }), secondInstance);

在上述示例中，我们首先引入了React库和相关组件的脚本标记。然后，我们创建了一个名为MyComponent的React组件，并在页面中使用了两次。

第一次实例化时，我们正常地引入了组件的脚本标记，并将其渲染到了页面上的一个具有唯一ID的元素中。

第二次实例化时，我们没有再次引入组件的脚本标记，而是通过React的cloneElement方法克隆了第一次实例，并将其渲染到了页面上的另一个具有唯一ID的元素中。

这样，我们就在同一页面中使用了同一组件两次，但只加载了一次脚本标记。