
Security News
NIST Under Federal Audit for NVD Processing Backlog and Delays
As vulnerability data bottlenecks grow, the federal government is formally investigating NIST’s handling of the National Vulnerability Database.
@unzoa/react-keepalive
Advanced tools
注意:路由离开时,HOC页面会被清空后再添加入新的页面,会有一次滚动top为0
注意场景 如果路由组件也有监听scroll
import { KeepAliveProvider, withKeepAlive } from '../components/keepAlive'
import Feed from './feed/Feed'
const KeepAliveFeed = withKeepAlive( Feed, { cacheId: 'feed', scroll: true } )
...
<Router>
<KeepAliveProvider>
<Routes>
<Route path="/Feed" element={ <KeepAliveFeed /> } />
</Routes>
</KeepAliveProvider>
</Router>
withKeepAlive参数说明
参数 | 类型 | 说明 |
---|---|---|
cacheId | string | 自定义缓存路由key |
scroll | boolean | 是否记录页面滚动距离 |
知识点 函数组件的最新state只能在下一次函数重新执行的时候拿到。需要理解类组件和函数组件的区别。类组件有自己的实例,每次update只会重新执行render函数。而函数组件每次update都会重新执行整个函数。函数组件里的state更改,只能在下一次函数执行的时候拿到最新的值。
withKeepAlive
return 上 因为import
KeepAliveProvider
- return 上
- return 中
withKeepAlive
return 中
createEvent 组件准备添加
KeepAliveProvider
- return 中
if(!comp) createEvent 添加缓存对象, 此时组件的dom没有创建
结果:{cacheId, reactElement, reactElementDom: null, alive: 0}
KeepAliveProvider
- return 上
- return 中
comps遍历,添加组件缓存对象中的dom节点
withKeepAlive
return 中
createEvent 组件准备添加,**因为本次UI更新后comps添加了dom,dom需要在下一次更新后才会有**
KeepAliveProvider
- return 中
if (comp) createEvent 组件缓存对象中dom 创建完成
结果:{cacheId, reactElement, reactElementDom: dom, alive: 1}
KeepAliveProvider
- return 上
- return 中
withKeepAlive
return 中
读取组件缓存中组件dom节点,并从cacheId节点下移动过来
结果:同二
FAQs
react@^17.0.2,react-router-dom@^6
The npm package @unzoa/react-keepalive receives a total of 0 weekly downloads. As such, @unzoa/react-keepalive popularity was classified as not popular.
We found that @unzoa/react-keepalive demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
As vulnerability data bottlenecks grow, the federal government is formally investigating NIST’s handling of the National Vulnerability Database.
Research
Security News
Socket’s Threat Research Team has uncovered 60 npm packages using post-install scripts to silently exfiltrate hostnames, IP addresses, DNS servers, and user directories to a Discord-controlled endpoint.
Security News
TypeScript Native Previews offers a 10x faster Go-based compiler, now available on npm for public testing with early editor and language support.