这是什么要求语法？

Question

我对@9​​87654321@ 和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。这并不重要，因为它们都从模块中导入特定名称。