react-activation导致组件多渲染一次

react-activation版本是2.6.1
react版本是18.2.0
代码结构类似这样

import { HashRouter, Routes, Route } from "react-router-dom";
import KeepAlive, { AliveScope } from "react-activation";

export default () => (
	<HashRouter>
	  <AliveScope>
	     <Routers>
			  <Route
          		path={item.path}
          		key={item.path}
          		element={
		           <KeepAlive cacheKey={item.path}>
		             	<Home />
		           </KeepAlive>
          		}
        ></Route>
		 </Routers>
	  </AliveScope>
	</Router>
)

放在keepalive里面的是一个组件，组件结构很简单
Home.jsx

export default () => {
	conosle.log(123)
	return <div>123</div>
}

这个时候123应该会被打印1次，但是很奇怪，会打印两次。最开始想到的是可能是开启了严格模式，经过检查并没有开启。最终逐一排查，发现是react-activation包的问题。问题解决方案在这个地址可以找到。

其中给出了两种解决方案

1. 不要使用 ReactDOMClient.createRoot, 而是使用 ReactDOM.render。也就是把react18写法变成react17的。
   大概像这样：

// react18
import React from "react";
import { createRoot } from "react-dom/client";
const root = createRoot(document.getElementById("app"));
import App from "./App";

root.render(<App></App>);

// react17
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App></App>, document.getElementById("app"));

这样替换完时候，确实只渲染了一次。但是会报错。报错大概意思就是让你使用react18的方法挂在节点，别使用react17的用法。

2. 第二种方案是，添加autoFreeze={true}，像这样

 <KeepAlive cacheKey={item.path} autoFreeze={true}>
    <Home />
 </KeepAlive>