React - keep-alive | 易学教程

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
    // 再次进入时，恢复原来的滚动位置
    window.scrollTo(0, MeScrollTop) 
    window.addEventListener('scroll', this.handleScroll)
  }
  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll)
  }
  render() {
    return (
      <div>Me</div>
    )
  }
}

const mapStateToProps = (state) => ({
  MeScrollTop: state.global.MeScrollTop
}) 

export default connect(mapStateToProps)(Me)

来源：CSDN

作者：jnChen10

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

标签

react

keep-alive