keepAlive包裹B页面，A页面已加载，A->B->A->B，B页面状态正常；C页面未加载过，A->B->C->B，B页面确实已缓存，state什么都都正常，但是B页面的最外层元素 style="display:none", 经过反复测试，确认是个Bug.

[MatrixAge]

[MatrixAge]

[MatrixAge]

通过这种方式或者ahooks的useInViewport来人为修复这个问题也不失为一个解决

[MatrixAge]

主要是考虑到这个库的实现更接近于可能的官方实现，而不是像react- activation那种重度hack，有一点小瑕疵，只要能通过其他方式来弥补，也没啥问题。

实现思路还是很值得学习的，加油.

[shenjunru]

display: none 应该是你某个组件，mount后加上的，unmount的时候没有还原，可以排查一下

[shenjunru]

也可能是第三方的UI库造成的副作用

[shenjunru]

本库的实现原理，只操作了 react fiber 和 dom 的装/卸载。并未涉及到样式操作

[MatrixAge]

上述问题是在umi4 react18 react-router6下表现的，今天在umi3上测试了一下（umi3用的是react17.x react-router5），切换页面虽然没有display: none，但有别的问题：

在进行路由切换的时候，会导致这个组件已卸载但还是执行setV导致的报错，当页面且回来之后，fiber节点可能还记录了卸载之后的setV操作（在已经切换之后记录的），这就导致还原的fiber节点和实际fiber不一致，导致setV反复执行，5，6，5，6这种结果.

这种边缘情况，以上，虽然在umi3中，针对这种情况也可以用ref或者变量截断的方式来避免出现。

用来复现的代码

import { useEffect, useState } from 'react'
import { keepAlive } from 'react-fiber-keep-alive'

const Index = () => {
  const [v, setV] = useState(0);

  console.log(v);

  useEffect(() => {
    const timer = setInterval(() => setV(v + 1), 1000);

    return () => {
          clearInterval(timer);
          
          console.log('out');
          
    };
  }, [v]);

  return <div>{v}</div>;
};

export default keepAlive(Index, () => 'A');

[MatrixAge]

观察了一下，发现在umi3中出现上述问题的原因可能是useEffect在组件卸载时，KeepAlive拿这个组件的fiber信息存入内存，然后卸载，但是fiber信息在存入内存之后还执行了一次timer，但是这个时候组件其实unmoumted了，就会报这个错。

不理解的是（相关逻辑细节），为什么还原的时候会出现反复setV。

[MatrixAge]

发现了华点，来回切换路由之后，竟然出现了切到别的页面，定时器未卸载，还一直在执行的情况：

import { useEffect, useState } from 'react'
import { keepAlive } from 'react-fiber-keep-alive'

const Index = () => {
  const [v, setV] = useState(0);

  console.log(v);

  useEffect(() => {
    let is_mounted = true;

    const timer = setInterval(() => {
      if (is_mounted) {
        console.log('setV');

        setV(v + 1);
      }
    }, 1000);

    return () => {
      is_mounted = false;

      clearInterval(timer);
    };
  }, [v]);

  return <div>{v}</div>;
};

export default keepAlive(Index, () => 'A');

[MatrixAge]

经过测试，上面这个问题不会在umi4 react18.1 react-router6项目中出现 (出现的是那个display: none) 的问题。

[shenjunru]

我用单纯的 react 17.0.2 / 18.1.0 + react-router 5.2.0 + react-fiber-keep-alive 0.7.1 和你的代码
并未复现你的问题，能否放一个 demo 到 https://codesandbox.io/
我没用过 umi，不清楚是不是 umi 带来的副作用

[shenjunru]

umi 4 因该是使用了 React-18 的 <Offscreen> 组件
会执行 hideInstance() 操作加上 display: none
https://github.com/facebook/react/blob/v18.2.0/packages/react-dom/src/client/ReactDOMHostConfig.js#L636

[shenjunru]

抱歉，在 react 17.0.2 上复现了

[MatrixAge]

codesanbox真鸡儿难用，搞了半天写一点代码编译半天，换github demo了：

https://github.com/MatrixAge/codesandbox

总体上umi4用keepAlive是能用的，解决那个display: none就行了，umi3上是完全不可用的。

[MatrixAge]

umi 4 因该是使用了 React-18 的 <Offscreen> 组件 会执行 hideInstance() 操作加上 display: none https://github.com/facebook/react/blob/v18.2.0/packages/react-dom/src/client/ReactDOMHostConfig.js#L636

与umi4 和 react-router都没关系，是react18自己执行的hideInstance( instance ):