Next.js高级特性:export导入

Next.js支持JavaScript的ES2020动态import()。有了它,您可以动态导入JavaScript模块并使用它们。他们还与SSR合作。

在以下示例中,我们使用来实现模糊搜索,fuse.js并且仅在用户键入搜索输入后才在浏览器中动态加载模块:

import { useState } from 'react'

const names = ['Tim', 'Joe', 'Bel', 'Max', 'Lee']

export default function Page() {
  const [results, setResults] = useState()

  return (
    <div>
      <input
        type="text"
        placeholder="Search"
        onChange={async (e) => {
          const { value } = e.currentTarget
          // Dynamically load fuse.js
          const Fuse = (await import('fuse.js')).default
          const fuse = new Fuse(names)

          setResults(fuse.search(value))
        }}
      />
      <pre>Results: {JSON.stringify(results, null, 2)}</pre>
    </div>
  )
}

您可以将动态导入视为将代码拆分为可管理块的另一种方法。

也可以使用动态导入来导入React组件,但是在这种情况下,我们将其与一起使用next/dynamic以确保其工作原理与其他任何React组件一样。请查看以下各节,以获取有关其工作原理的更多详细信息。

基本用法

在以下示例中,该模块../components/hello将由页面动态加载:

import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() => import('../components/hello'))

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponent />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

DynamicComponent将是所返回的默认组件../components/hello。它像常规的React Component一样工作,您可以像往常一样将props传递给它。

注意import()需要显式编写而无需模板字符串。此外,Next.js调用import()必须包含在dynamic()其中,以便能够将webpack包/模块ID与特定dynamic()调用进行匹配,并在呈现之前预加载它们。dynamic()不能在React渲染中使用,因为它需要在模块的顶层标记,才能进行预加载才能工作,类似于React.lazy

export命名

如果动态组件不是默认导出,则也可以使用命名的导出。考虑../components/hello.js具有命名export的模块Hello

export function Hello() {
  return <p>Hello!</p>
}

要动态导入Hello组件,您可以从返回的Promise中将其返回import(),如下所示:

import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() =>
  import('../components/hello').then((mod) => mod.Hello)
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponent />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

带有自定义加载组件

loading可以添加一个可选组件,以在加载动态组件时呈现加载状态。例如:

import dynamic from 'next/dynamic'

const DynamicComponentWithCustomLoading = dynamic(
  () => import('../components/hello'),
  { loading: () => <p>...</p> }
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithCustomLoading />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

没有SSR

您可能并不总是希望在服务器端包括一个模块。例如,当模块包含仅在浏览器中可用的库时。

看下面的例子:

作者:terry,如若转载,请注明出处:https://www.web176.com/nextjs/2444.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年4月20日 下午3:03
下一篇 2021年4月20日 下午3:24

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注