react-hot-loader原理

原文地址：https://www.jianshu.com/p/95aaf204e3cd

webpack的HMR不会保留模块的状态，例如，div的初始值是1，点一下按钮加1，变成了2，当改变模块的代码时，模块被替换了，模块的状态也是重新开始，div又变成可1。其实就是重新加载这个要被替换的模块的代码，所以状态不会被保留。

react-hot-loader 会保留组件的状态，其实还是重新加载了模块的js,但是react-hot-loader内部的原理，让新的模块的状态和旧的模块的状态一样。详细原理可以查看链接地址。

react-hot-loader 的使用

看了网上的一些方法，有的把react-hot-loader,安装在开发依赖里，有的又安装在生产依赖里。而且webapck服务的启用可以直接用node启用，也可以用webapck-dev-server（底层原理也是node,配置简单）启动。根据开启webpack服务的不同方式，安装react-hot-loader的地方就好似不一样了。

• 用node开启服务的就安装在开发依赖

• 用webpakc-dev-server的就安装在生产依赖

或许不管如何的方式，安装的地方没分别。因为配置react-hot-loader的方式一样。

• 在 webpack的入口entry地方,加入react-hot-loader/patch ，页面需要引入这个js,在业务代码之前引入，要是有babel-ployfill ,就把babel-ployfill放第一个。

entry:{
   babelJs:"babel-ployfill",
    reacthot:"react-hot-loader/patch",
    main:"./src/main.js"
}

• 在babel配置文件.babelrc里,加上插件 react-hot-loader/babel,并且不把编译s6的模块，即 module：false

{
    "presets": [["env",{"modules":false}], "react"],
    "plugins":[
        "react-hot-loader/babel",
        "transform-runtime",

    ]
}

• 在我们业务代码的入口文件里引入 AppContainer组件，用来放我们写好的组件

import {AppContainer} from "react-hot-loader";
import React from "react";
import ReactDom from "react-dom";

import {app} from "index.js";

const app = document.getElementById("#app");

ReactDom.render(
    (<AppContainer>
        <app/>
    </AppContainer>)
    ,app );

if(module.hot){
    module.hot.accept(function(){

        ReactDom.render(
        (<AppContainer>
            <app/>
        </AppContainer>)
        ,app );
    })
}

react-hot-loader原理理解