是来自'react'`的`import {useState}分解还是不是？

问题描述

我想澄清一件事。

在React中，我们经常使用import {useState,useEffect} from 'react。

我们可以认为这是ES6中的一种破坏功能吗？

解决方法

不，它们是不同的。

虽然它们看起来相似（并且可能 import 被设计为看起来像解构），但它们的行为方式不同。为了清楚说明这一点，importing 使用了稍微不同的语法：使用 as 关键字进行导入重命名，而不是使用解构中熟悉的 :。

这些差异是因为模块系统是如何工作的。其他区别是：

• imported 变量不能由导入器模块分配，但是...

• 导出者可以随时更改 exported 变量，这也将反映在导入者的变量中，这意味着...

• 不可能嵌套导入重命名，就像通过解构实现一样：

  import {foo as {bar as baz}} from './module'; 
  //is invalid,as is:
  import {foo as {bar: baz}} from './module'; 
  //...while:
  
  const {foo: {bar: baz}} = value; 
  //is valid.
  

• 由于模块系统是静态的（如变量），因此无法导入动态键或使用其余语法（所有导入在评估代码之前都是已知的）。 >

,

不。 这不像对象销毁，而是实际上是在导入命名的导出。 更清楚地说，它只是导入导出为useState的模块。

,

看着反应 src code

export {
  useState,// ...
  Children,// ....
} from './src/React';

所以你可以直接从这个对象导入，例如

import { useState } from 'react'
// you can also rename it to anything you want
import { useState as useReactState } from 'react'

或者您可以将整个对象作为默认导出，然后引用其 useState

import React from 'react'

// use React.useState
// renaming will be like assigning a function to another variable e.g.
const useReactState = React.useState

// you also get all exported types and modules and wrap them up in React name 
import * as React from 'react'

Babel 转译输出

import React from 'react'
const Component = () => {
    const [state,setState] = React.useState()
}
// will transpile to something like
var Component = function Component() {
  var _React$useState = _react["default"].useState(),_React$useState2 = _slicedToArray(_React$useState,2),state = _React$useState2[0],setState = _React$useState2[1];
};

另一方面

import {useState} from 'react'
const Component = () => {
    const [state,setState] = useState()
}
// will transpile to something like
var Component = function Component() {
  var _useState = (0,_react.useState)(),_useState2 = _slicedToArray(_useState,state = _useState2[0],setState = _useState2[1];
};

对象销毁和import/export语句有一定的相似性，但归根结底又各有各的特点

ES6 in-depth | Export Statement | Import Statement