在react中获得极佳的react hooks热更新调试（react-hot-loader+@hot-loader/react-dom）

前言

默认情况下，对于 hooks 的添加和删除都将重置整个组件，导致整个页面重新刷新。

为了将刷新限制于组件级别，使用 react-hot-loader 可以解决这个问题，当搭配 @hot-loader/react-dom 与自带的 babel-plugin 时，可以达到组件级的 hooks 修改并保持不刷新页面。

使用

安装依赖

	# 核心依赖
	yarn add -D react-hot-loader
	# 用来替换原来 react-dom 支持热更新的依赖
	# 其中 REACT_VERSION 需要替换为你的 react 版本
	yarn add @hot-loader/react-dom@REACT_VERSION

配置 react

下面进行 react 配置，关于 react 配置方法有很多，我们这里推荐使用 antd 的建议方案： @craco/craco ，如果你在使用很流行的 cra 重塑方案也同理。

添加 babel 插件与导入别名：

// craco.config.js
module.exports = {
     
  babel: {
     
    // 该插件支持了 hooks 的即时添加，删除
    plugins: ['react-hot-loader/babel']
  },
  webpack: {
     
    alias: {
     
      'react-dom': '@hot-loader/react-dom'
    }
  }
}

综上，无论你在使用什么 react 配置方案，只需做两件事：

1. 添加 babel 插件 react-hot-loader/babel

2. 添加一个新 alias 为 'react-dom': '@hot-loader/react-dom' ，将 react-dom 映射到 @hot-loader/react-dom

注：无需担心生产环境 @hot-loader/react-dom 带来污染，babel 插件会帮我们进行清理。

配置根节点热更新

给 root 节点 App 套上一层热更新函数即可：

import {
      hot } from 'react-hot-loader/root'

function App() {
     
  return (
    <>
    	{
     /* ... */}
    </>
  );
}

export default hot(App);

到此为止，我们的 react-hot-loader 配置完毕，已经可以进行局部热更新和 hooks 更新。

实例

举个简单的例子，假设你有两个 hooks ，删除第二个 hooks ，变为单个 hooks：

  // 1. 两个 hooks 
  useEffect(() => {
     
    console.log('reload1')
  }, [])
  
  useEffect(() => {
     
    console.log('reload2')
  }, [])

  // 2. → 一个 hooks
  useEffect(() => {
     
    console.log('reload1')
  }, [])

对于没有 react-hot-loader 的情况，删除 hooks 会导致页面重新加载，当存在该依赖时，将局部热更新执行 console.log('reload1') ，并不会引发页面重载，达到了目的。

支持 hooks 数量变更进行局部更新的能力是由 react-hot-loader/babel 该 babel 插件提供的。

但是存在一个问题，由于 webpack HMR 和该 babel 插件都会进行一次 update ，所以你进行 hooks 的数量操作时，其他的 hooks 都会执行两遍！

可参见：Render Method Called Twice!

其他

附：

gaearon / react-hot-loader

hot-loader / react-dom