在 React 中模拟 Vue 的 Keep-Alive 组件，实现页面切换状态缓存

2023-12-18 10:09:50

前言

在单页面应用（SPA）中，页面之间的切换是十分常见的。然而，在某些情况下，我们希望在页面切换后，某些组件的状态能够被保留，而不是重新渲染。例如，在电商网站的商品列表页，当用户点击进入某个商品详情页时，我们希望商品列表页的状态能够被保留，以便用户返回列表页时，列表页仍然保持在切换前的状态，而不是重新加载。

在 Vue.js 中，有一个非常实用的组件——Keep-Alive，它能够轻松地实现组件状态的缓存。Keep-Alive 组件通过包裹其他组件来实现状态缓存。当 Keep-Alive 组件被激活时，它会将包裹的组件的状态缓存起来。当 Keep-Alive 组件被销毁时，它会将缓存的组件状态恢复到包裹的组件中。

React 中实现 Keep-Alive 组件

在 React 中，没有内置的 Keep-Alive 组件。不过，我们可以通过编写自定义组件来实现类似的功能。以下是如何在 React 中实现 Keep-Alive 组件的步骤：

创建自定义组件

首先，我们需要创建一个自定义组件来实现 Keep-Alive 的功能。我们可以将这个组件命名为 KeepAlive。

import React, { useState, useEffect } from "react";

const KeepAlive = ({ children }) => {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);

    return () => {
      setIsMounted(false);
    };
  }, []);

  return isMounted ? children : null;
};

export default KeepAlive;

使用自定义组件

接下来，我们就可以在需要缓存状态的组件中使用 KeepAlive 组件。例如，在商品列表页组件中，我们可以这样使用 KeepAlive 组件：

import React from "react";
import KeepAlive from "./KeepAlive";

const ProductList = () => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetchProducts();
  }, []);

  const fetchProducts = async () => {
    const response = await fetch("http://localhost:3000/products");
    const data = await response.json();

    setProducts(data);
  };

  return (
    <KeepAlive>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </KeepAlive>
  );
};

export default ProductList;