列更改 remounted/rerendered 的 React 组件具有动态生成的列

React component that change of column are remounted/rerendered with dynamically generated columns

这里有我目前对 codesandbox 的痴迷。我根据屏幕宽度动态生成列以分配一组组件。有效，但是当我调整屏幕大小时更改列数时，组件会正确重新排序，但所有更改列的组件都会重新呈现。

调整屏幕大小您会在控制台日志中看到重新安装了更改列的组件（有意义）。我想知道是否有办法避免这种情况（目前，恐怕没有这种方法）。

在对 useRef、useMemo 等进行了多次不同的尝试后（其中一些可能很疯狂，但我不得不尝试），到目前为止我的结论是，使用这种方法，必须从一列中删除组件并添加对另一个，无论如何都会重新渲染。

有什么想法吗？

好吧，最终 Portal 和 refs 的组合来拯救并成功了。

最后，这是一个重新设置问题，我做了一些研究发现了这个 facebook 问题...

... 其中 vkatushenok 为这个问题提供了一个很好的解决方案。接受这个想法并稍微调整一下，让我找到解决它的方法。

以防万一您遇到这种情况或类似情况，这里有我的解决方法...