草庐IT

javascript - 从 'react' 导入 * 作为 React； vs 从 'react' 导入 React；

coder 2024-07-15 原文

我注意到 React 可以这样导入:

import * as React from 'react';

...或者像这样:

import React from 'react';

第一个导入 react 模块中的所有内容(参见:Import an entire module's contents)

第二个仅导入 default 模块导出(参见:Importing defaults)

这两种方法似乎不同，而且根本不兼容。

为什么它们都有效？

请引用源代码并解释机制...我有兴趣了解它是如何工作的。

更新

这不是 What is the difference between import * as react from 'react' vs import react from 'react' 的副本

这个问题用一般的 ES6 模块信息回答了。

我问的是使 react 模块像这样工作的机制。这似乎与“hacky”导出机制有关in the source here但目前尚不清楚如何将 entire 模块和 default 导出到 React 中，并让这两种方法都与转译 JSX 一起工作等

最佳答案

长话短说

事实上 ES import 语句 import default 和 import * 不是一回事，在这种情况下它们表现相同的事实是 React 作者如何选择的组合在 TypeScript 中发布库和兼容层(使用 esModuleInterop)或 Babel 和你的 bundler ，使它们“正常工作”。根据 ES6 规范，它可能不应该工作，但今天我们仍然工作在一个 JS 模块一团糟的时代，所以像 Babel、TypeScript、Webpack 等工具试图规范行为。

更多详情:

React 不是 ES6 库。如果你看the source code你在 index.js 中看到这个:

const React = require('./src/React');

// TODO: decide on the top-level export form.
// This is hacky but makes it work with both Rollup and Jest.
module.exports = React.default || React;

(请注意评论，即使在 React 源代码中，他们也与 ES6 默认导出兼容性作斗争。)

module.exports = 语法是 CommonJS (NodeJS)。浏览器不会理解这一点。这就是我们使用 Webpack、Rollup 或 Parcel 等打包工具的原因。他们了解各种模块语法并生成应在浏览器中运行的包。

但即使 React 不是 ES 库，TypeScript 和 Babel 都允许您导入它，就像它是一样(使用 import 语法，而不是 require()，等)，但 CJS 和 ES 之间存在差异，必须解决。其中之一是 export = 可以 为您提供 ES 没有符合规范的导入方式的东西，例如作为模块的函数或类。为了解决这些不兼容问题，Babel 暂时允许您导入 CJS 模块，就好像它们默认导出某些东西一样，或导入为命名空间。 TypeScript 有一段时间没有这样做，但最近将其添加为 esModuleInterop 下的一个选项。所以现在 Babel 和 TypeScript 都可以非常一致地允许使用默认或命名空间 ES 导入导入 CJS 模块。

对于 TypeScript，它还取决于库的类型定义的实际定义方式。我不会深入讨论这个问题，但您可以想象这样的情况:由于转译器和 bundler ，特定导入在运行时可以，但 TypeScript 无法编译而不会出现错误。

另一件值得一提的事情是，如果您查看 React 的构建代码，就会发现一个 UMD module。版本以及 CJS 版本。 UMD 版本包含一些粗糙的运行时代码，试图使其在任何模块环境(包括浏览器)中工作。它主要用于如果你只想在运行时包含 React(即你不使用 bundler )。 Example .

令人困惑？是的，我想是的。 :)

关于javascript - 从 'react' 导入 * 作为 React； vs 从 'react' 导入 React；，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55285737/

ampReactcodejavascriptreactjstypescriptreact-nativeecmascript-6

有关javascript - 从 'react' 导入 * 作为 React； vs 从 'react' 导入 React；的更多相关文章

  1. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

  2. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  3. ruby-on-rails - Railstutorial : db:populate vs. 工厂女孩 - 2

    在railstutorial中，作者为什么选择使用这个(代码list10.25):http://ruby.railstutorial.org/chapters/updating-showing-and-deleting-usersnamespace:dbdodesc"Filldatabasewithsampledata"task:populate=>:environmentdoRake::Task['db:reset'].invokeUser.create!(:name=>"ExampleUser",:email=>"example@railstutorial.org",:passwo

  4. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  5. ruby - 在 jRuby 中使用 'fork' 生成进程的替代方案？ - 2

    在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',

  6. ruby - RSpec - 使用测试替身作为 block 参数 - 2

    我有一些Ruby代码，如下所示:Something.createdo|x|x.foo=barend我想编写一个测试，它使用double代替block参数x，这样我就可以调用:x_double.should_receive(:foo).with("whatever").这可能吗？ 最佳答案 specify'something'dox=doublex.should_receive(:foo=).with("whatever")Something.should_receive(:create).and_yield(x)#callthere

  7. ruby - 主要 :Object when running build from sublime 的未定义方法 `require_relative' - 2

    我已经从我的命令行中获得了一切，所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时，我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗？我正在使用OSX并安装了rvm。 最佳答案 或者，您可以只使用“require”，它应该可以正常工作。我认为“require_relative”仅适用于ruby​​1.9+ 关于ruby-主要:Objectwhenrun

  8. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

    我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

  9. ruby-on-rails - 新 Rails 项目 : 'bundle install' can't install rails in gemfile - 2

    我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="

  10. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

随机推荐