父组件如何反应并保持组件实例及其状态

时间:2019-06-12 12:17:01

标签: reactjs

当我们在基于GridLayout的仪表板中实现移动操作时,我在React中面临问题。

在GridLayout列中,我们正在渲染复杂的组件(Complex DOM子树),并且我们没有机会更改其行为。当我们尝试实现移动操作并且将列从一行移到另一行时,react创建了移动组件的新实例,我们丢失了它们的状态,并且组件重新创建了自己,在我们的解决方案中,此操作非常昂贵,因为我们更改了组件的父级。当我们在同一行中执行此操作时,我们无需更改组件父级范围就可以了。

经过一番研究,我发现只有一种使用

的固溶体
  

ReactDOM.unstable_renderSubtreeIntoContainer

恐怕没有其他解决方案可以更改组件的父级并保留组件实例。

有关此问题的良好信息来源是 https://gist.github.com/chenglou/34b155691a6f58091953

RFC: https://github.com/reactjs/rfcs/pull/34

解决方案的实现来自Leonardo Garcia Crespo,在这里: https://leoasis.github.io/posts/2017/06/26/reparenting-a-component/

恐怕Leonardo的解决方案会使用不稳定的react函数。

我想知道是否还有另一种解决方案,如何更改组件父对象并保持组件实例及其状态。

非常感谢Ivan

0 个答案:

没有答案