技術標籤：Webreactreact hookshmrwebpackjs

前言

預設情況下，對於 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/[email protected]_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