react热更新 ​

// craco.config.js
module.exports = {
    babel: {
        plugins: ['react-hot-loader/babel']
    },
    webpack: {
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }
}

// 给root节点App套上一层热更新函数
import { hot } from 'react-hot-loader/root'
function App {
	return (
  	    <div>App</div>
 	)
}
export default hot(App)

// craco.config.js
const reactHotReloadPlugin = require('craco-plugin-react-hot-reload')
module.exports = {
  plugins: [{
    plugin: reactHotReloadPlugin
  }]
}

import { hot } from 'react-hot-loader'
function App {
	return (
  	    <div>App</div>
 	)
}
export default hot(App)

// craco.config.js
const FastRefreshCracoPlugin = require('craco-fast-refresh')
module.exports = () => {
  return {
    plugins: [{
      plugin: FastRefreshCracoPlugin
    }]
  }
}

import { hot } from 'react-hot-loader'
function App {
	return (
  	    <div>App</div>
 	)
}
export default hot(App)