react 中的 keep-alive

最新推荐文章于 2024-05-31 11:29:07 发布

__竹子__

最新推荐文章于 2024-05-31 11:29:07 发布

阅读量4.1k

点赞数 1

本文链接：https://blog.csdn.net/Carol246/article/details/118201278

版权

需求场景

为了优化用户的体验，可能会遇到这样的需求：返回列表的时候，需要保持状态和滚动位置；或是页面内切换组件（比如切换 Tab ）的时候，需要保持状态。

如果使用 Vue，就可以用 <keep-alive> 组件来让其包含的组件保留状态，实现组件缓存。但是在 React 中并没有这样的功能，而且在这个 issues 中也可以看到，官方认为 <keep-alive> 容易造成内存的泄露，因此不准备引入这样的 API，但也许未来会提供更好的缓存方式，所以目前还需通过其他方法实现这类需求。

方法对比

redux 或 localStorage/sessionStorage
通过这几种方式把状态存储起来，再次回到页面时再把状态取出来使用，实现缓存的效果。
这种方式在数据量较少时可以很好地实现缓存，但在状态多或情况多变的时候，就会让改动较大、控制起来也比较复杂，不是一个通用的方法。
第三方库
- react-keep-alive
  可以实现缓存的效果，但是会造成数据驱动失效。
  虽然可以缓存最后一次状态渲染结果，但是后面数据变化无法再进行数据驱动。
- react-activation
  可以实现缓存的效果，较推荐。
- umi-plugin-keep-alive
  是基于 react-activation 的 umi 插件。

react-activation 的使用

其实使用方法很简单，用 <KeepAlive> 包裹需要进行缓存的组件，并在一个不会卸载的父组件内包裹上 <AliveScope> 即可。

react-activation 分别为类组件和函数组件提供了生命周期 componentDidActivate、componentWillUnactivate 或 hooks useActivate、useUnactivate，来对应恢复缓存和进行缓存两种状态，以及是否保存滚动位置、手动控制缓存等等功能。

通过作者的最简实现可以看到组件缓存的效果和使用的示例，以及 react-activation 的最简实现方式，可以分析一下它的实现思路。

react-activation 的源码原理

最简实现：

import React, { Component, createContext } from 'react'

const { Provider, Consumer } = createContext()
const withScope = WrappedComponent => props => (
  <Consumer>{keep => <WrappedComponent {...props} keep={keep} />}</Consumer>
)

export class AliveScope extends Component {
  nodes = {}
  state = {}

  keep = (id, children) =>
    new Promise(resolve =>
      this.setState(
        {
          [id]: { id, children }
        },
        () => resolve(this.nodes[id])
      )
    )

  render() {
    return (
      <Provider value={this.keep}>
        {this.props.children}
        {Object.values(this.state).map(({ id, children }) => (
          <div
            key={id}
            ref={node => {
              this.nodes[id] = node
            }}
          >
            {children}
          </div>
        ))}
      </Provider>
    )
  }
}

@withScope
class KeepAlive extends Component {
  constructor(props) {
    super(props)
    this.init(props)
  }

  init = async ({ id, children, keep }) => {
    const realContent = await keep(id, children)
    this.placeholder.appendChild(realContent)
  }

  render() {
    return (
      <div
        ref={node => {
          this.placeholder = node
        }}
      />
    )
  }
}

export default KeepAlive