背景：由于react官方并没有提供缓存组件相关的api（类似vue中的keepalive），在某些场景，会使得页面交互性变的很差，比如在有搜索条件的表格页面，点击某一条数据跳转到详情页面，再返回表格页面，会重新请求数据，搜索条件也将清空，用户得重新输入搜索条件，再次请求数据，大大降低办公效率，如图：
目标：封装keepalive缓存组件，实现组件的缓存，并暴露相关方法，可以手动清除缓存。
版本：React 17，react-router-dom 5
结构：
代码：
cache-types.js
// 缓存状态 export const CREATE = 'CREATE'; // 创建 export const CREATED = 'CREATED'; // 创建成功 export const ACTIVE = 'ACTIVE'; // 激活 export const DESTROY = 'DESTROY'; // 销毁
CacheContext.js
import React from 'react'; const CacheContext = React.createContext(); export default CacheContext;
KeepAliveProvider.js
1 import React, { useReducer, useCallback } from "react"; 2 import CacheContext from "./CacheContext"; 3 import cacheReducer from "./cacheReducer"; 4 import * as cacheTypes from "./cache-types"; 5 function KeepAliveProvider(props) { 6 let [cacheStates, dispatch] = useReducer(cacheReducer, {}); 7 const mount = useCallback( 8 ({ cacheId, element }) => { 9 // 挂载元素方法，提供子组件调用挂载元素 10 if (cacheStates[cacheId]) { 11 let cacheState = cacheStates[cacheId]; 12 if (cacheState.status === cacheTypes.DESTROY) { 13 let doms = cacheState.doms; 14 doms.forEach((dom) => dom.parentNode.removeChild(dom)); 15 dispatch({ type: cacheTypes.CREATE, payload: { cacheId, element } }); // 创建缓存 16 } 17 } else { 18 dispatch({ type: cacheTypes.CREATE, payload: { cacheId, element } }); // 创建缓存 19 } 20 }, 21 [cacheStates] 22 ); 23 let handleScroll = useCallback( 24 // 缓存滚动条 25 (cacheId, { target }) => { 26 if (cacheStates[cacheId]) { 27 let scrolls = cacheStates[cacheId].scrolls; 28 scrolls[target] = target.scrollTop; 29 } 30 }, 31 [cacheStates] 32 ); 33 return ( 34 <CacheContext.Provider 35 value={{ mount, cacheStates, dispatch, handleScroll }} 36 > 37 {props.children} 38 {/* cacheStates维护所有缓存信息， dispatch派发修改缓存状态*/} 39 {Object.values(cacheStates) 40 .filter((cacheState) => cacheState.status !== cacheTypes.DESTROY) 41 .map(({ cacheId, element }) => ( 42 <div 43 id={`cache_${cacheId}`} 44 key={cacheId} 45 // 原生div中声明ref，当div渲染到页面，会执行ref中的回调函数，这里在id为cache_${cacheId}的div渲染完成后，会继续渲染子元素 46 ref={(dom) => { 47 let cacheState = cacheStates[cacheId]; 48 if ( 49 dom && 50 (!cacheState.doms || cacheState.status === cacheTypes.DESTROY) 51 ) { 52 let doms = Array.from(dom.childNodes); 53 dispatch({ 54 type: cacheTypes.CREATED, 55 payload: { cacheId, doms }, 56 }); 57 } 58 }} 59 > 60 {element} 61 </div> 62 ))} 63 </CacheContext.Provider> 64 ); 65 } 66 const useCacheContext = () => { 67 const context = React.useContext(CacheContext); 68 if (!context) { 69 throw new Error("useCacheContext必须在Provider中使用"); 70 } 71 return context; 72 }; 73 export { KeepAliveProvider, useCacheContext };
withKeepAlive.js
1 import React, { useContext, useRef, useEffect } from "react"; 2 import CacheContext from "./CacheContext"; 3 import * as cacheTypes from "./cache-types"; 4 function withKeepAlive( 5 OldComponent, 6 { cacheId = window.location.pathname, scroll = false } 7 ) { 8 return function (props) { 9 const { mount, cacheStates, dispatch, handleScroll } = 10 useContext(CacheContext); 11 const ref = useRef(null); 12 useEffect(() => { 13 if (scroll) { 14 // scroll = true, 监听缓存组件的滚动事件，调用handleScroll()缓存滚动条 15 ref.current.addEventListener( 16 "scroll", 17 handleScroll.bind(null, cacheId), 18 true 19 ); 20 } 21 }, [handleScroll]); 22 useEffect(() => { 23 let cacheState = cacheStates[cacheId]; 24 if ( 25 cacheState && 26 cacheState.doms && 27 cacheState.status !== cacheTypes.DESTROY 28 ) { 29 // 如果真实dom已经存在，且状态不是DESTROY，则用当前的真实dom 30 let doms = cacheState.doms; 31 doms.forEach((dom) => ref.current.appendChild(dom)); 32 if (scroll) { 33 // 如果scroll = true, 则将缓存中的scrollTop拿出来赋值给当前dom 34 doms.forEach((dom) => { 35 if (cacheState.scrolls[dom]) 36 dom.scrollTop = cacheState.scrolls[dom]; 37 }); 38 } 39 } else { 40 // 如果还没产生真实dom，派发生成 41 mount({ 42 cacheId, 43 element: <OldComponent {...props} dispatch={dispatch} />, 44 }); 45 } 46 }, [cacheStates, dispatch, mount, props]); 47 return <div id={`keepalive_${cacheId}`} ref={ref} />; 48 }; 49 } 50 export default withKeepAlive;
index.js
export { KeepAliveProvider } from "./KeepAliveProvider"; export {default as withKeepAlive} from './withKeepAlive';
使用：
1.用<KeepAliveProvider></KeepAliveProvider>将目标缓存组件或者父级包裹；
2.将需要缓存的组件，传入withKeepAlive方法中，该方法返回一个缓存组件；
3.使用该组件；
App.js
1 import React from "react"; 2 import { 3 BrowserRouter, 4 Link, 5 Route, 6 Switch, 7 } from "react-router-dom"; 8 import Home from "./Home.js"; 9 import List from "./List.js"; 10 import Detail from "./Detail.js"; 11 import { KeepAliveProvider, withKeepAlive } from "./keepalive-cpn"; 12 13 const KeepAliveList = withKeepAlive(List, { cacheId: "list", scroll: true }); 14 15 function App() { 16 return ( 17 <KeepAliveProvider> 18 <BrowserRouter> 19 <ul> 20 <li> 21 <Link to="/">首页</Link> 22 </li> 23 <li> 24 <Link to="/list">列表页</Link> 25 </li> 26 <li> 27 <Link to="/detail">详情页A</Link> 28 </li> 29 </ul> 30 <Switch> 31 <Route path="/" component={Home} exact></Route> 32 <Route path="/list" component={KeepAliveList}></Route> 33 <Route path="/detail" component={Detail}></Route> 34 </Switch> 35 </BrowserRouter> 36 </KeepAliveProvider> 37 ); 38 } 39 40 export default App;
效果：
假设有个需求，从首页到列表页，需要清空搜索条件，重新请求数据，即回到首页，需要清除列表页的缓存。
上面的KeepAliveProvider.js中，暴露了一个useCacheContext()的hook，该hook返回了缓存组件相关数据和方法，这里可以用于清除缓存：
Home.js
1 import React, { useEffect } from "react"; 2 import { DESTROY } from "./keepalive-cpn/cache-types"; 3 import { useCacheContext } from "./keepalive-cpn/KeepAliveProvider"; 4 5 const Home = () => { 6 const { cacheStates, dispatch } = useCacheContext(); 7 8 const clearCache = () => { 9 if (cacheStates && dispatch) { 10 for (let key in cacheStates) { 11 if (key === "list") { 12 dispatch({ type: DESTROY, payload: { cacheId: key } }); 13 } 14 } 15 } 16 }; 17 useEffect(() => { 18 clearCache(); 19 // eslint-disable-next-line 20 }, []); 21 return ( 22 <div> 23 <div>首页</div> 24 </div> 25 ); 26 }; 27 28 export default Home;
效果：
至此，react简易版的keepalive组件已经完成啦~
脚踏实地行，海阔天空飞
