zoukankan      html  css  js  c++  java
  • react/React Native 在 import 导入时,有的带花括号{},有的不带原理解析

    在使用import引用模块时,如何正确使用{}

    例如:有两个文件,home.js、user.js

    一:不使用{}:

    当需要在home.js中引入user.js的时候

    //home.js 文件中
    import user from './user';
    对于上面的这种引入方法,只有user.js文件中提供默认的export defulat导出(必须是默认导出),这样在home.js文件中就可以使用user了。如下

    //user.js 文件中
    export default 'nihao'
    在这种不使用{}来引用模块的情况下,import模块时的命名是随意的,即如下三种引用命名都是正确的:

    // home.js文件中
    import user from './user'
    import user2 from './user'
    import anyUser from './user'
    因为它总是会解析到user.js中默认的export default。

    二:使用花括号命名的方法{user}来导入user.js:

    import { user } from './user'
    上面代码生效的前提是,只有在模块user.js中有如下命名导出为user的export 的代码,也就是:

    //user.js 文件中
    export const user = 42
    而且,在明确声明了命名导出后,那么在另一个js中使用{}引用模块时,import时的模块命名是有意义的,如下:

    // home.js 文件中
    import { user } from './user' // 正确,因为user.js中有命名为user的export (注意是非默认导出)
    import { user2 } from './user' // 错误!因为user.js中没有命名为user2的export
    import { anyUser } from './user' // 错误!因为user.js中没有命名为anyUser的export
    要想上述代码正确执行,你需要明确声明每一个命名导出:

    一个模块中只能有一个默认导出export default,但是却可以有任意命名导出(0个、1个、多个),你也可以如下,一次性将他们导入:

    // user.js
    import user, { user2, anyUser } from './user'
    这里我们使用默认导出的user,以及命名导出user2和anyUser。

    原文:https://blog.csdn.net/Chris__wang/article/details/82977626

  • 相关阅读:
    Dijkstra模版
    Trie树|字典树的简介及实现
    hdoj_2066一个人的旅行
    什么是java对象的强、软、弱和虚引用
    cxf调用客户端的方法
    CXF几种客户端调用性能
    csf几种调用的性能考虑
    cxf生成服务器端
    CXF在jdk1.6中运行异常解决
    CXF几种客户端调用性能
  • 原文地址:https://www.cnblogs.com/richard-youth/p/10431896.html
Copyright © 2011-2022 走看看