Webpack 的 HMR 中的参数是什么意思答案

【问题标题】：What does the parameters mean in Webpack's HMRWebpack 的 HMR 中的参数是什么意思
【发布时间】：2019-01-23 05:09:21
【问题描述】：

为什么要将参数放入module.hot.accept()？如果我们什么都不放，webpack.HotModuleReplacementPlugin 可以工作，但 React 组件也会丢失其状态数据。如果我们使用react-hot-loader，我们应该把参数放在accept方法中，但是我不知道第一个参数是什么意思，也不知道为什么回调应该再次require 并获得default？

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {AppContainer} from 'react-hot-loader';

import getRouter from './src/router';

const boot = (elements)=> {
    ReactDOM.render(
        <AppContainer>
            {elements}
        </AppContainer>
        , document.getElementById('app'));
}

let rs = getRouter();
boot(rs); //first render

// render after source code change
if (module.hot) {
    module.hot.accept('./src/router', ()=> {
        boot(require('./src/router').default())
    });
}

【问题讨论】：

标签： javascript reactjs webpack-hmr react-hot-loader

【解决方案1】：

我找到了答案。第一个参数是观察到的，它是一个组件，如果它或其子组件被更改，回调函数（第二个参数）将被调用，我们应该再次需要该组件并删除旧组件，然后将新组件渲染（替换为新组件）到 DOM。

【讨论】：