React中父子组件通信方式
react官网链接 ： zh-hans.react.dev/ ；
方式一 ： props（父传子）
父组件通过 属性 = 值 的形式来传递给子组件数据
子组件通过 props 参数获取父组件传递过来的数据
父组件
子组件
对于传递给子组件的数据，有时候我们可能希望进行验证
项目中如果使用TypeScript，那么直接就可以进行类型验证；
但是，即使我们没有使用Flow或者TypeScript，也可以通过 prop-types 库来进行参数验证；
import PropTypes from "prop-types"
MainBanner.propTypes = {
banners: PropTypes.array,
title: PropTypes.string
}
当类型校验失败，控制台会有相应提示
方式二：子传父（传递回调函数）
某些情况，我们也需要子组件向父组件传递消息：
在vue中是通过自定义事件来完成的；
在React中同样是通过props传递消息，只是让父组件给子组件传递一个回调函数，在子组件中调用这个函数即可；
通过一个基本的计数器案例来了解子传父通信
需要实现的效果为，加减子组件分别控制父组件的数加减
具体实现如下
父组件：分别传递两个不同的函数给不同的子组件
子组件：接收父组件传递的函数，调用传参即可
方式三：非父子组件之间通信
1.Context
在开发中，比较常见的数据传递方式是通过props属性自上而下（由父到子）进行传递。但是对于有一些场景：比如一些数据需要在多个组件中进行共享（地区偏好、UI主题、用户登录状态、用户信息等）。如果我们在顶层的App中定义这些信息，之后一层层传递下去，那么对于一些中间层不需要数据的组件来说，是一种冗余的操作。React提供了一个API：Context；Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props；
(PS：随着技术的发展，Context的应用场景并不多，全局共享数据使用更多的是Redux)
下面介绍一下Context的具体使用步骤:
第一步：创建一个Context
React.createContext（） 创建一个需要共享的Context对象：如果一个组件订阅了Context，那么这个组件会从离自身最近的那个匹配的 Provider 中读取到当前的context值；
defaultValue是组件在顶层查找过程中没有找到对应的Provider，那么就使用默认值；
第二步：通过Context中的Provider里面的value属性为后代提供数据
Context.Provider： 每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化：Provider 接收一个 value 属性，传递给消费组件；
一个 Provider 可以和多个消费组件有对应关系；多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据；
当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染；
第三步操作: 设置组件的contextType为某一个Context
挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象：
这能让你使用 this.context 来消费最近 Context 上的那个值；你可以在任何生命周期中访问到它，包括 render 函数中；
第四步：获取数据，使用数据
对于函数式组件，使用Context共享的数据，使用Context.Consumer
针对于Context的defaultValue使用
当组件并没有provider包裹时
而组件内部又订阅了某一个Context，此时拿到的值为设置的默认值
2.EventBus
第一步：创建一个EventBus
第二步：在需要接收数据的组件监听事件（监听事件中可接受三个参数）
1.事件名
2.回调函数
3.this环境
第三步：在需要发送数据的组件中触发事件
第一个参数为触发的事件名，后面可拼接事件触发传递的参数
