当前位置: 首页 > news >正文

React中组件通信有哪些方式

React中组件间的通信有一下几种情况:
        父组件向子组件通信,可以通过props方式传递数据;也可以通过ref防暑传递数据;
        子组件向父组件通信,通过回调函数方式传递数据;
        父组件向后代所有组件传递数据,如果组件层级过多,通过props的方式传递数据狠繁琐,可以通过Context.Provider的方式;
         一个数据源实现跨组件通信,通过指定contextType的方式来实现
        多个数据源实现跨组件通信,使用Context.Consumer方式实现;

1.父组件向子组件通信 :

父组件向子组件通信有两种方式,一是父组件通过熟悉进行传递,子组件通过props接受,二就是父组件通过ref获取到子组件的实例或者元素,调用子组件的方法进行数据传递

2. 子组件向父组件通信 :

子组件通过**回调函数**向父组件传递数据。子组件头盖骨this.props 接收父组件的方法后进行调用

3.跨组件通信Context:

react 中数据是通过 props 属性自上而下(由父及子)进行传递的,但这种做法对于多层级父子关系的组件传值是极其繁琐的。react 提供了context api 来实现在组件之间共享此类值的方式,而不必显式地通过组件树的逐层传递 props。React 16.3之后的contextapi 较之前的好用。 

3.1 父组件向后代组件通信
     1.使用 createContext() 创建一个context 对象(内容为需要传递的数据),参数为默认值;
     2.在父组件外层使用 <.Provider> 将当前 context 的值传递给内部所有的组件树。
      3.当使用了 <.Provider> 后,不再读取上面的默认值,需要设置 value 属性来进行数据传递。当组件需要读取数据时,
     4.指定 contextType 读取当前的 context 对象(即刚开始创建的 context);

3.2 多个数据源实现跨组件通信
       1.使用 import `导入要读取的数据文件`。
       2. 使用<.Consumer> ,它里面的语法是`函数组件的语法`,函数接收的 `参数` 为当前 createContext() 里的默认值。
      3.  <.Consumer> 可以嵌套使用,也可以平级使用。

3.3 Context 的使用场景
     1. Context 主要应用场景在于**很多不同层级的组件需要访问同样一些的数据**。请谨慎使用,因为这会使得组件的复用性变差。**如果用组件组合可以解决的问题,就不要使用 Context** 。
      2.使用 context 的通用的场景包括管理当前的 locale,theme,或者一些缓存数据。

3.4 Context 总结
   1. `React.createContext(defaultValue)` 创建一个 Context 对象。
    2.  `Class.contextType`,挂载在 class 上的 contextType 属性会被赋值为一个 Context 对象。这能让你使用 `this.context` 来消费最近的 Context 上的数据。你可以在任何生命周期中访问到它,包括 render 函数中。
     3.`Context.Provider`,接收一个 value 属性,传递给消费组件。一个 Provider 可以和多个消费组件有对应关系。多个 Provider 也可以嵌套使用,里层的会覆盖外层的数据。
     4. Context.Consumer,是函数作为子元素(function as a child)这种做法。这个函数参数接收当前的 context 值,返回一个 React 节点。传递给函数的 value 等同于往上组件树离这个 context 最近的 Provider 提供的 value 值。如果没有对应的 Provider,value 参数等同于传递给 createContext() 的 defaultValue。
    5. `Context.displayName`,浏览器中调试用。
    6. **Consumer 一般情况下都是和 Provider 同时使用。**
        6.1 当 Provider 的 value 值发生变化时,它内部的所有消费组件都会重新渲染。Provider 及其内部 consumer 组件都不受制于 shouldComponentUpdate 函数,因此当 consumer 组件在其祖先组件退出更新的情况下也能更新。

Redux:

上面有提到使用 Context 做组件间的通讯会使得组件的复用性变差,如果项目比较复杂、模块比较很多的情况,推荐使用 Redux 来做组件间的通信。
       1.react-redux 提供两个核心的api:
        2. Provider: 提供store,根据单一store原则 ,一般只会出现在整个应用程序的最顶层。
        3.connect: 用于连接展示组件和 redux store。
        4. connect 的语法格式为:

connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)(component)

               4.1 一般来说只会用到前面两个,它的作用是:
                4.2 把store.getState()的状态转化为展示组件props上的属性
                4.3 把actionCreators转化为展示组件props上的方法
    只要上层中有`Provider`组件并且提供了`store`, 那么,子孙级别的任何组件,要想使用`store`里的状态,都可以通过`connect`方法进行连接。如果只是想连接`actionCreators`,可以第一个参数传递为`null`。

相关文章:

  • Redux简单使用
  • 【PyTorch深度学习项目实战100例】—— 基于Conv3D实现三维立体MNIST数据集分类 | 第54例
  • 当心!你的App 可能是山寨的
  • 前端面试问题(5)
  • 十年网安行业代表性案例出炉,中睿天下Web攻击溯源案例实力入选
  • ARMv8/ARMv8的TLB深度学习
  • 【建议背诵】2022下半年软考「集成」100题(8)
  • 昇腾AI室外移动机器人学习指南(1 前言)
  • 【100个 Unity实用技能】| Unity中 检查当前设备网络状态 的几种方法整理
  • Db2数据库计算年龄
  • C++继承时常见问题
  • 【带你了解C语言预处理指令】
  • SLAM本质剖析-Boost之Geometry函数大全(一)
  • 4、MySQL数据管理
  • 谈谈测试员的地位:此刻,我想为所有从事测试职业的人发声…
  • DBCO-PEG12-Maleimide,DBCO-PEG12-Mal具有DBCO和Maleimide巯基反应试剂
  • 在Spring Boot项目中使用统一返回结果
  • 249 - 数据流
  • 程序员日均写7行代码被开除,这个行业真的还是普通人的最优选吗
  • NVIDIA VPI架构解析