react组件通信,主要分为以下几种情况
一、父子组件,父传子props,子传父callback
- 向下传递
父组件给子组件传值,通过
props
传递
父组件给孙子组件、曾孙等有直接或间接调用关系的组件传值,也可以通过
props
层层传递下去,但是这样层级太多以后会找不到props
的数据源。
- 向上传递
子组件向父组件传值,通过回调函数的方式,父组件先通过
props
传递给子组件一个函数,子组件调用这个函数,本质还是通过props
传递。
孙子、曾孙组件向上传递,同上层层调用。
二、没有嵌套关系的组件通信
- 找一个共同的父组件,作为中间组件来进行值传递
- Event发布-订阅模式
整个项目创建一个公共的Event对象,这个对象的属性以及方法可以被全局调用。
三、 redux、Mobx等全局状态管理库
四、 react16全新context API
通过context我们可以直接从祖先组件获取值,而不需要层层传递。
新的contextAPI与redux的用法类似。