react 引入普通js文件

在React中引入普通的JavaScript文件，可以通过以下几种方式：

一、使用import语句（ES6模块化方式）

1. 基础概念
   • ES6引入了模块化的概念，import语句用于在一个模块中导入另一个模块的功能。当引入普通JS文件时，这个JS文件需要遵循一定的模块化规范（例如使用export导出内容）。

• 优势
  • 代码结构清晰，便于维护大型项目的代码。可以实现代码的复用，不同的组件可以共享相同的逻辑代码。
  • 支持按需加载，提高应用的性能。
• 示例
  • 假设有一个名为utils.js的普通JS文件，内容如下：
  • 假设有一个名为utils.js的普通JS文件，内容如下：
  • 在React组件中引入并使用：
  • 在React组件中引入并使用：
• 应用场景
  • 当有一些通用的工具函数（如数学计算函数、字符串处理函数等）或者业务逻辑函数需要在多个组件中使用时，可以将这些函数提取到单独的JS文件中并通过import引入。

二、在HTML中通过<script>标签引入（全局变量方式）

1. 基础概念
   • 在HTML文件中使用<script>标签引入外部的JS文件。这种方式会将JS文件中的代码作为全局脚本执行，定义的全局变量可以在整个页面（包括React组件）中访问。

• 优势
  • 简单直观，对于一些简单的脚本或者第三方库（如果不支持模块化导入的话）比较方便。
• 示例
  • 假设global.js文件内容如下：
  • 假设global.js文件内容如下：
  • 在HTML文件中引入：
  • 在HTML文件中引入：
  • 在React组件中访问：
  • 在React组件中访问：
• 应用场景
  • 对于一些简单的初始化脚本或者与DOM操作相关的全局脚本（在不涉及复杂模块化逻辑的情况下）。不过这种方式在现代React项目中不太推荐，因为容易导致全局命名空间污染和难以维护的代码结构。

三、可能遇到的问题及解决方法

1. 模块未找到错误（Module not found）
   • 原因：
     • 路径错误，可能是相对路径或者绝对路径书写不正确。
     • 如果是使用import方式，被引入的JS文件没有正确地使用export导出内容（对于ES6模块化方式）。
   • 解决方法：
     • 仔细检查文件路径，确保大小写正确（在区分大小写的文件系统中）。
     • 如果是ES6模块化方式，检查被引入文件的export语句是否正确。

• 全局变量污染问题（在使用<script>标签引入时）
  • 原因：
    • 多个全局变量定义可能会相互覆盖或者导致意外的行为。
  • 解决方法：
    • 尽量避免使用这种方式引入复杂的逻辑代码。如果必须使用，可以采用命名空间的方式来组织全局变量，例如将相关的变量放在一个对象中，像var myApp = {var1: value1, var2: value2};。