一、 react元件兩種匯入方式

React元件可以通過兩種方式匯入另一個元件

1. import(常用)

import component from './component'

1. require

const component = require('./component')

兩種方式有什麼區別?

• 提出的規範不同 import是ES6語法,reuqire是CommonJs提出的.

• import會通過babel轉換成CommonJS規範。 下面兩行程式碼是等價的

import component from './component'
// => 
const component = require('./component')
 

推薦統一規範一種匯入方式,防止混亂 當然,不同情況使用的方式也是不一樣的. 下面詳細介紹兩種匯入方式對應的情況(注意這裡不介紹按需載入,可看《前端效能優化之按需載入》)

二、兩種方式對應的 情況

1. import xxx from 'xxx' 一般來說使用import就夠了.但是要注意import需要放在定義元件的外部。這就導致一個問題:

如果我需要通過動態路徑動態載入元件(這裡並非指按需載入),在class裡面(ES6)語法使用import會報下面錯誤:

Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level

這時候使用require方法能很好解決

1. var xxx = require('xxx') 這裡需要注意的是: 用import引入的元件只需要export default即可 而通過require引入的元件需要底部生命module.exports = component

用例子解釋一下: 需求場景: 現在有大量的子元件存放在對應資料夾(如下)

firstComponent
    /index
secordComponent
    /index
thirdComponent
    /index
...

但是我在父元件每次只需載入其中一個即可,我不想一次性匯入大量的子元件,然後加判斷篩選出對應元件。這樣程式碼可能會非常多、雜(比如我有20個子元件,那麼我要寫20個import); 於是我通過require動態載入

//父元件
renderDetail(mode,pageType){
    let dynamicDetail = require(`../components/content/${pageType}/index`)
    return dynamicDetail
}

render(){
    //const { pageType } = this.props; 這裡的pageType是判斷載入哪個子元件的條件
    
    //我們先假設一個
    pageType = firstComponent;  //存在firstComponent這麼一個資料夾裡面有一個index.js元件
    
    let DynamicDetail = this.renderDetail(pageType);    //動態拿到這個元件
    
    return(
        <div className="detailWried">
            <DynamicDetail />
        </div>
    )
}

//子元件
import React from 'react'

export default class firstComponent extends React.Component{
    render(){
        return(
            <div>
                NavMenu
            </div>
        )
    }
}

module.exports = firstComponent;

這樣我就可以實現動態載入元件的功能了.把pageType替換成動態的即可,pageType的值則按照使用者操作動態改變即可。例如使用者選擇第二個元件的時候:pageTpey = secordComponent

注意這裡可能會遇到一個問題: 把require裡面的路徑替換成變數的話,

let path = `../../../../components/content/${mode}/children/${pageType}/index`
let dynamicDetail = require(path)

會報以下錯

//終端
Critical dependency: the request of a dependency is an expression

//瀏覽器
can't  require module'.'

在require使用字串變數即可(字串變數可真的是一個好方便東西)

至此！兩個匯入元件的方式介紹完畢！