【react】react18的学习（四）--复合组件通信

1、父子通信：props、ref

父传子：props

• 传给子组件状态数据；
• 特殊地，props.children：将元素内容传给子组件；所以不要手动给子组件设置属性，会被标签内容覆盖；
• 通过给子组件ref，获取子组件数据；

子传父

• 调用父组件传来的方法，修改父组件的状态或传值；

2、祖先通信：上下文对象，跟props属性无关

包括父子、及更深层嵌套，就是借助一个共同组件上下文
借助上下文对象：类似vue事件总线this.$bus与provider+inject的结合，定义上下文对象，在祖先组件使用并传值，子孙组件使用；

1、创建指定上下文对象

// voteContext.js
import React from 'react'
const VoteContext = React.createContext()
export default VoteContext

2、类组件使用：祖先组件提供方式1种；子孙组件使用方式2种

• 祖先组件中导入：1种

// 祖先组件中导入
import VoteContext from '@/contexts/voteContext'
// 祖先组件使用并提供公共数据
<VoteContext.Providervalue={{supNum,oppNum,toSup: this.toSup,toOpp: this.toOpp,}}
><div><div>总人数：{sum}</div><Main></Main><Footer></Footer></div>
</VoteContext.Provider>

• 后代组件使用：2种

// 后代组件使用
import VoteContext from '@/contexts/voteContext'
// 使用方式1：绑定到静态属性，类似属性校验
static contextType = VoteContext
let { supNum, oppNum } = this.context
// 使用方式2：标签方式
<VoteContext.Consumer>{context => {let { } = contextreturn ()}}
</VoteContext.Consumer>

3、hooks组件使用
与类组件一样，区别就是使用hooks函数组件语法；且后代组件也有两种方式：标签、useContext；

• 祖先组件中导入：1种

// 祖先组件中导入
import VoteContext from '@/contexts/voteContext'
// 祖先组件使用并提供公共数据
<VoteContext.Providervalue={{supNum,oppNum,change,}}
><div><div>总数：{sum}</div><Main></Main><Footer></Footer></div>
</VoteContext.Provider>

• 后代组件使用：2种

// 后代组件使用
import VoteContext from '@/contexts/voteContext'
// 使用方式1：hooks函数
import React, { useContext } from 'react'
const { change } = useContext(VoteContext)
// 使用方式2：标签方式
<VoteContext.Consumer>{context => {let { } = contextreturn ()}}
</VoteContext.Consumer>

3、任意组件通信：状态管理

一般使用props、状态管理，比较常用，上下文比较难维护；
状态管理库：redux、react-redux、mobx等