React之组件间通信
组件通信: 简单讲就是组件之间的传值,包括state、函数等
1、父子组件通信
父组件给子组件传值
核心:1、自定义属性;2、props
- 父组件中: 自定义属性传值
import Header from '@/components/Header'const Home = () => {const test = '父组件的值'return (<><div>测试</div>{/* 在子组件的调用标签上,添加自定义属性,属性值就是传递给子组件的数据 */}<Header test={test} /></>)
}
export default Home
- 子组件中:props接收
const Header = (props: { test: string }) => {// 子组件中props封装着 自定义属性对象console.log(props)return (<><div>header</div></>)
}
export default Header
2、子父组件通信
子组件给父组件传值
核心:1、父组件传递子组件自定义方法;2、子组件调用父组件的自定义方法,并传自己子组件的数据
- 在父组件中: 传递函数
import Header from '@/components/Header'const Home = () => {const test = (str: string) => {console.log(str)}return (<><div>测试</div>{/* 向子组件传递自定义函数 */}<Header test={test} /></>)
}
export default Home
- 在子组件中: 接收父组件的函数,通过向父组件函数传参的方法方式,将数据传递给父组件
interface IProps {test: ReturnType<typeof Function> // test: Function
}
const Header = (props: IProps) => {// 子组件中props封装着 自定义属性对象const str = '子组件的值'props.test(str)return (<><div>header</div></>)
}export default Header
3、非父子组件传值
兄弟组件或者其他非父子组件的传值。在Vue中使用的是自定义事件
definEmits()
。但是React没有内置的自定义事件方法。需要借助第三方自定义事件,例如events
、eventemitter3
、eventemitter2
包
- 安装第三方包
$ yarn add events
ts 还需要安装
$ yarn add @types/events -D
- 封装自定义事件工具
// EventEmitter :它的实例可以通过require('events')来创建。
import EventEmitter from 'events'const emits = new EventEmitter()
export default emits
- 在传值的组件中,注册自定义事件
import emits from '@/utils/events'
import { useEffect } from 'react'
const Header = () => {// 注册自定义事件test// 注册自定义事件需要在useEffect中完成useEffect(() => {// 参数1: 自定义事件名// 参数2: 通信传递的值emits.emit('test', 'header 组件的值')}, [])return (<><div>header</div></>)
}export default Header
- 在接收值的组件中,监听自定义事件
import emits from '@/utils/events'
const Footer = () => {emits.on('test', (str: string) => {console.log(str)})return (<><div>footer</div></>)
}
export default Footer
4、其他非父子组件之间的通信补充
4.1、全局状态管理:Redux全家桶
redux数据持久化
redux异步操作
4.2、React内置的上下文对象:context
- 通过createContext ,创建要传递的数据对象
import { createContext } from 'react'const appContext = createContext({// 传递的数据test: 'context传的值---测试'
})
export default appContext
- 在使用创建的context对象的组件中, 通过
useContext
hook获取上下文对象数据
import appContext from '@/utils/appContext'
import { useContext } from 'react'const Header = () => {// useContext接收自定义的上下文对象参数const context = useContext(appContext)return (<><div>header</div><p>{context.test}</p></>)
}
export default Header