React——组件缓存 react-activation-Toy模板网

这篇具有很好参考价值的文章主要介绍了React——组件缓存 react-activation。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、安装依赖

npm i -S react-activation

2、包裹根组件

import { AliveScope } from "react-activation"

<AliveScope>
	<App />
</AliveScope>

3、缓存组件

import { KeepAlive } from "react-activation"

export default () => {
  const [isShow, setIsShow] = useState(true)

  return <div>

    <button onClick={() => setIsShow(!isShow)}>切换</button>

    {
      isShow &&
      <KeepAlive>
        <Page3 />
      </KeepAlive>
    }
    <Page4 />
  </div>
}

4、路由缓存

<Route
  path="/page1"
  render={props => (
    <KeepAlive name="/page1">
      <Item {...props} />
    </KeepAlive>
  )}
/>

5、KeepAlive属性

属性名	类型	备注
when	Boolean、Array、Function	Boolean (true-卸载时缓存 false-卸载时不缓存) Array (第 1 位参数表示是否需要在卸载时缓存第 2 位参数表示是否卸载 `<KeepAlive>` 的所有缓存内容，包括 `<KeepAlive>` 中嵌的 `<KeepAlive>)` Function (返回值为上述 `Boolean` 或 `Array`)
saveScrollPosition	Boolean	自动保存滚动位置（默认true）
name	string	缓存标识

6、手动控制缓存

使用 withAliveScope 或 useAliveController 获取控制函数文章来源地址https://www.toymoban.com/news/detail-675018.html

import KeepAlive, { withAliveScope, useAliveController } from 'react-activation'

//hook 函数式组件
function app(){
    const { drop, dropScope, clear, getCachingNodes } = useAliveController()
}

//class 类组件
@withAliveScope
class App extends Component {
  render() {
    const { drop, dropScope, clear, getCachingNodes } = this.props
  }
}