4.组件通讯

默认情况下组件只能使用自己的状态，但当组件拆分的比较小的时候，就不可避免的使用到其他组件的状态，比如之前做的例子，当我们的发表评论区域与显示评论区域拆分为两个组件时，这两个组件之间一定要进行通讯以达成某些功能

目录

1  props

1.1  函数组件

1.2  类组件

1.3  传递非字符串数据

1.4  构造函数中要传入props才能在构造函数中使用props

1.5  children属性

1.6  props校验

1.6.1  安装 prop-types

1.6.2  使用 prop-types

1.7  props默认值

2  通讯情况

2.1  父组件传递数据给子组件

2.2  子组件传递数据给父组件

2.3  兄弟组件相互通讯

3  多级传递

3.1  props多级传递的问题

3.2  Context

3.2.1  创建提供者与消费者

3.2.2  提供数据

3.2.3  使用数据

---

 

1  props

props是properties的缩写，接收外部数据的，函数组件与类组件使用props的方式略有不同

props是只读属性，只能获取，无法修改

props只能进行父子传递，无法进行爷孙传递

1.1  函数组件

函数组件需要把props作为参数传递进去，props是形参，我们

1.2  类组件

类组件用this调用

1.3  传递非字符串数据

可以通过props给组件传递任意类型的数据，如果直接给是会报错的

给引号传进去的都是字符串类型，通过行内给属性的时候需要给一个大括号

这样就会得到非字符串类型的数据

在大括中也可以给其他类型的数据

变量可以获取，函数可以使用，JSX可以渲染

1.4  构造函数中要传入props才能在构造函数中使用props

直接拿拿不到

• 如果不拿就不会报错，不会报错可以渲染出来下面的render()

传入props后就可以拿到了，获取的时候用不用this都能获取到

1.5  children属性

当一个组件标签中有子节点的时候，props会自动多一个children属性，如果没有子节点就没有children这个属性

当组件标签有子节点的时候，有children这个属性了，但子节点默认不会渲染到页面上

可以在返回值中加入children进行渲染

children内的值可以是任何类型的值，比如文本、React元素、组件、函数、JSX这些都可以。 在这里有讲children的其他类型值的用法，都是大同小异，有需要可以简单看一下 54-props深入（1children属性）_哔哩哔哩_bilibili

1.6  props校验

如果传入的参数与组件要求的参数类型不同就会报错，且如果不了解组件就不知道问题出在哪，所以在接收数据的时候最好对props进行类型校验

我们举个例子，下面的colors需要一个数组，但我传入了一个字符

这样就会在组件内部报错，组件内部报这种错误，如果组件不是自己写的，是很难解决的

1.6.1  安装 prop-types

你可以用 原生JS中的typeof进行校验，也可以用第三方的包 prop-types 进行校验

下载之后引用一下

1.6.2  使用 prop-types

.proTypes是固定的，prop_types是导入的库

这样就可以看到明确的提示了，提示的意思是 给的是 string，期望得到 array

把传入的参数搞成数组就可以正常使用了

常见的校验类型还有 array,bool,func,number.object,string,element(React元素)

上面说的都是比较常用的校验规则，如果要看所有的校验规则可以看一下文档 Typechecking With PropTypes – React

1.7  props默认值

我们可以给用组件的人提供默认值，这样用的时候就不用刻意输入值了(如果手动给会覆盖掉默认值)

2  通讯情况

有三种

• 父组件 -> 子组件
• 子组件 -> 父组件
• 兄弟组件之前通讯

2.1  父组件传递数据给子组件

• 渲染的时候是要渲染父组件的，渲染父组件才能让父子组件都出现在页面上
• 给类名是方便看组件的父子关系，在例子中没有任何功能

2.2  子组件传递数据给父组件

1. 在父组件中创建一个函数A，这个函数A是处理子组件传递过来的信息的，例子中将信息存在了state，存在state后就可以在父组件的任意地方调用了
2. 之后把函数A作为属性给子元素
3. 在子元素中定义要传递的信息
4. 将信息作为参数给函数A
5. 调用函数A，我当前是用点击事件触发

打开后是这样的

点击一下按钮

2.3  兄弟组件相互通讯

兄弟组件相互通讯需要将两个组件都放在一个父组件中，然后将两个兄弟组件的状态提升到最近的公共父组件中，由公共父组件管理状态以及提供操作共享状态的方法

兄弟组件将状态交给父组件管理叫状态提升

兄弟组件的通讯相当于先 由子到父 再 由父到子

我们做个计数器的例子

点击后可以正常+1

上面的count是 Show 组件，下面的按钮是Btn组件，信号传递的过程是 Btn -> 公共父对象 -> Show

Btn组件只进行调用父组件的方式，不对数据进行直接处理

3  多级传递

3.1  props多级传递的问题

props只能在父子间传递，无法在爷孙间进行传递

如果要爷孙间进行通讯使用props只能再给一次

当层级多的时候，这个搞就会很繁琐，我们使用Context可以让传递不这样繁琐

3.2  Context

3.2.1  创建提供者与消费者

首先通过createContext()方法创建 提供者(Provider) 与 消费者(Consumer) ，提供者与消费者的本质是组件，名称可以自定义

3.2.2  提供数据

一般来讲我们会用Provider包裹最高级别的控件的全部内容，然后给Provider一个value，value属性的名称是固定的，一般会给一个对象，也可以给字符串，整型这些其他数据类型的变量

3.2.3  使用数据

这个你就这么用就行了，用大括号调用

使用的时候Consumer不一定在最上层，可以让Consumer外面多一些标签