React之组件间通信

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对象的组件中， 通过useContexthook获取上下文对象数据

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