React keepAlive实现原理揭秘，助你轻松应对列表跳转场景

2023-12-20 02:08:58

在现代网络应用中，我们经常会遇到列表跳转详情，再从详情跳转回列表的需求。在这个场景下，我们希望从详情页跳转回列表时，能够显示原来的位置，而不是回到列表的顶部。而这正是React keepAlive机制的用武之地。

揭秘React keepAlive的工作原理

React keepAlive的核心思想是利用组件生命周期函数来控制组件的卸载时机。当一个组件被卸载时，它的状态和DOM元素都会被销毁。而keepAlive机制的作用就是防止组件在切换路由时被卸载，从而保留其状态和DOM元素。

实现keepAlive的方法有很多种，最简单的一种方法是使用React.memo。React.memo是一个高阶组件，它可以将一个函数式组件包装成一个新的函数式组件，并对该组件进行缓存。这意味着，当该组件再次渲染时，React会从缓存中取出它的上次渲染结果，而不是重新渲染该组件。

import React, { ReactElement, useEffect, useRef } from 'react';

const KeepAlive = ({ children }: { children: ReactElement }) => {
  const ref = useRef<ReactElement | null>(null);

  useEffect(() => {
    ref.current = children;
  }, [children]);

  return ref.current;
};

export default KeepAlive;

另一个实现keepAlive的方法是使用useMemo。useMemo是一个钩子函数，它可以将一个函数的执行结果缓存起来。这意味着，当该函数再次执行时，React会从缓存中取出它的上次执行结果，而不是重新执行该函数。

import React, { ReactElement, useEffect, useMemo } from 'react';

const KeepAlive = ({ children }: { children: ReactElement }) => {
  const cachedChild = useMemo(() => children, [children]);

  return cachedChild;
};

export default KeepAlive;

最后，我们还可以通过useEffect来实现keepAlive。useEffect是一个钩子函数，它可以让你在组件的特定生命周期阶段执行某些操作。我们可以利用useEffect来在组件卸载时将其状态和DOM元素存储起来，并在组件再次渲染时将其恢复。

import React, { ReactElement, useEffect, useState } from 'react';

const KeepAlive = ({ children }: { children: ReactElement }) => {
  const [state, setState] = useState(null);

  useEffect(() => {
    return () => {
      setState(children);
    };
  }, [children]);

  return state || children;
};

export default KeepAlive;