React 状态提升

在不使用任何状态管理方案的前提下,React 组件之间共享状态,只能靠 props 传播。

  • 父->子的传播非常容易,直接 A->B
  • 子->父 :调用父组件传递过来的方法去实现。传递的数据放在参数里面。
    (父组件将一个改变自身状态的方法传递给子组件,子组件去调用的同时将一些参数传给它)
  • 隔代传, A->B->C....Z
  • 兄弟之间,React传递数据的范式是自上而下传递,这显然违背了这一范式,所以为了处理兄弟组件简单通信,就有了状态提升这一概念。简单来说,React中的兄弟组件简单通信,就是所谓的状态提升。

状态提升的场景

兄弟组件中,它们各自的内容保存在各自的 state 当中,要怎么做才能使两个组件共享数据呢?
答案是 状态提升,也就是给他们创建一个共同的父亲,将数据保存在它们的父组件中,使这两个兄弟组件之间可以从父组件中到拿到共享的状态,状态彼此能够同步。

案例可以参考官方文档。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容