这需要什么语法？

Question

我对import和require的某些语法感到有点困惑。有时我会看到如下语法：

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

这意味着在这种情况下，react-native被放入React变量，然后var { ...} = React意味着我们只选择要在项目中使用的那些组件？

有时我也会看到以下语法：

import {
  Animated,
  View,
  Text,
} from 'react-native';

这两者之间有什么区别，它们是否相似，我应该根据偏好使用什么？

Answer 1

那是destructuring assignment。根据链接：

  

解构赋值语法是一个JavaScript表达式，可以将数组中的值或对象的属性解包为不同的变量。

例如：

var { a, b } = {
  a: 3,
  b: "foo"
}

会给你：

a = 3
b = "foo"

现在，关于require。 require函数返回模块对象，它只是一个将所有导出作为属性的对象。使用解构赋值将解包这些导出（因为它们是模块对象的属性），并且只为您提供模块的某些名称导出。

现在转到import语法。虽然这似乎是它的解构分配，但事实并非如此。它是import的许多语法之一，它从模块导入命名导出。基本上它与上面的内容完全相同，但不是解构赋值。这两个选项都允许您执行以下操作。考虑一个名为square的模块：

//square.js
export function square(n) {
    return n * n;
}

我能做到：

var module = require("path/to/square.js"); //require returns an object that has all the exports attached as properties
module.square(3); //9

或者：

var { square } = require("path/to/square.js"); 
square(3); //9

import { square } from "path/to/square.js";
square(3); //9

最后两个之间的区别在于，一个是ECMAScript 2015，另一个是ECMAScript 5.这无关紧要，因为它们都从模块中导入特定名称。