注意：這是我關(guān)于解構(gòu)的第一篇文章的后續(xù)內(nèi)容。導(dǎo)入語法非常自由地使用了解構(gòu)，對于剛開始使用它的人來說，這真的很讓人困惑。如果這一切看起來令人困惑，請先閱讀我的另一篇文章！

讓我們討論一下如何將依賴項導(dǎo)入到節(jié)點項目中。隨著工作變得越來越復(fù)雜，您將不可避免地遇到這樣的語法：

import React, { useState, useEffect } from 'react';
import { Link } from 'gatsby';
import Button from '@material-ui/core/Button';
import moment from 'moment';

import { Layout } from '../components';

乍一看，這很簡單。我們正在導(dǎo)入一些位以在React組件中使用。不過，正如您所想象的，我選擇了這四行代碼，因為每一行都是唯一的。事實上，在我作為一個蓬勃發(fā)展的Node/React開發(fā)人員的過程中，我找到了各種方法來搞亂其中的每一個。

你也會把事情搞砸的，那很好！現(xiàn)在，我是來幫忙的。

我們將按照復(fù)雜性的順序逐一檢查，我將盡力解釋到底發(fā)生了什么，以及我在工作中對進口的看法。

簡單的導(dǎo)入語法-最簡單的情況

import moment from 'moment';

如果你使用過.Net語言，或者Python，或者Ruby，或者sun下的其他語言，這應(yīng)該是你的第二天性。我在這里特別提到它是因為我們中的一些人以前可能從未見過它。

這是怎么回事？

嗯，結(jié)果很簡單。moment是一個JavaScript庫，已包含在我們的節(jié)點項目“spackage.json文件”sdependencies或devDependencies中。如果您對node不熟悉，并且與package.json不相似，請在此處閱讀更多信息。

這行代碼創(chuàng)建了對moment庫中所有可用內(nèi)容的引用，并將其放入一個變量中，我們可以使用該變量訪問它。'moment'位（引號中）告訴編譯器要獲取哪個庫。另一個變量是moment（不在引號中）。因此，從這里開始，我們可以像訪問此文件中的任何其他變量一樣訪問moment:

import moment from 'moment';
console.log(
  moment().get('year')
);
// 2019

在幕后，這只是通過主文件中的export default獲取moment庫提供的所有內(nèi)容，并將其填充到一個變量中—該變量可以有我們想要的任何有效名稱！

這可能會讓人困惑，但如果這個名字對你更有意義，你絕對可以這么做：

import ThatReallyUsefulDateLibrary from 'moment';
console.log(
  ThatReallyUsefulDateLibrary().get('year')
);
// 2019

從庫中的某個位置導(dǎo)入組件

接下來-這個稍微復(fù)雜一點：

import Button from '@material-ui/core/Button';

這里我們從@material-ui庫中獲取組件。同樣，這是相當簡單的—但是從MaterialUI項目的結(jié)構(gòu)的角度考慮這一點可能會有所幫助。MaterialUI輸出大量優(yōu)秀的東西，并將它們組織成邏輯分組。請這樣想：

// material-ui exports
const muiExports = {
  core: {
    Button: () => {}, // some component
    TextField: () => {} // another useful component
    // and loads more
  }
}

使用上述Button的導(dǎo)入語法，我們告訴編譯器給我們一個名為Button的導(dǎo)出對象的引用，該引用位于/core/Button下的@material-ui庫中。編譯器本質(zhì)上將其視為上面代碼段中的JSON對象。

這里的東西-這也意味著我們可以破壞它！此語法也適用于導(dǎo)入Button：

import { Button } from '@material-ui/core';

這也意味著我們可以在一行中從/core導(dǎo)入多個內(nèi)容！

import { Button, TextField} from '@material-ui/core';

很酷吧？我知道這會讓人困惑，但要堅持下去。不久你就會明白了。下面我們來看下一個例子：

import { Link } from 'gatsby';

砰！現(xiàn)在應(yīng)該很容易了。Gatsby提供的一個功能是它們的link組件。我們只導(dǎo)入要在這里使用的組件。

重命名導(dǎo)入

但是如果我們的項目中已經(jīng)有一個名為Link的組件呢？或者，如果我們正在制作一個Zelda fan site的圖例，而Link已經(jīng)在一個我們無法重命名的組件或變量中定義了呢？事實證明，在導(dǎo)入中重命名某個對象和在非結(jié)構(gòu)化語句中重命名某個對象一樣簡單。我們可以這樣重命名gatsby中的相同組件：

import { Link as GatsbyWebLink } from 'gatsby';

我們還可以在一條語句中重命名一個或多個已分解的導(dǎo)入：

import { 
  Link as GatsbyWebLink,
  graphql as graphqlQuery,
  useStaticQuery
} from 'gatsby';

還有一件事-如果在導(dǎo)入位置字符串中使用相對路徑，編譯器知道如何查找導(dǎo)出的內(nèi)容：

import { Layout } from '../components';

就像其他地方一樣，您可以在此處將內(nèi)容合并并重命名為您的心意：

import {
  Layout,
  Button as SuperButton
} from '../components';

最好的并不總是最后一個，但這無疑是我今天要分享的最后一個例子：

import React, { useState, useEffect } from 'react';

如果你一直在家里玩，現(xiàn)在應(yīng)該都很熟悉了-我們從react獲取默認導(dǎo)出，我們將其放入變量react中。我們還從同一個庫中解構(gòu)了useState和useEffect。如果你在問自己，我們能不能也作為React的孩子訪問useState？答案是-嗯，事實上，是的！

const [loading, setLoading] = React.useState(false);

const [loading, setLoading] = useState(false);

從執(zhí)行的角度來看，它們都具有相同的功能，但后者被約定使用。

我想。原來這是一篇非常棘手的文章-有10億種方法可以導(dǎo)入一個文件，我可能錯過了很多案例。對于這里所示的一些不同的導(dǎo)入語法，肯定還有性能和捆綁大小的影響。雖然它們絕對是真正的限制，并且對應(yīng)用程序的性能有真正的影響，但我還是把討論留到了另一天——純粹是為了簡單。

還有一個不小的問題，使用import需要像Babel或Webpack這樣的transpiler。這是另一個超級復(fù)雜的宇宙，我不確定我是否有能力在一篇博文中解釋。這也意味著我已經(jīng)跳過了演示上述語法如何與require()一起工作。坦率地說，這里要解釋的內(nèi)容太多了——未來對EcmaScript和node的改進將使它變得更好。