什么时候应该写{}环绕导入的东西？

Question

请看看这些:

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

正如你所看到的那样,它会输入一些东西,但是为什么React会出现{}这种情况呢？{Component} { AppRegistry, Text, View }

无论如何,我什么时候应该把东西包进去{}？

Answer 1

区别在于文件导出的方式,而{}不是默认导出.只能有一个默认导出.

其中的任何内容{}都是导出的命名导出函数,类或变量的一部分.

如果您查看反应源代码,您将找到以下es5代码.

var ReactComponent = require('./ReactComponent');
...

var React = {
  ...
  Component: ReactComponent,
  ...
}

module.exports = React;

当您import React, { Component }将所有React以及React.Component导入为Component时

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

变

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

这通常用于解构对象,如下所示.

const person = {
  firstName: 'John',
  lastName: 'Doe',
};

const { firstName } = person;

哪个是一样的

person.firstName