react组件通信的方式

父子组件通信

父子通信
父组件向子组件传值，通过 props的方式，在子组件身上绑定一个自定义属性将值传递给子组件
子组件向父组件传值，也是通过 props的方式，在子组件身上绑定一个自定义属性并将可以修改父组件状态的函数传递给子组件，
然后子组件通过调用这个函数就可以将值传递给父组件

父组件 
import { useState } from 'react'
import Son from './son'
const Father2 = () => {
  const [count, setCount] = useState(0)
  return (
    <>
      <div>Father组件</div>
      <div>count: {count}</div>
      <Son count={count} setCount={setCount} />
    </>
  )
}
export default Father2

子组件
const Son = ({ count, setCount }: { count: number; setCount: (count: number | ((arg: number) => number)) => void }) => {
  return (
    <>
      <div>Son组件</div>
      <div>从父组件拿来的count值: {count}</div>
      <button onClick={() => setCount(count + 100)}>count + 100</button>
    </>
  )
}
export default Son

兄弟组件或非嵌套组件通信

可以使用发布订阅的方法（使用第三方插件 pubsub），在其中一个兄弟组件发布一个自定义事件并携带值，在另一个兄弟组件中订阅这个事件并通过回调函数拿到传过来的值

Brother1组件
import PubSub from 'pubsub-js'
import { useEffect, useState } from 'react'
const Brother1 = () => {
  const [count, setCount] = useState(0)
  useEffect(() => {
  // 订阅 value 事件
    PubSub.subscribe('value', (msg: string, value: number) => {
      setCount(value)
    })
  }, [])
  return (
    <>
      <div>brother1</div>
      <div>接收到brother2组件传来的值:{count} </div>
    </>
  )
}
export default Brother1

Brother2组件
import PubSub from 'pubsub-js'
const Brother2 = () => {
  const handleClick = () => {
  // 发布 value 事件
    PubSub.publish('value', 100)
  }
  return (
    <>
      <div>brother2</div>
      <button onClick={handleClick}>传100给brother1组件</button>
    </>
  )
}
export default Brother2

跨级组件(祖孙)通信

使用 useContext hook

Father3组件
import Son1 from './son1'
import { createContext, useState } from 'react'
export const CountContext = createContext(0)
const Father3 = () => {
  const [count, setCount] = useState(100)
  return (
    <>
      <div>Father3</div>
      <CountContext.Provider value={count}>
        <Son1 />
      </CountContext.Provider>
    </>
  )
}
export default Father3

Son1组件
import Son2 from './son2'
const Son1 = () => {
  return (
    <>
      <div>Son1</div>
      <Son2 />
    </>
  )
}
export default Son1

Son2组件
import { useContext } from 'react'
import { CountContext } from './index'
const Son2 = () => {
  const count = useContext(CountContext)
  return <div>Son2组件拿到Father3的count: {count}</div>
}
export default Son2

所有组件共享

全局状态管理工具：借助redux和mobx进行通信，这种工具会维护一个全局状态，并集中管理这个状态