面试：require 和 import 的区别？

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

require 和 import 在日常的开发过程中是经常使用的已经模块引入的方式，通常在一个项目中，我们基本上不用去关系这些，直接去使用，但是这两种方式的区别是什么呢？今天就通过一段代码来看一下吧...

require/exports

// module.js
    let counts = 1;
    function sayHello() {
        alert(`"hello , ${counts}`)
    }

    setTimeout(() => {
    counts += 2
    }, 3000);

    module.exports = {counts, sayHello};

    index.js
    const { counts, sayHello } = require('./module.js');
    
    // 注意此处的代码结果
    const click = () => {
        console.log('counts: ', counts) // 每次点击事件，打印的 counts 始终为 1
        sayHello(); // 1  ==》 3秒钟后 =>> 3
    }

    ...
    <!-- 此处counts始终是 1 -->
    <p>import {counts}</p> 
    <Button type="primary" onClick={click}>require </Button>

结果分析：在源文件中更改变量的值，通过 require 引入 counts 的变量，拿到的值始终是初始化的值

import/export

// module.js
    let counts = 1;
        function sayHello() {
        alert(`"hello , ${counts}`)
    }
    setTimeout(() => {
        counts += 2
    }, 3000);
    export { counts, sayHello };

    // index.js
    import { counts, sayHello } from './module.js';
    
    // 注意此处的代码结果
    const click = () => {
        console.log('counts: ', counts) // 初始为 1， ==》 3秒钟后 =>> 3
        sayHello(); // 初始为 1， ==》 3秒钟后 =>> 3
    }

    ...
    <!-- 此counts处始终是 1 -->
    <p>import {counts}</p> 
    <Button type="primary" onClick={click}>require </Button>

结果分析：通过 import 引入 counts 的变量，在源文件中修改变量的值后，引入拿到的变量值也会改变。

require和import的区别

导入require 导出 exports/module.exports 是 CommonJS 的标准，通常适用范围如 Node.js
import/export 是 ES6 的标准，通常适用范围如 React
require 是赋值过程并且是运行时才执行，也就是同步加载
require 可以理解为一个全局方法，因为它是一个方法所以意味着可以在任何地方执行。
import 是解构过程并且是编译时执行，理解为异步加载
import 会提升到整个模块的头部，具有置顶性，但是建议写在文件的顶部。

commonjs 输出的，是一个值的拷贝，而es6输出的是值的引用；

commonjs 是运行时加载，es6是编译时输出接口；

require和import的性能

require 的性能相对于 import 稍低。

因为 require 是在运行时才引入模块并且还赋值给某个变量，而 import 只需要依据 import 中的接口在编译时引入指定模块所以性能稍高

结语

如果这篇文章帮到了你，欢迎点赞👍和关注⭐️。

文章如有错误之处，希望在评论区指正🙏🙏。