目录
常见的组件通讯的三种方式(父传子,子传父,兄弟)
一 .父传子
父组件通过自定义属性提供数据
子组件接受分为两种:
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。