首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX  ›  前端开发

React 怎么实现 Vue 的 <keep-alive> 组件

  •  
  •   s2696922797c · 32 天前 · 256 次点击
    这是一个创建于 32 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如果你用过 Vue,那肯定知道它有一个非常好用的组件(keep-alive)能够保持组件的状态来避免重复重渲染。

    有时,我们希望在列表页面进入详情页面后,缓存列表页面的状态;当从详情页面返回列表页面时,列表页面还是和切换前一样。

    这实际上挺难实现的,因为 React 中的组件一旦卸载就无法重用。在 issue #12039 中提出了两种解决方案;通过样式来控制组件的显示(display:none | block;),但是这可能会导致问题,例如切换组件时,无法使用动画;或者使用像 Mobx 和 Redux 这样的数据流管理工具,但这太麻烦了。

    于是我就自己实现了 React 版本的 react-keep-alive,它的效果和 Vue 的 <keep-alive> 相同,但在使用上有些区别。

    React Keep Alive 提供了 <Provider>,你必须把 <KeepAlive> 放在 Provider 里面,并且每个 <KeepAlive> 组件都必须拥有一个唯一的 key

    import React from 'react';
    import ReactDOM from 'react-dom';
    import {
      Provider,
      KeepAlive,
    } from 'react-keep-alive';
    import Test from './views/Test';
    
    ReactDOM.render(
      <Provider>
        <KeepAlive key="Test">
          <Test />
        </KeepAlive>
      </Provider>,
      document.getElementById('root'),
    );
    

    react-keep-alive 是通过 React.createPortal API 实现的。react-keep-alive 有两个主要的组件 <Provider><KeepAlive><Provider> 负责保存组件的缓存,并在处理之前通过 React.createPortal API 将缓存的组件渲染在应用程序的外面。缓存的组件必须放在 <KeepAlive> 中,<KeepAlive> 会把在应用程序外面渲染的组件挂载到真正需要显示的位置。

    并且我还新增了两个生命周期 componentDidActivatecomponentWillUnactivate,新增后的生命周期:

    Lifecycle after adding

    大家有兴趣可以去我的 github 上瞅瞅,另外附上 中文文档

    小伙伴们多提提 Issues 哈。

    目前尚无回复
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   873 人在线   最高记录 4385   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 18ms · UTC 22:48 · PVG 06:48 · LAX 15:48 · JFK 18:48
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1