React 组件通信

目录

常见的组件通讯的三种方式（父传子，子传父，兄弟）

一 .父传子

 二. 子传父

三 . 兄弟之间的通信

 四 . 跨层级通信

五 . 注意事项：

---

常见的组件通讯的三种方式（父传子，子传父，兄弟）

一 .父传子

父组件通过自定义属性提供数据

子组件接受分为两种：

1.类组件接受的通过this.props

2.函数式组件  第一个形参，一般写成props

 二. 子传父

使用子传父的三部曲

1.父组件里面定义提供修改数据的方法

2.子组件调用这个方法同时并传递数据（实参）

3.父组件的方法里面拿到这个数据做相应的操作

三 . 兄弟之间的通信

兄弟之间的通信的五部曲

列如A，B 两个兄弟组件之间的通信

1.把B组件的数据提供到父组件

2.父组件提供数据和方法

3.然后父组件把数据给B组件

4.父组件再把操作数据的方法给A组件

5.A组件调用方法的同时并传递数据给父组件，然后父组件拿到数据做相应的操作，数据变了

B组件就改变了

重点就是：父组件提供操作数据和操作数据的方法

 四 . 跨层级通信

跨层级通信三部曲

1.祖先组件通过React.crateContext()，创建 Context 并导出

2.祖先组件通过<Context.Provider> ， 配合 value 属性提供数据。

3.后代组件通过 <Context.Consumer> ， 配合函数获取数据。

五 . 注意事项：

1.单项数据流包括

   a.父组件修改的数据会影响使用此数据的子组件

    b.子组件不能直接修改父组件数据

2.可以传递任意类型

    a.传递数字

    b.传递字符串

3.使用类组件时，如果写了构造函数，应该在 constructor 中接收 props，并将 props 传递给 super，否则无法在构造函数中使用 this.props。