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

VuReact is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax. In this article, we dive straight into the core: how Vue's built-in <KeepAlive> component is compiled into React code by VuReact.

Before We Start

To keep the examples easy to read, this article follows two simple conventions:

All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted.
The discussion assumes you are already familiar with Vue 3's <KeepAlive> component usage.

Compilation Mapping

KeepAlive: Component caching

<KeepAlive> is Vue's built-in component for caching component instances. It preserves component state during dynamic component switching, avoiding re-rendering and data loss.

Basic KeepAlive usage

<template>
  <KeepAlive>
    <component :is="currentView" />
  </KeepAlive>
</template>

Compiled React

import { KeepAlive } from '@vureact/runtime-core';

<KeepAlive>
  <Component is={currentView} />
</KeepAlive>

As the example shows, Vue's <KeepAlive> component is compiled into the KeepAlive adapter component provided by VuReact Runtime — think of it as "Vue's KeepAlive for React".

The key characteristics of this compilation approach are:

Semantic consistency: Fully simulates Vue <KeepAlive> behavior by implementing component instance caching
State preservation: Caches removed component instances, preventing state loss
Performance optimization: Reduces unnecessary component re-rendering
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.

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

Compiled React

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

The importance of key:

Cache identifier: key is used to identify and match cached instances
Stable switching: Ensures correct cache hits when switching components
Performance optimization: Avoids unnecessary cache creation and destruction
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

<template>
  <KeepAlive :include="['ComponentA', 'ComponentB']">
    <component :is="currentView" />
  </KeepAlive>
</template>

Compiled React

<KeepAlive include={['ComponentA', 'ComponentB']}>
  <Component is={currentView} />
</KeepAlive>

exclude: Exclude specific components

<template>
  <KeepAlive :exclude="['GuestPanel', /^Temp/]">
    <component :is="currentView" />
  </KeepAlive>
</template>

Compiled React

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

Matching rules:

String matching: Exact match on component name
Regular expression: Matches component names matching the pattern
Array combination: Supports arrays of strings and regular expressions
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.

<template>
  <KeepAlive :max="3">
    <component :is="currentTab" />
  </KeepAlive>
</template>

Compiled React

<KeepAlive max={3}>
  <Component is={currentTab} />
</KeepAlive>

Cache eviction strategy:

LRU algorithm: Evicts the least recently accessed cached instance
Memory management: Automatically clears cache exceeding the limit
Performance balance: Strikes a balance between memory usage and performance
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

<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:

useActived: Triggered when the component is restored from cache and displayed
useDeactivated: Triggered when the component is cached
Initial render: Activated is also triggered on the component's initial render
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:

Direct component mapping: Maps Vue <KeepAlive> directly to VuReact's <KeepAlive>
Full attribute support: Supports all attributes including include, exclude, max, etc.
Lifecycle adaptation: Converts Vue lifecycle hooks into React Hooks
Cached semantics preserved: Fully preserves Vue's caching behavior and semantics

How KeepAlive works:

Instance caching: Preserves the instance in memory when a component is switched out
State preservation: Keeps all of the component's state and data
DOM retention: Retains the component's DOM structure
Smart restoration: Quickly restores the previous instance when switching back

Performance optimization strategy:

On-demand caching: Only caches components that truly need it
Memory management: Intelligently manages cache memory usage
Fast restoration: Optimizes cache restoration performance
Garbage collection: Timely cleanup of cache that is no longer needed

Important notes:

Single child node: <KeepAlive> can only have one direct child node
Component type: Can only cache component elements, not regular elements
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.

推荐订阅源

DEV Community