React-Activation使用
该份笔记大部转自
React-Activation
的github网站,如有详细了解的同学可以自行上github去查阅资料
vue 中 <keep-alive />
功能在 React 中的实现
该组件是react开发过程当中使用得比较频繁的一个组件,它与vue开发过程当中的<keep-alive>
功能相似,都可以缓存一整 个页面。与该组件相类似的不家另一个组件react-keep-alive
兼容性
- React v16+
- Preact v10+
- 兼容 SSR
安装
$ yarn add react-activation
# 或者
$ npm install react-activation
使用方式
-
babel 配置文件
.babelrc
中增加react-activation/babel
插件该插件会于编译阶段在各 JSX 元素上增加
_ka
属性,帮助react-activation
在运行时按渲染位置生成唯一的缓存 id 标识{ "plugins": [ "react-activation/babel" ] }
-
业务代码中,在不会被销毁的位置放置
<AliveScope>
外层,一般为应用入口处注意:与
react-router
或react-redux
配合使用时,需要将<AliveScope>
放置在<Router>
或<Provider>
内部// entry.js import React from 'react' import ReactDOM from 'react-dom' import { AliveScope } from 'react-activation' import Test from './Test' ReactDOM.render( <AliveScope> <Test /> </AliveScope>, document.getElementById('root') )
-
用
<KeepAlive>
包裹需要保持状态的组件如例子中的
<Counter>
组件// Test.js import React, { useState } from 'react' import KeepAlive from 'react-activation' function Counter() { const [count, setCount] = useState(0) return ( <div> <p>count: {count}</p> <button onClick={() => setCount(count => count + 1)}>Add</button> </div> ) } function Test() { const [show, setShow] = useState(true) return ( <div> <button onClick={() => setShow(show => !show)}>Toggle</button> {show && ( <KeepAlive> <Counter /> </KeepAlive> )} </div> ) } export default Test
生命周期
ClassComponent
可配合 withActivation
装饰器
使用 componentDidActivate
与 componentWillUnactivate
对应激活与缓存两种状态
FunctionComponent
则分别使用 useActivate
与 useUnactivate
hooks 钩子
...
import KeepAlive, { useActivate, useUnactivate, withActivation } from 'react-activation'
@withActivation
class TestClass extends Component {
...
componentDidActivate() {
console.log('TestClass: componentDidActivate')
}
componentWillUnactivate() {
console.log('TestClass: componentWillUnactivate')
}
...
}
...
function TestFunction() {
useActivate(() => {
console.log('TestFunction: didActivate')
})
useUnactivate(() => {
console.log('TestFunction: willUnactivate')
})
...
}
...
function App() {
...
return (
{show && (
<KeepAlive>
<TestClass />
<TestFunction />
</KeepAlive>
)}
)
}
...
保存滚动位置
默认为
true
<KeepAlive />
会检测它的 children
属性中是否存在可滚动的元素,然后在 componentWillUnactivate
之前自动保存滚动位置,在 componentDidActivate
之后恢复保存的滚动位置
如果你不需要 <KeepAlive />
做这件事,可以将 saveScrollPosition
属性设置为 false
<KeepAlive saveScrollPosition={false} />
如果你的组件共享了屏幕滚动容器如 document.body
或 document.documentElement
, 将 saveScrollPosition
属性设置为 "screen"
可以在 componentWillUnactivate
之前自动保存共享屏幕容器的滚动位置
<KeepAlive saveScrollPosition="screen" />
多份缓存
同一个父节点下,相同位置的 <KeepAlive>
默认会使用同一份缓存
例如下述的带参数路由场景,/item
路由会按 id
来做不同呈现,但只能保留同一份缓存
<Route
path="/item/:id"
render={props => (
<KeepAlive>
<Item {...props} />
</KeepAlive>
)}
/>
类似场景,可以使用 <KeepAlive>
的 id
属性,来实现按特定条件分成多份缓存
<Route
path="/item/:id"
render={props => (
<KeepAlive id={props.match.params.id}>
<Item {...props} />
</KeepAlive>
)}
/>
缓存控制
自动控制缓存
给需要控制缓存的 <KeepAlive />
标签增加 when
属性,取值如下
当 when
类型为 Boolean
时
- true: 卸载时缓存
- false: 卸载时不缓存
<KeepAlive when={true}>
当 when
类型为 Array
时
第 1 位参数表示是否需要在卸载时缓存
第 2 位参数表示是否卸载 <KeepAlive>
的所有缓存内容,包括 <KeepAlive>
中嵌套的所有 <KeepAlive>
// 例如:以下表示卸载时不缓存,并卸载掉嵌套的所有 `<KeepAlive>`
<KeepAlive when={[false, true]}>
...
<KeepAlive>
...
<KeepAlive>...</KeepAlive>
...
</KeepAlive>
...
</KeepAlive>
当 when
类型为 Function
时
返回值为上述 Boolean
或 Array
,依照上述说明生效
手动控制缓存
-
给需要控制缓存的
<KeepAlive />
标签增加name
属性 -
使用
withAliveScope
或useAliveController
获取控制函数-
drop(name):
按 name 卸载缓存状态下的
<KeepAlive>
节点,name 可选类型为String
或RegExp
,注意,仅卸载命中<KeepAlive>
的第一层内容,不会卸载<KeepAlive>
中嵌套的、未命中的<KeepAlive>
-
dropScope(name)
按 name 卸载缓存状态下的
<KeepAlive>
节点,name 可选类型为String
或RegExp
,将卸载命中<KeepAlive>
的所有内容,包括<KeepAlive>
中嵌套的所有<KeepAlive>
-
clear()
将清空所有缓存中的 KeepAlive
-
getCachingNodes()
获取所有缓存中的节点
-
...
import KeepAlive, { withAliveScope, useAliveController } from 'react-activation'
...
<KeepAlive name="Test">
...
<KeepAlive>
...
<KeepAlive>
...
</KeepAlive>
...
</KeepAlive>
...
</KeepAlive>
...
function App() {
const { drop, dropScope, clear, getCachingNodes } = useAliveController()
useEffect(() => {
drop('Test')
// or
drop(/Test/)
// or
dropScope('Test')
clear()
})
return (
...
)
}
// or
@withAliveScope
class App extends Component {
render() {
const { drop, dropScope, clear, getCachingNodes } = this.props
return (
...
)
}
}
...
Breaking Change 由实现原理引发的额外问题
-
<KeepAlive />
中需要有一个将 children 传递到<AliveScope />
的动作,故真实内容的渲染会相较于正常情况慢一拍将会对严格依赖生命周期顺序的功能造成一定影响,例如
componentDidMount
中 ref 的取值,如下class Test extends Component { componentDidMount() { console.log(this.outside) // will log <div /> instance console.log(this.inside) // will log undefined } render() { return ( <div> <div ref={ref => { this.outside = ref }} > Outside KeepAlive </div> <KeepAlive> <div ref={ref => { this.inside = ref }} > Inside KeepAlive </div> </KeepAlive> </div> ) } }
ClassComponent
中上述错误可通过利用withActivation
高阶组件修复FunctionComponent
目前暂无处理方式,可使用setTimeout
或nextTick
延时获取ref
@withActivation class Test extends Component { componentDidMount() { console.log(this.outside) // will log <div /> instance console.log(this.inside) // will log <div /> instance } render() { return ( <div> <div ref={ref => { this.outside = ref }} > Outside KeepAlive </div> <KeepAlive> <div ref={ref => { this.inside = ref }} > Inside KeepAlive </div> </KeepAlive> </div> ) } }
-
对 Context 的破坏性影响,需手动修复
问题情景参考:https://github.com/StructureBuilder/react-keep-alive/issues/36
<Provider value={1}> {show && ( <KeepAlive> <Consumer> {( context // 由于渲染层级被破坏,此处无法正常获取 context ) => <Test contextValue={context} />} </Consumer> </KeepAlive> )} <button onClick={toggle}>toggle</button> </Provider>
修复方式任选一种
- 使用从
react-activation
导出的createContext
创建上下文 - 使用从
react-activation
导出的fixContext
修复受影响的上下文
... import { createContext } from 'react-activation' const { Provider, Consumer } = createContext() ... // or ... import { createContext } from 'react' import { fixContext } from 'react-activation' const Context = createContext() const { Provider, Consumer } = Context fixContext(Context) ...
- 使用从
-
对依赖于 React 层级的功能造成影响,如下
Error Boundaries(已修复)React.Suspense & React.lazy(已修复)- React 合成事件冒泡失效
- 其他未发现的功能
与路由转场动画结合
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'
import KeepAlive, { AliveScope } from 'react-activation'
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import 'animate.css/animate.min.css'
class Test extends React.Component {
state = {
number: 0
}
handleClick = () => {
this.setState(({ number }) => ({
number: number + 1
}))
}
render() {
return (
<div>
<button onClick={this.handleClick}>
Click the button to increase the number
</button>
<div>Number: {this.state.number}</div>
</div>
)
}
}
function App() {
return (
<div>
<ul>
<li>
<Link to="/one">one</Link>
</li>
<li>
<Link to="/two">two</Link>
</li>
</ul>
<Route
render={({ location }) => {
return (
<TransitionGroup>
<CSSTransition
key={location.key}
classNames={{
enter: 'animated',
enterActive: 'fadeInDown',
exit: 'animated',
exitActive: 'fadeOutDown'
}}
timeout={1000}
mountOnEnter
unmountOnExit
>
<div>
<Switch location={location}>
<Route
path="/one"
render={props => (
<KeepAlive>
<Test {...props} />
</KeepAlive>
)}
/>
<Route path="/two" render={() => 'This is two'} />
</Switch>
</div>
</CSSTransition>
</TransitionGroup>
)
}}
/>
</div>
)
}
ReactDOM.render(
<Router>
<AliveScope>
<App />
</AliveScope>
</Router>,
document.getElementById('root')
)
评论区