Re-implement react-keep-alive

[ShenChang618]

At present, there are some problems in implementation. The biggest problem is that context can not be easily accessed.

Therefore, I hope to solve this problem through refactoring, I do not know what better ideas you have?

[2788]

看了在线例子, 好像是在一个专门的地方渲染组件, 然后通过createPortal转移到真实dom上面?
不知道我理解有没有错误,反正能看出来跟逻辑上的组件树会有出入,在keepAlive父级添加click事件,在keepalive上面点击 父级不会响应

[guoyunhe]

我看很多人遇到了 state 不能和 在同一级用的问题：

export function App() {
  const [value, setValue] = useState('');
  return <KeepAlive>
    <input value={value} setValue={e => setValue(e.target.value)}
  </KeepAlive>
}

我想能不能不用组件的方式提供 keep alive 而是用 HOC，这样就不用担心有人在同一层用 state 和 keep alive 了：

function App() {
  const [value, setValue] = useState('');
  return <input value={value} setValue={e => setValue(e.target.value)}
}

export keepAlive(App);

[guoyunhe]

希望能够支持手动卸载，以免有些情况下内存消耗太大

[svtkhn]

Seems like React v18 is planning to finally officially support keep-alive feature. They call it <Offscreen>. Hopefully, it will be released soon enough so we don't have to hack around current React's limitations.

[shenjunru]

欢迎试用 react-fiber-keep-alive，一个基于 react fiber 的 keep-alive 实现

Give a try react-fiber-keep-alive, the react fiber based keep-alive implementation.