React 受控组件状态同步的方案

最新推荐文章于 2024-09-09 11:14:00 发布

DayHeart

最新推荐文章于 2024-09-09 11:14:00 发布

阅读量259

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/DayHeart/article/details/130814231

版权

文章探讨了在开发中处理非受控组件状态同步的三种方法：1)状态提升，通过父组件管理状态并用props传递；2)发布订阅模式，用于跨层级通信；3)使用localStorage或IndexedDB存储状态。每种方法有其优缺点，适用于不同场景，例如层级简单的组件适合状态提升，而需要跨层级或非实时同步时可考虑其他方案。

摘要由CSDN通过智能技术生成

开发时经常会出现同一个非受控组件多次使用的情况，在需求中，如果要实现两个同样的开关组件的状态同步，有以下几种思路

1.状态提升思路，共同父元素进行状态管理，props传参解决，注意要同时传递state（值）和setState（改变值的箭头函数）

2.发布订阅思路，最大父元素进行发布，子组件订阅

3.localStorage或IndexedDB进行状态管理，过段时间就读取一次。

	父元素管理，props传参	发布订阅	固定时长读取内存
优点	结构清晰，条理清楚父元素参数变化，自动刷新视图	跨层级传参	借助存储库进行状态管理
缺点	需要逐级传递props	可能会导致订阅树冗杂	性能开销大，更新不实时
使用场景	层级扁平的组件	层级复杂的组件	不需要完全实时状态同步的多个组件