React之keep-alive组件

于 2024-10-03 23:38:26 发布
阅读量596 收藏 6
点赞数 10
分类专栏： React.js 文章标签： react.js javascript 前端 reactjs react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40588441/article/details/142697854
版权

React之keep-alive组件

初始化项目

create-react-app hs-keepalive
cd hs-keepalive
npm install react-router-dom keepalive-react-component --save
npm start

跑通路由

src\index.js

src\index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'
import Home from './components/Home';
import UserList from './components/UserList';
import UserAdd from './components/UserAdd';
const App = () => {
  return (
    <Router  >
      <ul>
        <li><Link to="/">首页</Link></li>
        <li><Link to="/list">用户列表</Link></li>
        <li><Link to="/add">添加用户</Link></li>
      </ul>
      <Switch>
        <Route path={'/'} component={Home} exact />
        <Route path={'/list'} component={UserList} />
        <Route path={'/add'} component={UserAdd} />
      </Switch>
    </Router>
  )
}
ReactDOM.render(<App/>, document.getElementById('root'));

Home.js

src\components\Home.js

import React from 'react';
const Home = (props) => {
    return (
        <div>
            <button >重置UserAdd</button>
            <button >重置UserList</button>
        </div>
    )
}
export default Home;

UserAdd.js

src\components\UserAdd.js

import React from 'react';
const UserAdd = ()=>{
    let [number,setNumber]=React.useState(0);
    return (
        <div>
            用户名:<input/>
            <hr/>
            <button onClick={()=>setNumber(number=>number+1)}>{number}</button>
        </div>
    )
}
export default UserAdd;

UserList.js

src\components\UserList.js

import React from 'react';
import {Link} from 'react-router-dom'
const UserList = (props)=>{
    let users = new Array(100).fill(0);
    return (
        <ul style={{height:'200px',overflow:'scroll'}}>
            {
                users.map((item,index)=>(
                    <li key={index}><Link to={`/detail/${index}`}>{index}</Link></li>
                ))
            }
        </ul>
    )
}
export default UserList;

实现keep-alive

src\index.js

src\index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'
import Home from './components/Home';
import UserList from './components/UserList';
import UserAdd from './components/UserAdd';
+import { KeepAliveProvider, withKeepAlive } from './keepalive-react-component';
+let KeepAliveHome = withKeepAlive(Home, { cacheId: 'Home'});
+let KeepAliveUserList = withKeepAlive(UserList, { cacheId: 'UserList'});
+let KeepAliveUserAdd = withKeepAlive(UserAdd, { cacheId: 'UserAdd' });
const App = () => {
  return (
    <Router  >
+     <KeepAliveProvider>
        <ul>
          <li><Link to="/">首页</Link></li>
          <li><Link to="/list">用户列表</Link></li>
          <li><Link to="/add">添加用户</Link></li>
        </ul>
        <Switch>
+          <Route path={'/'} component={KeepAliveHome} exact />
+          <Route path={'/list'} component={KeepAliveUserList} />
+          <Route path={'/add'} component={KeepAliveUserAdd} />
        </Switch>
+     </KeepAliveProvider>
    </Router>
  )
}
ReactDOM.render(<App/>, document.getElementById('root'));

keepalive-react-component\index.js

src\keepalive-react-component\index.js

export {default as KeepAliveProvider} from './KeepAliveProvider';
export {default as withKeepAlive} from './withKeepAlive';

cache-types.js

src\keepalive-react-component\cache-types.js

export const CREATE = 'CREATE';        //创建
export const CREATED = 'CREATED';      //创建成功
export const ACTIVE = 'ACTIVE';        //激活

cacheReducer.js

src\keepalive-react-component\cacheReducer.js

import *  as cacheTypes from './cache-types';
function cacheReducer(cacheStates = {}, { type, payload }) {
    switch (type) {
        case cacheTypes.CREATE:
            return { ...cacheStates,
                [payload.cacheId]: {
                    cacheId:payload.cacheId,
                    element:payload.element,
                    status:cacheTypes.CREATE
                } };
        case cacheTypes.CREATED:
            return { ...cacheStates,
                [payload.cacheId]: {
                    ...cacheStates[payload.cacheId],
                    doms:payload.doms,
                    status:cacheTypes.CREATED
                } };   
        case cacheTypes.ACTIVE:
            return { ...cacheStates,
                [payload.cacheId]: {
                    ...cacheStates[payload.cacheId],
                    status:cacheTypes.ACTIVE
                } };                
        default:
            return cacheStates;
    }
}
export default cacheReducer;

CacheContext.js

src\keepalive-react-component\CacheContext.js

import React from 'react';
const CacheContext = React.createContext();
export default CacheContext;

KeepAliveProvider.js

src\keepalive-react-component\KeepAliveProvider.js

import React, { useReducer, useCallback } from "react";
import CacheContext from './CacheContext';
import cacheReducer from './cacheReducer';
import * as cacheTypes from './cache-types';
function KeepAliveProvider(props) {
    let [cacheStates, dispatch] = useReducer(cacheReducer, {});
    const mount = useCallback(({ cacheId, element }) => {
        if(!cacheStates[cacheId]){
            dispatch({ type: cacheTypes.CREATE, payload: { cacheId, element } });
        }
    }, [cacheStates]);
    return (
        <CacheContext.Provider value={{ mount, cacheStates, dispatch }}>
            {props.children}
            {Object.values(cacheStates).map(({ cacheId, element }) => (
                <div
                    id={`cache_${cacheId}`}
                    key={cacheId}
                    ref={(dom) => {
                        let cacheState = cacheStates[cacheId];
                        if (dom && (!cacheState.doms)) {
                            let doms = Array.from(dom.childNodes);
                            dispatch({ type: cacheTypes.CREATED, payload: { cacheId, doms } });
                        }
                    }}
                >{element}</div>
            ))}
        </CacheContext.Provider>
    );
}
export default KeepAliveProvider;

withKeepAlive.js

src\keepalive-react-component\withKeepAlive.js

import React, { useContext, useRef,useEffect } from "react";
import CacheContext from './CacheContext';
function withKeepAlive(OldComponent, { cacheId = window.location.pathname }) {
    return function (props) {
        const {mount, cacheStates,dispatch } = useContext(CacheContext);
        const ref = useRef(null);
        useEffect(() => {
            let cacheState = cacheStates[cacheId];
            if(cacheState&&cacheState.doms){
                 let doms = cacheState.doms;
                 doms.forEach(dom=>ref.current.appendChild(dom));
            }else{
                mount({ cacheId, element: <OldComponent {...props} dispatch={dispatch}/> })
            }
        }, [cacheStates, dispatch, mount, props]);
        return <div id={`keepalive_${cacheId}`} ref={ref} />;
    }
}
export default withKeepAlive;

保持滚动状态

src\index.js

src\index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'
import Home from './components/Home';
import UserList from './components/UserList';
import UserAdd from './components/UserAdd';
import { KeepAliveProvider, withKeepAlive } from './keepalive-react-component';
let KeepAliveHome = withKeepAlive(Home, { cacheId: 'Home'});
+let KeepAliveUserList = withKeepAlive(UserList, { cacheId: 'UserList',scroll:true});
let KeepAliveUserAdd = withKeepAlive(UserAdd, { cacheId: 'UserAdd' });
const App = () => {
  return (
    <Router  >
      <KeepAliveProvider>
        <ul>
          <li><Link to="/">首页</Link></li>
          <li><Link to="/list">用户列表</Link></li>
          <li><Link to="/add">添加用户</Link></li>
        </ul>
        <Switch>
          <Route path={'/'} component={KeepAliveHome} exact />
          <Route path={'/list'} component={KeepAliveUserList} />
          <Route path={'/add'} component={KeepAliveUserAdd} />
        </Switch>
      </KeepAliveProvider>
    </Router>
  )
}
ReactDOM.render(<App/>, document.getElementById('root'));

cacheReducer.js

src\keepalive-react-component\cacheReducer.js

import *  as cacheTypes from './cache-types';
function cacheReducer(cacheStates = {}, { type, payload }) {
    switch (type) {
        case cacheTypes.CREATE:
            return { ...cacheStates,
                [payload.cacheId]: {
+                   scrolls:{},
                    cacheId:payload.cacheId,
                    element:payload.element,
                    status:cacheTypes.CREATE
                } };
        case cacheTypes.CREATED:
            return { ...cacheStates,
                [payload.cacheId]: {
                    ...cacheStates[payload.cacheId],
                    doms:payload.doms,
                    status:cacheTypes.CREATED
                } };   
        case cacheTypes.ACTIVE:
            return { ...cacheStates,
                [payload.cacheId]: {
                    ...cacheStates[payload.cacheId],
                    status:cacheTypes.ACTIVE
                } };                
        default:
            return cacheStates;
    }
}
export default cacheReducer;

KeepAliveProvider.js

src\keepalive-react-component\KeepAliveProvider.js

import React, { useReducer, useCallback } from "react";
import CacheContext from './CacheContext';
import cacheReducer from './cacheReducer';
import * as cacheTypes from './cache-types';
function KeepAliveProvider(props) {
    let [cacheStates, dispatch] = useReducer(cacheReducer, {});
    const mount = useCallback(({ cacheId, element }) => {
        if(!cacheStates[cacheId]){
            dispatch({ type: cacheTypes.CREATE, payload: { cacheId, element } });
        }
    }, [cacheStates]);
+   let handleScroll = useCallback((cacheId, {target}) => {
+       if(cacheStates[cacheId]){
+           let scrolls = cacheStates[cacheId].scrolls;
+           scrolls[target] = target.scrollTop;
+       }
+   }, [cacheStates]);
    return (
+       <CacheContext.Provider value={{ mount, cacheStates, dispatch,handleScroll }}>
            {props.children}
            {Object.values(cacheStates).map(({ cacheId, element }) => (
                <div
                    id={`cache_${cacheId}`}
                    key={cacheId}
                    ref={(dom) => {
                        let cacheState = cacheStates[cacheId];
                        if (dom && (!cacheState.doms)) {
                            let doms = Array.from(dom.childNodes);
                            dispatch({ type: cacheTypes.CREATED, payload: { cacheId, doms } });
                        }
                    }}
                >{element}</div>
            ))}
        </CacheContext.Provider>
    );
}
export default KeepAliveProvider;

withKeepAlive.js

src\keepalive-react-component\withKeepAlive.js

import React, { useContext, useRef,useEffect } from "react";
import CacheContext from './CacheContext';
+function withKeepAlive(OldComponent, { cacheId = window.location.pathname,scroll=false }) {
    return function (props) {
+       const {mount, cacheStates,dispatch,handleScroll } = useContext(CacheContext);
        const ref = useRef(null);
+       useEffect(()=>{
+           if(scroll){
+               ref.current.addEventListener('scroll', handleScroll.bind(null, cacheId),true);
+           }
+       },[handleScroll]);
        useEffect(() => {
            let cacheState = cacheStates[cacheId];
            if(cacheState&&cacheState.doms){
                let doms = cacheState.doms;
                doms.forEach(dom=>ref.current.appendChild(dom));
+               if(scroll){
+                  doms.forEach(dom=>{
+                      if (cacheState.scrolls[dom])
+                        dom.scrollTop = cacheState.scrolls[dom];
+                  });
+                 }
            }else{
                mount({ cacheId, element: <OldComponent {...props} dispatch={dispatch}/> })
            }
        }, [cacheStates, dispatch, mount, props]);
        return <div id={`keepalive_${cacheId}`} ref={ref} />;
    }
}
export default withKeepAlive;

销毁缓存

Home.js

src\components\Home.js

import React from 'react';
const Home = (props) => {
    return (
        <div>
+            <button onClick={() => props.dispatch({ type: 'DESTROY', payload: { cacheId: 'UserAdd' } })}>重置UserAdd</button>
+            <button onClick={() => props.dispatch({ type: 'DESTROY', payload: { cacheId: 'UserList' } })}>重置UserList</button>
        </div>
    )
}
export default Home;

cache-types.js

src\keepalive-react-component\cache-types.js

export const CREATE = 'CREATE';        //创建
export const CREATED = 'CREATED';      //创建成功
export const ACTIVE = 'ACTIVE';        //激活
+export const DESTROY = 'DESTROY';     //销毁

cacheReducer.js

src\keepalive-react-component\cacheReducer.js

import *  as cacheTypes from './cache-types';
function cacheReducer(cacheStates = {}, { type, payload }) {
    switch (type) {
        case cacheTypes.CREATE:
            return { ...cacheStates,
                [payload.cacheId]: {
                    scrolls:{},
                    cacheId:payload.cacheId,
                    element:payload.element,
                    status:cacheTypes.CREATE
                } };
        case cacheTypes.CREATED:
            return { ...cacheStates,
                [payload.cacheId]: {
                    ...cacheStates[payload.cacheId],
                    doms:payload.doms,
                    status:cacheTypes.CREATED
                } };   
        case cacheTypes.ACTIVE:
            return { ...cacheStates,
                [payload.cacheId]: {
                    ...cacheStates[payload.cacheId],
                    status:cacheTypes.ACTIVE
                } };           
+       case cacheTypes.DESTROY:
+           return { ...cacheStates,
+               [payload.cacheId]:{
+                   ...cacheStates[payload.cacheId],
+                   status:cacheTypes.DESTROY
+               }};              
        default:
            return cacheStates;
    }
}
export default cacheReducer;

KeepAliveProvider.js

src\keepalive-react-component\KeepAliveProvider.js

import React, { useReducer, useCallback } from "react";
import CacheContext from './CacheContext';
import cacheReducer from './cacheReducer';
import * as cacheTypes from './cache-types';
function KeepAliveProvider(props) {
    let [cacheStates, dispatch] = useReducer(cacheReducer, {});
    const mount = useCallback(({ cacheId, element }) => {
+      if(cacheStates[cacheId]){
+          let cacheState = cacheStates[cacheId];
+          if(cacheState.status === cacheTypes.DESTROY){
+              let doms = cacheState.doms;
+              doms.forEach(dom=>dom.parentNode.removeChild(dom));
+              dispatch({ type: cacheTypes.CREATE, payload: { cacheId, element } });
+          }
+      }else{
           dispatch({ type: cacheTypes.CREATE, payload: { cacheId, element } });
+      }
    }, [cacheStates]);
    let handleScroll = useCallback((cacheId, {target}) => {
        if(cacheStates[cacheId]){
            let scrolls = cacheStates[cacheId].scrolls;
            scrolls[target] = target.scrollTop;
        }
    }, [cacheStates]);
    return (
        <CacheContext.Provider value={{ mount, cacheStates, dispatch,handleScroll }}>
            {props.children}
+           {Object.values(cacheStates).filter(cacheState=>cacheState.status!==cacheTypes.DESTROY).map(({ cacheId, element }) => (
                <div
                    id={`cache_${cacheId}`}
                    key={cacheId}
                    ref={(dom) => {
                        let cacheState = cacheStates[cacheId];
+                       if (dom && (!cacheState.doms || cacheState.status === cacheTypes.DESTROY) ) {
                            let doms = Array.from(dom.childNodes);
                            dispatch({ type: cacheTypes.CREATED, payload: { cacheId, doms } });
                        }
                    }}
                >{element}</div>
            ))}
        </CacheContext.Provider>
    );
}
export default KeepAliveProvider;

withKeepAlive.js

src\keepalive-react-component\withKeepAlive.js

import React, { useContext, useRef,useEffect } from "react";
import CacheContext from './CacheContext';
+import * as cacheTypes from './cache-types';
function withKeepAlive(OldComponent, { cacheId = window.location.pathname,scroll=false }) {
    return function (props) {
        const {mount, cacheStates,dispatch,handleScroll } = useContext(CacheContext);
        const ref = useRef(null);
        useEffect(()=>{
            if(scroll){
                ref.current.addEventListener('scroll', handleScroll.bind(null, cacheId),true);
            }
        },[handleScroll]);
        useEffect(() => {
            let cacheState = cacheStates[cacheId];
+           if(cacheState&&cacheState.doms && cacheState.status !== cacheTypes.DESTROY){
                let doms = cacheState.doms;
                doms.forEach(dom=>ref.current.appendChild(dom));
                if(scroll){
                   doms.forEach(dom=>{
                       if (cacheState.scrolls[dom])
                         dom.scrollTop = cacheState.scrolls[dom];
                   });
                  }
            }else{
                mount({ cacheId, element: <OldComponent {...props} dispatch={dispatch}/> })
            }
        }, [cacheStates, dispatch, mount, props]);
        return <div id={`keepalive_${cacheId}`} ref={ref} />;
    }
}
export default withKeepAlive;
若梦plus
关注
专栏目录
React - keep-alive
sinat_33184880的博客
02-16 885
React 没有提供类似 Vue <keep-alive> 缓存页面不销毁的功能。在 Github 上，有用户提了相关的 issues：can React support feature like keep-alive in Vue? 但 React 的开发者认为新增“缓存页面”功能需要修改原有的代码，并且“缓存页面”容易造成内存溢出，他们并不推荐用户使用/依赖该功能，并给与了其他解...
router-keep-alive:React路由器组件，真正保持活动组件
04-05
欢迎对router-keep-alive做出React :waving_hand: :house: :cow_face: :pig_nose: 仅支持哈希路由模式！ :backhand_index_pointing_left: React路由器组件，真正保持活动组件 安装 yarn add router-keep-alive # ...
解决keepalived脑裂问题
架构师的成长之路的博客
07-29 8084
更多干货 分布式实战（干货） spring cloud 实战（干货） mybatis 实战（干货） spring boot 实战（干货） React 入门实战（干货） 构建中小型互联网企业架构（干货） python 学习持续更新 ElasticSearch 笔记 kafka storm 实战 (干货) ...
React实现keepAlive
LOVEjourneyQAQ的博客
06-26 1778
keep-alive是vue中的内置组件，使用keep-alive包裹组件可以在该组件的切换过程中将页面的状态缓存在内存中，界面切换后被包裹的组件实例不会被销毁，防止界面重复渲染DOM，并且可以防止在页面切换过程中组件的数据丢失。包裹在需要缓存的组件外侧，通过Provider把状态和方法传递给子组件，如果判断出reactElement已经传过来了，但是对应的nodes数组还是为null的话就触发相应的reducer把该nodes重新赋值。即：切换路由时缓存之前的组件，保留之前输入的值不被清空。
react 中的 keep-alive
__竹子__的博客
06-25 4312
需求场景，方法对比，react-activation 的使用和源码原理
react 实现页面状态缓存（keep-alive）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
01-22 9406
因为 react、vue都是单页面应用，路由跳转时，就会销毁上一个页面的组件。但是有些项目不想被销毁，想保存状态。比如：h5项目跳转其他页面返回时，页面状态不丢失。设想一个 页面我滑倒了中间，然后跳转到 详情页然后 返回，之前的页面刷新了，回到顶部了肯定不行（搜索条件之类的消失了，滚动条回到顶部了）！比如：pc端项目后台管理项目里点击时 打开一个页签，页签切换，状态页会丢失。每次切换页签都重新请求了接口。
react中 keep-alive
大灰狼的小绵羊哥哥的博客
09-01 7108
react中如何实现 keep-alive 效果
umi-plugin-keep-alive:用于基于React激活的umijs
05-13
umi-plugin-keep-alive 中文说明 | 此 <KeepAlive> 功能基于 在线示例 umi 多 tabs 示例： 使用方法 安装 npm install umi-plugin-keep-alive --save # or yarn add umi-plugin-keep-alive 从 umi 中导出 KeepAlive...
keep-alive不能缓存多层级路由菜单问题解决
10-15
在Vue.js应用中，`keep-alive`组件用于缓存组件状态，以便在导航到其他页面后仍能保留之前的状态，从而提高用户体验。然而，在处理多层级路由菜单时，可能会遇到`keep-alive`无法正确缓存的问题。这个问题通常发生在...
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
10-17
首先，`<keep-alive>`是一个抽象组件，它的主要作用是将被包含的组件保留在内存中，避免在组件切换时销毁和重建。这在处理那些数据量较大、加载时间较长或者用户需要快速返回到之前状态的组件时特别有用。 1. **...
react-keep-alive:保持组件状态并避免重复渲染的组件
04-01
React保持活力 保持组件状态并避免重复渲染的组件。 English | :sparkles: 特征 不基于React Router，因此您可以在需要缓存的任何地方使用它。 您可以轻松地包装组件以保持它们的生命。 因为它不受display: none | block控制，所以display: none | block display: none | block ，您可以使用动画。 您将能够使用最新的React Hooks。 能够手动控制您的组件是否需要保持活动状态。 :package: 安装 React Keep Alive需要React 16.3或更高版本，但如果使用React Hooks，则必须为React 16.8或更高版本。 要将React Keep Alive与React应用程序一起使用： npm install --save react-keep-alive :hammer: 用法 React Kee
react-keepAlive-dynamic:react-keepAlive in React.js , 缓存组件+动态虚拟列表的方式在React中
05-06
这是一个在React中使用的性能优化方案 既可以动态的设定虚拟列表每个自元素的宽度高度 也可以在动态keep-alive缓存指定的组件 借此来媲美原生应用的用户体验 使用步骤 $ yarn $ yarn dev 最终访问端口号 8000 即可 :package: 安装 react-component-keepalive 最低支持 React 16.3 版本，但是如果你使用了 React Hooks，那么必须是 React 16.8 或更高版本。 在你的应用中安装 React Keep Alive： npm install --save react-component-keepalive :hammer: 使用 React Keep Alive 提供了 <Provider>， 你必须把 <KeepAlive> 放在 Provider 里面。 import React from 'react'; import Reac
react-keep-alive-demo.rar
08-04
react-keep-alive 缓存demo,网上很少有可用的案例,此demo 包括生命周期都有,可以直接搬到项目中使用! 免 C 币 下载地址: http://download.lllomh.com/cliect/#/product/J804099672377354
react-keepalive-router:基于react 16.8 +开发的react缓存组件，react router 4 +可用于缓存页面组件，类似于Vue keepalive包Vue路由器效果功能。（基于react 16.8 +，react-router 4+开发的react缓存组件，可以用作缓存页面组件，类似vue的Keepalive包装vue-router的效果功能）
03-18
基于react 16.8+ ， react-router 4+开发的react缓存组件，可以用作缓存页面组件，类似vue的keepalive封装vue-router的效果功能。 采用react hooks全新api ，支持缓存路由，手动解除缓存，增加了缓存的状态周期，...
react-router 实现 keepalive
qq_40693662的博客
07-02 375
3、二次封装 useOutlet ，根据缓存的 页面 来实现自定义渲染。2、使用react 的context 来缓存当前页面的所有节点。1、传入需要缓存的页面。
React 中的状态自动保存（KeepAlive）
cjy0208的博客
09-25 5251
图文无关 什么是状态保存？ 假设有下述场景： 移动端中，用户访问了一个列表页，上拉浏览列表页的过程中，随着滚动高度逐渐增加，数据也将采用触底分页加载的形式逐步增加，列表页浏览到某个位置，用户看到了感兴趣的项目，点击查看其详情，进入详情页，从详情页退回列表页时，需要停留在离开列表页时的浏览位置上 类似的数据或场景还有已填写但未提交的表单、管理系统中可切换和可关闭的功能标签等，这类数据随着用户交互逐...
React 的 KeepAlive 实战指南：深度解析组件缓存机制
最新发布
a958014226的博客
07-29 625
Vue 的是用于的高阶组件，可以有效地提高应用性能。它能够使组件在切换时仍能保留原有的状态信息，并且有专门的生命周期方便去做额外的处理。该组件在很多场景非常有用，比如：· tabs 缓存页面· 分步表单· 路由缓存在 Vue 中，通过包裹内的组件会自动缓存下来, 其中只能有一个直接子组件。可惜的是 React 官方目前并没有对外正式提供的 KeepAlive 组件，但是我们可以参考 Vue 的使用方式与 API 设计，实现一套 React 版本的 KeepAlive。
react keep-alive
weixin_34159110的博客
02-21 321
1 转载于:https://www.cnblogs.com/crazycode2/p/10415970.html
react-keep-alive
10-31
React Keep Alive是一个React组件，它可以帮助我们保持组件状态并避免重复渲染。它的作用类似于Vue中的keep-alive组件，可以缓存组件的状态，避免组件在切换时重新渲染。使用React Keep Alive可以提高应用程序的性能和用户体验。在使用React Keep Alive时，我们需要先安装它，然后将需要缓存的组件包裹在KeepAlive组件中即可。同时，我们也可以使用React Activation来实现组件的缓存，它的原理是将组件实际渲染在外部隐藏组件层级中，在组件真实渲染时再通过DOM的操作将其移入对应组件的对应容器中，从而实现组件的缓存。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值