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