React - keep-alive

最新推荐文章于 2024-07-29 17:34:51 发布

jnChen10

最新推荐文章于 2024-07-29 17:34:51 发布

阅读量850

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/sinat_33184880/article/details/104344873

版权

React 没有内置的 keep-alive 功能，但可以通过其他方式实现类似效果。如使用 CSS 的 display: none 隐藏页面，将数据保存在父组件或使用 Redux 管理状态。同时，为恢复滚动位置，可以结合 Redux 记录页面滚动距离。

摘要由CSDN通过智能技术生成

React 没有提供类似 Vue <keep-alive> 缓存页面不销毁的功能。在 Github 上，有用户提了相关的 issues：can React support feature like keep-alive in Vue?

但 React 的开发者认为新增“缓存页面”功能需要修改原有的代码，并且“缓存页面”容易造成内存溢出，他们并不推荐用户使用/依赖该功能，并给与了其他解决方法

使用 display: none; 隐藏页面
将需要“缓存”页面的数据挂载到父组件或者更顶层组件
使用 redux

使用 redux 缓存页面数据的同时，需要记录当前页面的滚动距离，在下一次挂载时，恢复滚动位置

import React, { Component } from 'react'
import { connect } from 'react-redux'

class Me extends Component {
  handleScroll = () => {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    // redux 记录滚动距离
    this.props.dispatch({
      type: 'CHANGE_Me_ScrollTop',
      payload: { MeScrollTop: scrollTop }
    })
  }
  componentDidMount() {
    let { MeScrollTop } = this.props
    // 再次进入时，恢复原来的