webpack2 react-hot-loader3似乎工作，但页面不重新渲染

Question

当我更改root.js上下文时，页面不重新呈现，但控制台日志似乎热重新加载正常工作。

当我更改root.js上下文时，该页面未重新呈现，但控制台日志似乎热重新加载正常。

的package.json

{ 
     "name": "my-pro-for-fun", 
     "version": "1.0.0", 
     "description": "", 
     "main": "index.js", 
     "scripts": { 
     "start": "webpack-dev-server --config webpack.config.dev.js", 
     "test": "echo \"Error: no test specified\" && exit 1" 
     }, 
     "author": "", 
     "license": "ISC", 
     "dependencies": { 
     "react": "^15.4.1", 
     "react-dom": "^15.4.1" 
     }, 
     "devDependencies": { 
     "babel": "^6.5.2", 
     "babel-cli": "^6.18.0", 
     "babel-core": "^6.18.2", 
     "babel-loader": "^6.2.8", 
     "babel-plugin-transform-class-properties": "^6.19.0", 
     "babel-plugin-transform-react-jsx-source": "^6.9.0", 
     "babel-preset-es2015": "^6.18.0", 
     "babel-preset-latest": "^6.16.0", 
     "babel-preset-react": "^6.16.0", 
     "babel-preset-stage-0": "^6.16.0", 
     "babel-preset-stage-1": "^6.16.0", 
     "babel-preset-stage-2": "^6.18.0", 
     "react-hot-loader": "3.0.0-beta.6", 
     "webpack": "2.1.0-beta.27", 
     "webpack-dev-server": "2.1.0-beta.12" 
     } 
    } 

webpack.js

const { resolve } = require('path'); 
const webpack = require('webpack'); 

module.exports = { 
    entry: [ 
    'react-hot-loader/patch', 
    'webpack-dev-server/client?http://localhost:8080', 
    'webpack/hot/only-dev-server', 
    "frontend/src/index.js", 
    ], 

    output: { 
    path: resolve(__dirname, "frontend/dist"), 
    filename: "bundle.js", 
    publicPath: "/", 
    }, 

    resolve: { 
    modules: [ "node_modules" ], 
    extensions: [".js", ".json", ".jsx", ".css"], 
    alias: {frontend: resolve(__dirname, "frontend")} 
    }, 

    devServer: { 
    hot: true, 
    // activate hot reloading 
    contentBase: resolve(__dirname, "frontend/src"), 
    publicPath: "/", 
    }, 

    module: { 
    rules: [ 
     { 
     test: /\.jsx?$/, 
     exclude: ["node_modules"], 
     loader: ["react-hot-loader/webpack", "babel-loader"] 
     }, 
    ] 
    }, 

    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    // activates HMR 
    new webpack.NamedModulesPlugin(), 
    // prints more readable module names in the browser console on HMR updates 
    ], 

    devtool: "source-map", 
} 

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Root from 'frontend/src/root'; 
import routes from 'frontend/src/routes'; 
import { AppContainer } from 'react-hot-loader'; 

const render =() => { 
    ReactDOM.render(
    <AppContainer> 
     <Root /> 
    </AppContainer>, 
    document.getElementById('container') 
) 
}; 

render(); 

if (module.hot) { 
    module.hot.accept('./root', render); 
} 

root.js

import React from 'react'; 

class Root extends React.Component { 
    static propTypes = { 
    } 

    constructor(props) { 
    super(props); 
    this.state = {}; 
    } 

    render() { 
    return (
     <div>ros1</div> 
    ) 
    } 
} 

export default Root; 

.babelrc

{ 
    "presets": [ 
    "react", 
    "latest", 
    "stage-0", 
    "stage-1", 
    "stage-2" 
    ], 
"plugins": ["transform-react-jsx-source"], 
} 

Answer 1

finaly我想通了，更新index.js如下，它工作正常，现在

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Root from 'frontend/src/root'; 
import routes from 'frontend/src/routes'; 
import { AppContainer } from 'react-hot-loader'; 

const mountApp = document.getElementById('container'); 

ReactDOM.render((
    <AppContainer> 
    <Root /> 
    </AppContainer> 
), mountApp); 

if (module.hot) { 
    module.hot.accept('frontend/src/root',() => { 
    const NextRootContainer = require('frontend/src/root').default; 

    ReactDOM.render((
     <AppContainer> 
     <NextRootContainer /> 
     </AppContainer> 
    ), mountApp); 
    })