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
包的问题。问题解决方案在这个地址可以找到。
其中给出了两种解决方案
- 不要使用 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的用法。
- 第二种方案是,添加
autoFreeze={true}
,像这样
<KeepAlive cacheKey={item.path} autoFreeze={true}>
<Home />
</KeepAlive>