How does VuReact compile Vue's KeepAlive component to React?

adapter component provided by VuReact Runtime — think of it as "Vue's KeepAlive for React".

The key characteristics of this compilation approach are:

1. 
   Semantic consistency: Fully simulates Vue <KeepAlive> behavior by implementing component instance caching


2. 
   State preservation: Caches removed component instances, preventing state loss


3. 
   Performance optimization: Reduces unnecessary component re-rendering


4. 
   React adaptation: Implements Vue's caching semantics in the React environment

KeepAlive with key

To ensure caching works correctly, it is recommended to provide a stable key for dynamic components.

• Vue
  

<template>

  <KeepAlive>

    <component :is="currentComponent" :key="componentKey" />

  </KeepAlive>

</template>

• Compiled React
  

<KeepAlive>

  <Component is={currentComponent} key={componentKey} />

</KeepAlive>

The importance of key:

1. 
   Cache identifier: key is used to identify and match cached instances


2. 
   Stable switching: Ensures correct cache hits when switching components


3. 
   Performance optimization: Avoids unnecessary cache creation and destruction


4. 
   Best practice: Always provide a stable key for dynamic components

Include and exclude control

<KeepAlive> supports the include and exclude attributes for precise control over which components should be cached.

include: Include specific components

• Vue
  

<template>

  <KeepAlive :include="['ComponentA', 'ComponentB']">

    <component :is="currentView" />

  </KeepAlive>

</template>

• Compiled React
  

<KeepAlive include={['ComponentA', 'ComponentB']}>

  <Component is={currentView} />

</KeepAlive>

exclude: Exclude specific components

• Vue
  

<template>

  <KeepAlive :exclude="['GuestPanel', /^Temp/]">

    <component :is="currentView" />

  </KeepAlive>

</template>

• Compiled React
  

<KeepAlive exclude={['GuestPanel', /^Temp/]}>

  <Component is={currentView} />

</KeepAlive>

Matching rules:

1. 
   String matching: Exact match on component name


2. 
   Regular expression: Matches component names matching the pattern


3. 
   Array combination: Supports arrays of strings and regular expressions


4. 
   Key matching: Attempts to match both component name and cache key

Maximum cache instances

The max attribute limits the maximum number of cached instances, preventing excessive memory usage.

• Vue
  

<template>

  <KeepAlive :max="3">

    <component :is="currentTab" />

  </KeepAlive>

</template>

• Compiled React
  

<KeepAlive max={3}>

  <Component is={currentTab} />

</KeepAlive>

Cache eviction strategy:

1. 
   LRU algorithm: Evicts the least recently accessed cached instance


2. 
   Memory management: Automatically clears cache exceeding the limit


3. 
   Performance balance: Strikes a balance between memory usage and performance


4. 
   Intelligent management: Manages cache intelligently based on access frequency

Cache lifecycle

Components cached by <KeepAlive> have special lifecycle hooks that can be observed.

Activated and deactivated lifecycle

• Vue
  

<script setup>

import { onActivated, onDeactivated } from 'vue';



onActivated(() => {

  console.log('Component activated');

});



onDeactivated(() => {

  console.log('Component deactivated');

});

</script>

• Compiled React
  

import { useActived, useDeactivated } from '@vureact/runtime-core';



function MyComponent() {

  useActived(() => {

    console.log('Component activated');

  });



  useDeactivated(() => {

    console.log('Component deactivated');

  });



  return <div>Component content</div>;

}

Lifecycle events:

1. 
   useActived: Triggered when the component is restored from cache and displayed


2. 
   useDeactivated: Triggered when the component is cached


3. 
   Initial render: Activated is also triggered on the component's initial render


4. 
   Final unmount: Deactivated is triggered when the component is finally destroyed

Compilation strategy summary

VuReact's KeepAlive compilation strategy demonstrates a complete component caching conversion capability:

1. 
   Direct component mapping: Maps Vue <KeepAlive> directly to VuReact's <KeepAlive>
   


2. 
   Full attribute support: Supports all attributes including include, exclude, max, etc.


3. 
   Lifecycle adaptation: Converts Vue lifecycle hooks into React Hooks


4. 
   Cached semantics preserved: Fully preserves Vue's caching behavior and semantics

How KeepAlive works:

1. 
   Instance caching: Preserves the instance in memory when a component is switched out


2. 
   State preservation: Keeps all of the component's state and data


3. 
   DOM retention: Retains the component's DOM structure


4. 
   Smart restoration: Quickly restores the previous instance when switching back

Performance optimization strategy:

1. 
   On-demand caching: Only caches components that truly need it


2. 
   Memory management: Intelligently manages cache memory usage


3. 
   Fast restoration: Optimizes cache restoration performance


4. 
   Garbage collection: Timely cleanup of cache that is no longer needed

Important notes:

1. 
   Single child node: <KeepAlive> can only have one direct child node


2. 
   Component type: Can only cache component elements, not regular elements


3. 
   Key requirement: Without a stable key, it degrades to non-cached rendering

VuReact's compilation strategy ensures a smooth migration from Vue to React. Developers do not need to manually implement component caching logic. The compiled code preserves Vue's caching semantics and performance advantages while following React's component design patterns, keeping the migrated application fully capable of component caching.

Related Links

• Docs:
  


• GitHub: https://github.com/vureact-js/core