面试:require 和 import 的区别?

20,097

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

前言

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

codesandbox demo

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的区别

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

commonjs 输出的,是一个值的拷贝,而es6输出的是值的引用;

commonjs 是运行时加载,es6是编译时输出接口;

require和import的性能

require 的性能相对于 import 稍低。

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

结语

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

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