这是什么要求语法？

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。根据 link:

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

例如：

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

会给你：

a = 3
b = "foo"

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

现在介绍 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。这真的无关紧要，因为它们都从模块中导入特定名称。

这是什么要求语法？

What is this require syntax?

react-native

ecmascript-6

react-jsx