React 组件之间有哪些通信方式？

// 父 → 子
function Parent() {
  return <Child name="Tom" />
}
function Child({ name }) {
  return <div>{name}</div>
}

// 子 → 父（回调函数）
function Parent() {
  const [msg, setMsg] = useState('')
  return <Child onSend={setMsg} />
}
function Child({ onSend }) {
  return <button onClick={() => onSend('hello')}>Send</button>
}

const ThemeContext = createContext('light')

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Deeply />
    </ThemeContext.Provider>
  )
}

function Deeply() {
  const theme = useContext(ThemeContext)
  return <div>{theme}</div>
}

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus(),
    clear: () => setInput('')
  }))
  return <input ref={inputRef} />
})

function Parent() {
  const childRef = useRef()
  return <>
    <Child ref={childRef} />
    <button onClick={() => childRef.current.focus()}>Focus</button>
  </>
}

function Parent() {
  const [value, setValue] = useState('')
  return (
    <>
      <A value={value} />
      <B onChange={setValue} />
    </>
  )
}

// mitt 库
import mitt from 'mitt'
const emitter = mitt()

// 组件 A
emitter.emit('event', data)

// 组件 B
emitter.on('event', (data) => { ... })

// Zustand
const useStore = create((set) => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 }))
}))

// 任何组件
const count = useStore(state => state.count)