react-hot-loader的使用方式

最新推荐文章于 2024-08-10 07:19:12 发布

AboyL

最新推荐文章于 2024-08-10 07:19:12 发布

阅读量7.7k

点赞数

分类专栏： javascript react webpack

本文链接：https://blog.csdn.net/aboyl/article/details/79776904

版权

本文介绍了如何在webpack项目中配置和使用react-hot-loader，以实现在不刷新页面的情况下更新React组件并保持状态。通过示例代码展示了从项目创建到配置webpack的全过程，强调了关键配置项，并提醒由于技术更新快速，建议直接查看官方仓库以获取最新实践。

摘要由CSDN通过智能技术生成

webpack中提供了热模块更新的功能，在不刷新整个页面的情况下来替换某些更变的组件，而这样做的最大的好处就在于状态的保存。比如我们前面在输入框中输入的内容，就不会在我们热模块替换以后被刷新掉，让我们要重新再输入一次了。

而react的构建现在一般还是基于webpack的，webpack也提供了对应的插件。react-hot-loader

https://github.com/gaearon/react-hot-loader

跟着github上面的例子我们就可以很快进行搭建了。

这里要注意几点。

我们创建项目的时候是类似creat-react-app的方式创建项目的。

creat-react-app的创建方式是有两个js文件，一个是index.js，一个是App.js

App.js是根组件，而index.js才是来执行初始化以及渲染这些工作的。而我们有的时候是把这两个合二为一了。这样就跟官网的对不上会有点。

下面给出一个demo来进行配置

目录结构

App.jsx

import React from 'react';
import { hot } from 'react-hot-loader';
import { Hello } from './components/hello.jsx';
require('./font.js');

class App extends React.Component {
  constructor(){
    super();
    console.log("App");
  }
  render() {
    return (
      <div>
        <h1>
          <Hello />
          Hello<br />
          <input type="text" name="" id="" />
        </h1>
        <svg className="icon-svg" aria-hidden="true">
          <use xlinkHref="#d-icon-gou-check"></use>
        </svg>
      </div>
    )
  }
}

export default hot(module)(App)

这里的svg可以进行删除

index.jsx

import React from 'react'
import { render } from 'react-dom'
import App from './App.jsx'
import './scss/index.scss';
const root = document.createElement('div')
document.body.appendChild(root)

render(<App />, root)

这里我们可以发现，在index.jsx中是自行创建了一个div所以我们在模版文件中其实可以不用哪个我们经常使用的