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

讓我們討論一下如何將依賴項(xiàng)導(dǎo)入到節(jié)點(diǎn)項(xiàng)目中。隨著工作變得越來越復(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組件中使用。不過，正如您所想象的，我選擇了這四行代碼，因?yàn)槊恳恍卸际俏ㄒ坏?。事?shí)上，在我作為一個(gè)蓬勃發(fā)展的Node/React開發(fā)人員的過程中，我找到了各種方法來搞亂其中的每一個(gè)。

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

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

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

import moment from 'moment';

如果你使用過.Net語言，或者Python，或者Ruby，或者sun下的其他語言，這應(yīng)該是你的第二天性。我在這里特別提到它是因?yàn)槲覀冎械囊恍┤艘郧翱赡軓奈匆娺^它。

這是怎么回事？

嗯，結(jié)果很簡單。moment是一個(gè)JavaScript庫，已包含在我們的節(jié)點(diǎn)項(xiàng)目“spackage.json文件”sdependencies或devDependencies中。如果您對(duì)node不熟悉，并且與package.json不相似，請(qǐng)?jiān)诖颂庨喿x更多信息。

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

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

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

這可能會(huì)讓人困惑，但如果這個(gè)名字對(duì)你更有意義，你絕對(duì)可以這么做：

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

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

接下來-這個(gè)稍微復(fù)雜一點(diǎn)：

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

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

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

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

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

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

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

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

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

import { Link } from 'gatsby';

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

重命名導(dǎo)入

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

import { Link as GatsbyWebLink } from 'gatsby';

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

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

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

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

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

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

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

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

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

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

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

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

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

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