Question

这两个陈述之间有什么区别

import React from 'react';

和

import React, { Component } from 'react';

不应该从'react'导入React 导入包括内容在内的所有内容？我应该阅读什么来理解这一点？

Answer 1

使用

import React, { Component } from 'react';

你可以做到

class Menu extends Component { /* ... */ }

而不是

class Menu extends React.Component { /* ... */ }

来自：Import React vs React, { Component }

Answer 2

您可以阅读此here。

导入没有花括号的内容会导入您导入的模块中定义为default export的内容。模块中只能有一个（或没有）默认导出。

<强> foo.js ：

const myObject = {foo: 'bar'};
export default myObject;

<强> bar.js ：

import theObject from './foo';

console.log(theObject);
// prints {foo: 'bar'}
// note that default exports are not named and can be imported with another name

使用大括号导入导入模块导出的具有该名称的命名导出的内容。模块中可以有多个命名导出。

<强> foo.js ：

export const myObject = {foo: 'bar'};
export const anotherObject = {bar: 'baz'};

<强> bar.js ：

import {myObject, anotherObject, theObject} from './foo';

console.log(myObject);
// prints {foo: 'bar'}

console.log(anotherObject);
// prints {bar: 'baz'}

console.log(theObject);
// prints undefined
// because nothing named "theObject" was exported from foo.js

Answer 3

这是ES6。

* thread #22, queue = 'Render Style All Queue (QOS: USER_INTERACTIVE)', stop reason = EXC_BAD_ACCESS (code=1, address=0x79315beb8)
    frame #0: 0x00000001819e4430 libobjc.A.dylib`objc_msgSend + 16
    frame #1: 0x00000001a61fc2d8 MetalTools`-[MTLDebugComputeCommandEncoder setSamplerState:atIndex:] + 436
    frame #2: 0x00000001878aa824 CoreImage`CIMetalRenderToTextures + 512
    frame #3: 0x000000018790ee30 CoreImage`CI::MetalContext::compute_quad(CGSize const&, void const**, unsigned long) + 320
    frame #4: 0x000000018790f414 CoreImage`CI::MetalContext::render_node(CI::TileTask*, CI::ProgramNode*, CGRect const&, CGRect const&, void const**, unsigned long) + 508
    frame #5: 0x000000018790fa28 CoreImage`CI::MetalContext::render_root_node(CI::TileTask*, CI::ProgramNode*, CGRect const&, void () block_pointer) + 192
    frame #6: 0x00000001877c9fb8 CoreImage`CI::Context::recursive_render(CI::TileTask*, CI::Node*, CGRect const&, CI::Node*) + 904
    frame #7: 0x00000001877ca564 CoreImage`CI::Context::render(CI::ProgramNode*, CGRect const&) + 116
    frame #8: 0x00000001877f78ec CoreImage`CI::create_cgimage(CI::Context*, CI::Image*, CGRect, CGColorSpace*, CI::PixelFormat, bool, unsigned long) + 2408
    frame #9: 0x000000018778963c CoreImage`-[CIContext(Internal) _createCGImage:fromRect:format:colorSpace:deferred:textureLimit:] + 1088
    frame #10: 0x00000001877882bc CoreImage`-[CIContext createCGImage:fromRect:] + 196
  * frame #11: 0x0000000102f0777c MyApp`TDTMyStyle.adjustImage(saturation=1.10000002, image=0x00000001c02aad40, self=0x00000001c42e5400) at TDTMyStyle.swift:944
    frame #12: 0x0000000102f058c0 MyApp`TDTMyStyle.comp(imageForComp=0x00000001c40bd5e0, scaledStyleImage=0x00000001c02aad40, modelNumber=57, self=0x00000001c42e5400) at TDTMyStyle.swift:811
    frame #13: 0x0000000102f02e00 MyApp`closure #2 in TDTMyStyle.main(self=0x00000001c42e5400, medianCorrectionDiameter=0x000000016d7ae268) at TDTMyStyle.swift:315
    frame #14: 0x0000000102f01ed4 MyApp`thunk for @callee_owned () -> (@error @owned Error) at TDTMyStyle.swift:0
    frame #15: 0x0000000102f03f9c MyApp`thunk for @callee_owned () -> (@error @owned Error)partial apply at TDTMyStyle.swift:0
    frame #16: 0x00000001055d4e1c libswiftObjectiveC.dylib`ObjectiveC.autoreleasepool<A>(invoking: () throws -> A) throws -> A + 68
    frame #17: 0x0000000102efd83c MyApp`TDTMyStyle.main(self=0x00000001c42e5400) at TDTMyStyle.swift:339
    frame #18: 0x0000000102f040fc MyApp`@objc TDTMyStyle.main() at TDTMyStyle.swift:0
    frame #19: 0x0000000102f9a7bc MyApp`TDTMyAppMyStylePreview.main(self=0x00000001c42e5400) at TDTMyAppMyStylePreview.swift:371
    frame #20: 0x0000000102f9aa64 MyApp`@objc TDTMyAppMyStylePreview.main() at TDTMyAppMyStylePreview.swift:0
    frame #21: 0x000000018307d620 Foundation`-[__NSOperationInternal _start:] + 848
    frame #22: 0x000000018314f004 Foundation`__NSOQSchedule_f + 404
    frame #23: 0x000000010572545c libdispatch.dylib`_dispatch_client_callout + 16
    frame #24: 0x0000000105732800 libdispatch.dylib`_dispatch_continuation_pop + 592
    frame #25: 0x000000010573109c libdispatch.dylib`_dispatch_async_redirect_invoke + 628
    frame #26: 0x0000000105736b54 libdispatch.dylib`_dispatch_root_queue_drain + 616
    frame #27: 0x0000000105736880 libdispatch.dylib`_dispatch_worker_thread3 + 136
    frame #28: 0x00000001823ab120 libsystem_pthread.dylib`_pthread_wqthread + 1268
    frame #29: 0x00000001823aac20 libsystem_pthread.dylib`start_wqthread + 4

像

import Raect, { Component } from 'react';

考虑两个文件。 Person.js喜欢

import default_export, { named_export } from 'react';

Utility.js喜欢

const person = {
  name: 'johon doe'
}
export default person; // default export

App.js文件中的inport。像

export const clean = () => { ... } //named export using const keyword
export const baseData = 10; //named export using const keyword

Answer 4

JoãoBelo发表了一个很好的答案，但我还要补充一点。第二个实例使用destructuring和object-shorthand从react模块中获取'Component'属性的值，并将其分配给可在本地使用的'Component'变量。如果你不知道解构和对象速记，你一定要查找它们。它们派上用场了。

Answer 5

首先，这归结为导出变量的方式。我相信，这必须是来自Facebook贡献者的深思熟虑的设计决定。

＆＃13;

export default class ReactExample {}

export class ComponentExample {}
export class ComponentExampleTwo {}

＆＃13;

在上面的示例中，可以在不使用{}的情况下导入ReactExample，而在ComponentExample，ComponentExampleTwo中，您必须使用{}语句导入。

理解的最佳方式是浏览源代码。

React export source code

React Component source code

Answer 6

import * as myCode from './../../myCode';

这会将myCode插入当前范围，其中包含位于./../../myCode的文件中模块的所有导出。

    import React, { Component } from 'react';

    class myComponent extends Component { ... }

通过使用上面的语法，您的bundler（例如：webpack）仍会捆绑ENTIRE依赖项，但由于Component模块是以{ }方式导入命名空间的，因此我们可以引用它使用Component代替React.Component。

有关详细信息，请参阅mozilla ES6 module docs。

React：了解import语句

6 个答案: