react怎么引用外部原生js

React引用外部原生JS的方法主要有以下几种：使用script标签、通过CDN引入、使用npm或yarn安装库、通过Webpack配置。在实际开发中，最常用的方法是通过npm或yarn安装库，因为这种方式更符合现代前端开发的模块化、依赖管理需求。

一、通过script标签引入

在使用React时，最简单的方式是直接在HTML文件中使用<script>标签引入外部JS文件。这种方式适用于一些简单的场景，比如引入一个动画库或一个简单的插件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React App</title>
</head>
<body>
    <div id="root"></div>
    <script src="https://example.com/some-external-library.js"></script>
    <script src="bundle.js"></script>
</body>
</html>

在上述代码中，我们通过<script>标签引入了一个外部的JS库，然后在React组件中直接使用该库提供的全局变量。

二、通过CDN引入

和直接使用<script>标签类似，CDN引入也是一种常见的方式。不同的是，CDN引入可以在开发阶段更方便地加载最新的库，并且减少了服务器的负担。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React App</title>
</head>
<body>
    <div id="root"></div>
    <script src="https://cdn.jsdelivr.net/npm/some-external-library@latest/dist/some-external-library.min.js"></script>
    <script src="bundle.js"></script>
</body>
</html>

这种方式更适合在开发阶段使用，但在生产环境中，建议使用本地托管的方式以减少外部依赖。

三、使用npm或yarn安装库

这是现代前端开发中最推荐的方式，通过npm或yarn安装外部JS库，然后在React组件中使用import语法引入。这种方式不仅可以方便地管理依赖，还能更好地进行版本控制。

npm install some-external-library 或者 yarn add some-external-library

安装完成后，可以在React组件中使用：

import React from 'react';
import someLibrary from 'some-external-library';
class MyComponent extends React.Component {
    componentDidMount() {
        someLibrary.doSomething();
    }
    render() {
        return (
            <div>
                My Component
            </div>
        );
    }
}
export default MyComponent;

四、通过Webpack配置

如果需要更灵活的配置，可以通过Webpack来引入外部JS文件。首先，在Webpack的配置文件中添加以下配置：

module.exports = {
    // 其他配置
    externals: {
        'some-external-library': 'SomeExternalLibrary'
    }
};

然后在React组件中使用：

import React from 'react';
class MyComponent extends React.Component {
    componentDidMount() {
        const SomeExternalLibrary = window.SomeExternalLibrary;
        SomeExternalLibrary.doSomething();
    }
    render() {
        return (
            <div>
                My Component
            </div>
        );
    }
}
export default MyComponent;

五、其他细节和注意事项

1、命名冲突

在引入外部JS库时，特别要注意命名冲突问题。为了避免这种情况，可以使用ES6模块的命名空间功能：

import * as SomeLibrary from 'some-external-library';

2、异步加载

对于一些体积较大的JS库，可以考虑使用异步加载的方式。React官方推荐使用React.lazy和Suspense来进行代码分割和懒加载：

const SomeComponent = React.lazy(() => import('some-external-library'));
function MyComponent() {
    return (
        <React.Suspense fallback={<div>Loading...</div>}>
            <SomeComponent />
        </React.Suspense>
    );
}

3、结合项目管理工具

在复杂的项目中，使用项目管理工具如PingCode和Worktile可以更好地管理代码和依赖。PingCode专注于研发项目管理，而Worktile则是一个通用的项目协作软件。这些工具可以帮助团队更高效地协作和管理项目。

六、实例解析

为了更好地理解上述方法，下面给出一个具体的实例。假设我们要在React项目中使用一个名为example-library的外部JS库。

1、通过npm安装

npm install example-library 或者 yarn add example-library

2、在React组件中使用

import React from 'react';
import ExampleLibrary from 'example-library';
class ExampleComponent extends React.Component {
    componentDidMount() {
        ExampleLibrary.initialize();
    }
    render() {
        return (
            <div>
                Example Component
            </div>
        );
    }
}
export default ExampleComponent;

3、通过Webpack配置

修改webpack.config.js文件：

module.exports = {
    // 其他配置
    externals: {
        'example-library': 'ExampleLibrary'
    }
};