[英]Javascript require vs require .default
I'm using react-hot-loader and I'm very confused about its example code: 我正在使用react-hot-loader ,我对它的示例代码非常困惑:
import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import App from './containers/App'
ReactDOM.render(
<AppContainer>
<App/>
</AppContainer>,
document.getElementById('root')
);
// Hot Module Replacement API
if (module.hot) {
module.hot.accept('./containers/App', () => {
const NextApp = require('./containers/App').default;
ReactDOM.render(
<AppContainer>
<NextApp/>
</AppContainer>,
document.getElementById('root')
);
});
}
What I don't undestand is: 我不明白的是:
a) Why do I need to use App and NextApp ? a)为什么我需要使用App和NextApp? Isn't
App
the same as NextApp
, as they are imported from the same file ? App
是否与NextApp
相同,因为它们是从同一个文件导入的?
b) I thought best practices would be to keep requires
at the beginning of the code. b)我认为最佳实践是在代码的开头保持
requires
。 But there I have already import App from '../containers/App
'. 但我已经
import App from '../containers/App
' import App from '../containers/App
。 So: 所以:
import App from './containers/App'
const NextApp = require('./containers/App').default;
Shouldn't App
and NextApp
be the same ? App
和NextApp
不应该一样吗?
c) To finish, is the following code lines equivalent ? c)要完成,以下代码行是否等效? What's the difference using a pure
require
and a require .default
? 使用纯
require
和require .default
什么区别?
const NextApp = require('./containers/App');
const NextApp = require('./containers/App').default;
Sorry if those are very basic questions, but I need a hint on where to go to better understand this code. 很抱歉,如果这些是非常基本的问题,但我需要提示如何去更好地理解这段代码。
To understand this better, you need to look at how webpack offers hot module loading for other non-react cases. 为了更好地理解这一点,您需要了解webpack如何为其他非反应情况提供热模块加载 。
The idea is quite simple actually... Webpack detects changes happening to your code and recompiles the corresponding modules. 实际上这个想法很简单...... Webpack检测到代码发生的变化并重新编译相应的模块。 However, it cannot safely replace the module references on the fly itself.
但是,它无法安全地替换模块引用本身。 This is why you need to implement the HMR interface yourself, hence the
module.hot
call in your example code. 这就是你需要自己实现HMR接口的原因,因此你的示例代码中会调用
module.hot
。
When a newer version of a module is available, Webpack goes up the modules chain (ie, if X imported Y and Y has changed, webpack starts going from X > W > V...) till it finds a module which implemented HMR for Y or X or W or V etc. Then it reloads the entire chain from there. 当一个较新版本的模块可用时,Webpack上升到模块链(即,如果X导入Y和Y已经改变,webpack开始从X> W> V ...)直到它找到一个实现HMR的模块Y或X或W或V等然后从那里重新加载整个链。
If it reaches the root without any HMR accepting the change, it refreshes the entire page :). 如果它到达根目录而没有任何HMR接受更改,它会刷新整个页面:)。
Now The matter of App and NextApp... App is the statically imported version of you module. 现在App和NextApp的问题... App是你模块的静态导入版本。 As modules are parsed and loaded only once by default, App points to a constant reference which never changes.
由于模块在默认情况下仅被解析和加载一次,因此App指向永不改变的常量引用。 This is why another variable NextApp is used in the example which receives the changed module within the HMR code.
这就是在示例中使用另一个变量NextApp的原因,该变量接收HMR代码中的已更改模块。
Finally, the require and require.default... when dealing with ES6 imports (export default MyComponent), the exported module is of the format {"default" : MyComponent}. 最后,require和require.default ...在处理ES6导入(导出默认MyComponent)时,导出的模块的格式为{“default”:MyComponent}。 The
import
statement correctly handles this assignment for you, however, you have to do the require("./mycomponent").default
conversion yourself. import
语句正确地为您处理此分配,但是,您必须自己执行require("./mycomponent").default
转换。 The HMR interface code cannot use import
as it doesn't work inline. HMR接口代码不能使用
import
因为它不能内联工作。 If you want to avoid that, use module.exports
instead of export default
. 如果要避免这种情况,请使用
module.exports
而不是export default
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.