一些对于react的keep-alive性能相干常识在这里(下)
本篇承接上篇外部, 所以是从第九点开始
九、保留页面scroll
比方页面上的table里有100条数据, 咱们想看第100条数据, 那就要滚动不少间隔, 不少场景这种滚动间隔也是有必要保留的。
这里应用的办法其实比拟传统啦, 首先在KeepAliveProvider 下发一个解决滚动的办法:
const handleScroll = useCallback(
(cacheId, event) => {
if (catheStates?.[cacheId]) {
const target = event.target
const scrolls = catheStates[cacheId].scrolls
scrolls[target] = target.scrollTop
}
},
[catheStates]
) 在Keeper组件外面接管并执行:
const { dispatch, mount, handleScroll } = useContext(CacheContext)
useEffect(() => {
const onScroll = handleScroll.bind(null, cacheId)
(divRef?.current as any)?.addEventListener?.('scroll', onScroll, true)
return (divRef?.current as any)?.addEventListener?.('scroll', onScroll, true)
}, [handleScroll])在Keeper外面将滚动属性赋予元素:
useEffect(() => {
const catheState = catheStates[cacheId]
if (catheState && catheState.doms) {
const doms = catheState.doms
doms.forEach((dom: any) => {
(divRef?.current as any)?.appendChild?.(dom)
})
// 新增
doms.forEach((dom: any) => {
if (catheState.scrolls[dom]) {
dom.scrollTop = catheState.scrolls[dom]
}
})
} else {
mount({
cacheId,
reactElement: props.children
})
}
}, [catheStates]) 这里如果不被动减少赋予scroll的办法的话, 滚动间隔是不会被保留的, 因为Keeper每次都是新的。
十、KeepAliveProvider外部 Keeper子组件外部的CacheContext
咱们是把组件渲染在 KeepAliveProvider 外面, 那么如果某个Provider是在 KeepAliveProvider 外部定义的, 则KeepAliveProvider级别的组件是无奈应用 Consumer 拿到这个值的。
这里就引出一个问题, 如何将 KeepAliveProvider 中的组件的上下文, 批改为Keeper组件的上下文。
这里演示一下最间接的形式, 让用户传入Provider与其value值。
<Keeper
cacheId="home"
context={{ Provider: Provider, value: value }}>
<Home />
</Keeper> 咱们拿到这两个值后间接在Keeper中批改reactElement的构造:
mount({
cacheId,
reactElement: context ?
<context.Provider
value={context.value}>{props.children}</context.Provider> :
props.children
}) 当检测到context有值则间接在 props.children 里面套一层, 当然这里存在一个多层Provider嵌套的问题没有去解决, 因为逐步简单起来它的实用性曾经在降落了, 接下来还有新的bug来袭。
十一、须要传值的组件
大家有没有发现上述组件所有逻辑, 都是间接写在Keeper标签外面的, 并没有任何的传值, 然而比拟常见的一种场景是上面这样的:
function Root (){
const [n, setN] = useState(1)
return
(
<>
<button onClick={()=>setN(n+1)}>n+1</button>
<Keeper>
<Home n={n} />
</Keeper>
</>
)
} 这个n是Keeper外层传递给Home组件的, 这种写法下会导致n尽管变动了然而Home外面不会响应。
这个bug我是这样发现的, 当我把这个插件用在咱们团队的我的项目里的一个表格为主的页面时 , table始终显示是空的, 并且输入框也无奈输出值, 通过测试发现其实值是有变动的, 只是没有展现在组件的dom上。
尝试了良久后试了下react-activation 很遗憾它也有雷同的问题, 那其实就阐明这个bug很可能无奈解决或者就是这个插件自身的架构存在的问题。
十二、为何这么奇怪的bug场景
过后这个bug折磨了我一天半的工夫, 最初定位到外界的传参曾经不能算是这个组件自身的参数了, 咱们组件的理论渲染地位是 KeepAliveProvider 的第一层, 而Keeper的外层还在KeepAliveProvider的更内层, 这就导致这些值的变动其实是没有可能影响到组件。
能够了解为这些值的变动, 比方n的变动就如同window.n的扭转一样, react组件是不会去响应这个变动的。
那其实咱们要做的就是让外层传入的值的变动, 能够带动组件的款式变动 (逐步入坑!)。
十三、将props独自拿进去
我借鉴了网上另一种keep-alive组件的写法, 把Keeper组件改为一个keeper的办法, 这个办法返回一个组件看, 这样就能够接管一个props了, 也就把变量圈定在props这个范畴:
const Home = keeper(HomePage, { cacheId: 'home' })
function Root(){
const [n, setN] = useState(1)
return (
<>
<button onClick={()=>setN(n+1)}>n+1</button>
<Home n={n}> // 此处能够传值了
</>
)
} 这样做的目标是让开发者把可能影响组件状态的参数一口气传进来, 比方之前一个Keeper外面能够有多个组件, 这种状况就不好管制哪些参数变动会导致哪些组件更新, 但以组件的形式能够显著得悉组件接管到的props外面的值的扭转会导致组件更新。
我想到的计划是, 在KeepAliveProvider外面新建propsObj, 用来专门贮存每个缓存组件的props, 之所以如此设计将其独自拿进去, 是要把传参加组件的逻辑拆离开, 不少逻辑会监控catheStates的变动而执行, 然而props的变动没有必要触发这些。
const [propsObj, setPropsObj] = useState<any>();
return (
<CacheContext.Provider value={{ setPropsObj, propsObj }}>
{props.children}
//.... 略
KeepAliveProvider 外面的渲染须要变一个模式, reactElement 变成组件了, 别忘了名字要变成大写的。
// 旧的
// {reactElement}
// 新的
{propsObj &&
<ReactElement {...propsObj[cacheId]}></ReactElement>} 改装一下Keeper文件, 首先要把文件名改为 keeper, 导出的办法要进行一下更改。
export default function (
RealComponent: React.FunctionComponent<any>, { cacheId = '' }) {
return function Keeper(props: any) {
// ... 略 Keeper内mount办法的应用也稍作调整:
mount({
cacheId,
ReactElement: RealComponent
}) 要害的来了, 咱们要在Keeper外面监测props的变动, 来更新propsObj:
const { propsObj, setPropsObj } = useContext(CacheContext)
useEffect(() => {
setPropsObj({
...propsObj,
[cacheId]: props
})
}, [props])
十四、缓存生效的bug
上述咱们曾经把插件改装了模式, 并且发现能够让如下场景失常渲染, Home组件的props是外界传入的:
const Home = keeper(HomePage, { cacheId: 'home' })
const RootComponent: React.FC = () => {
return (
<KeepAliveProvider>
<Router>
<Routes>
<Route path={'/'} element={<Mid />} />
</Routes>
</Router>
</KeepAliveProvider>
)
}
function Mid() {
const [n, setN] = useState(1)
return (
<div>
<button onClick={() => setN(n + 1)}>n+1</button>
<Home n={n}></Home>
</div>
)
}
function HomePage(props: { n: number }) {
return <div>home {props.n}</div>
} 然而此时如果切换页面后再返回home页面, home页面的缓存是会生效的。
其实是因为咱们实时监控props的变动, 下次从新渲染时会导致props变动, 而后值就会被初始化了, 导致组件也复原到了晚期的配置, 可是…. 这不就是缓存失败了吗?
每次组件props被重置就会导致组件的相干数据被重置, 尝试把home组件做如下更改:
function HomePage(props: { n: number }) {
const [x, setX] = useState(1)
return (
<div>
<button onClick={() => setX(x + 1)}>x + 1</button>
<div>home {props.n}</div>
<div>home: x {x}</div>
</div>
)
}
上述写法会导致每次激活home组件, 只能保留x的值, n的值会与传入的雷同。
这种变动可能会导致bug, 假如只有 n > 2 能力让 x > 3, 此时咱们通过点击事件让 n = 5 , x = 4了, 此时切换到其余页面再回来, 就变成了n = 1, x=4, 违反了咱们的初始限度条件, 以此类推在实在简单的开发环境中此景象会导致各种奇怪的问题。
十五、认知的代价
下面的场景能够通过开发人员本人来管制, 现实状况是keep-alive插件只用来解决不须要外界传参, 以及不会被外界参数的变动影响的组件, 但这就开始麻烦了。
这类问题导致开发者在插件身上要花的学习老本进步, 应用老本进步, 并且如果某个组件原本不须要传参, 咱们用keep-alive包裹起来了, 后续又须要传参了, 扭转的老本想想都麻烦。
网上现有(2022年04月10日17:16:22)组件的官网根本是没有认真的对用户讲述相干的问题, 往往都是以介绍”应用办法”与论述本人的劣势为主, 这就导致用户被莫名其妙的bug折磨。
传递 Provider 的办法也有问题, 须要传递可能不是本页代码的Provider, 好受的了啊。
想要解决keep-alive相干问题的思路能够换一下, 最好是在react源码里反对一波, 比方能够指定某些组件不被销毁, 其实咱们能够关注一下react18的后续版本, 当初这个时间段react18公布了正式版。
十六、如何降级到react18
形式一: create-react-app 创立新我的项目
现阶段间接应用上面的命令, 就可创立react18我的项目:
npx create-react-app my_react
上面这种应用 --template 指定模板的还不行, 因为模板代码还没更新:
npx create-react-app my_react --template typescript这里能够查看所有react我的项目的模板 create-react-app我的项目可指定的模板。
形式二: 老我的项目改装
首先间接把依赖外面的react 与 react-dom的版本号改成 "^18.0.0"即可。
两种形式都须要批改 index.js
启动我的项目会有报错信息:
旧版的index.js
新版的index.js
其余的没有太多更改了。
十七、react18 Offscreen 组件的用法
Offscreen 容许 React 通过暗藏组件而不是卸载组件来放弃这样的状态, React 将调用与卸载时雷同的生命周期钩子, 但它也会保留 React 组件和 DOM 元素的状态。
React Activation 中也举荐大家关注这个属性:
Offscreen 是什么的官网说法能够看这篇文章里的翻译: React v18.0新个性官网文档[中英文对照
Offscreen的测试用例:
遗憾的是 Offscreen 组件并没有在以后版本推出, 其还处于不稳固阶段, 但咱们能够通过 react18 外面的测试用例来预览一下其用法:
通过上述写法还无奈看出 Offscreen 到底如何应用, 只晓得它可能是以组件的模式呈现, 并且须要传入一个mode属性, 更多用法期待官网尽快推出吧。
end
让咱们一起期待 react18 来解决keep-alive这个问题吧, 这次就是这样, 心愿与你一起提高。
发表回复