【问题标题】:react-table v7 always remount?react-table v7 总是重新挂载?
【发布时间】:2021-04-30 16:20:50
【问题描述】:

我是第一次使用 react-table v7。我的行中包含有状态的组件 - 本质上是每行中的有状态键/值选择器(当然是在单元格内)。

我注意到,当表发生状态更改时,整个渲染树会卸载并重新安装 - 例如,如果我选择一行或以编程方式插入新行。这当然会导致我的有状态组件被重新安装和重新初始化。

我正试图解释为什么会发生这种情况。这不是非常可取或必要的,实际上为什么会发生。有人知道吗?

https://codesandbox.io/s/goofy-ives-4cq9s

【问题讨论】:

  • 您的行上是否设置了唯一键?如果键发生变化,那么 react 会将它们视为不同的组件并卸载/重新安装。为了具体帮助您,我们需要minimal, reproducible example
  • 嗨@ZacharyHaber 感谢您的回复。我相信这说明了这个问题。 codesandbox.io/s/goofy-ives-4cq9s我调试重新挂载的方法可能值得怀疑,但问题已经得到说明。

标签: reactjs react-table-v7


【解决方案1】:

恐怕你是对的,调试方法太可疑了,这实际上是问题的原因!

抛开所有的玩笑不谈,问题在于每次调用 App 函数体时都会重新创建 DebugUnmount 组件。

这意味着因为它是一个新的 DebugUnmount 函数,React 认为它是一个完全不同的组件,并且会卸载旧的并重新安装新的,因为根据 React 的差异引擎,它是一个全新的子树。

这是相同的代码框,但内部组件不再在每次渲染时重新创建:

https://codesandbox.io/s/intelligent-moon-ku89t?file=/src/App.js

【讨论】:

  • :explodinghead: 当然是。谢谢扎卡里。回到调试我可能确实存在的原始问题:)
猜你喜欢
  • 2020-09-29
  • 1970-01-01
  • 2020-02-26
  • 2021-09-03
  • 1970-01-01
  • 2022-07-27
  • 2019-04-10
  • 2021-06-10
  • 2020-05-02
相关资源
最近更新 更多