Two ways to react component imports (implementation of dynamically imported components)

One, the react component two kinds of import way

React components can import another component in two ways

1. Import (Common)

import component from './component'

1. Require

const component = require('./component')

What is the difference between the two ways?

• Different specifications are proposed
  Import is ES6 syntax, Reuqire is COMMONJS proposed.

• Import is converted to the COMMONJS specification by Babel.
  The following two lines of code are equivalent

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

Recommended uniform specification an import method to prevent confusion
Of course, different situations are used differently.
The following is a detailed description of the two ways to import (note that the on-demand load is not described here, you can see "front-end performance optimization on-demand loading")

Second, the two ways corresponding to the situation

1. import xxx from ' xxx '
   In general, import is enough. But note that import needs to be placed outside the definition component. This leads to a problem:

If I need to dynamically load a component through a dynamic path (this does not mean loading on demand), using import in the class inside (ES6) syntax will report the following error:

Module build Failed:syntaxerror: ' Import ' and ' export ' appear at the top level

The use of the Require method can be very well solved

1. var xxx = require (' xxx ')
   It is important to note that:
   importonly export default is required for the imported components
   And byrequireintroducing the components required bottom life module.exports = Component

Explain it in an example:
Requirements Scenario: There are now a large number of sub-components stored in the corresponding folder (below)

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

But I just need to load one of the parent components at a time, I don't want to import a large number of subcomponents at once, and then filter out the corresponding components. So the code can be very much, miscellaneous (such as I have 20 sub-components, then I have to write 20 import);
So I require dynamic loading

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

render () {
     // const {pageType} = this.props; here pageType is the condition to determine which child component is loaded
    
     // let's assume one
     pageType = firstComponent; // There is an index.js component in a folder such as firstComponent
    
     let DynamicDetail = this.renderDetail (pageType); // Get this component dynamically
    
     return (
         <div className = "detailWried">
             <DynamicDetail />
         </ div>
     )
}

//Subassembly
import React from 'react'

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

module.exports = firstComponent;

This allows me to implement the function of dynamically loading components. Replace the pagetype with dynamic, and the value of PageType can be changed dynamically according to the user's operation. For example, when a user chooses a second component:pageTpey = secordComponent

Note There may be a problem here:
Replace the path inside the require with a variable,

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

will report the following error

//terminal
Critical dependency: the request of a dependency is an expression

// browser
can't require module '.' 

Use a string variable in require (string variable can really be a good convenience)

So far! Two ways to import components are complete!
Expand:

• React three ways to create components and their differences