关于 React 19 的四种组件通信方法

注意：使用的是UI库是 antd-mobile

1.父子级组件通信

• 父组件
• 单向数据流：数据从父组件流向子组件。
• 支持多种数据类型：字符串、数字、对象、数组、函数等。
• 只读性：子组件不能直接修改 props 中的数据。

import { useState } from 'react'
import YdNavbar1 from './components/Ydnavbar1'
function App() {
  const [right, setRight] = useState('操作')
  const handleDataFromChild = (data) => {
    setRight(data)
  }
  return (
    <>
      <YdNavbar1 rightMsg={right} onSendData={handleDataFromChild}></YdNavbar1>
    </>
  )
}

export default App

• 子组件
• 子组件通过props接收父组件传递的函数，然后调用该函数并传递参数给父组件
• 反向通信：通过回调函数实现子组件向父组件传递数据。
• 事件驱动：通常与 onClick、onChange 等事件结合使用。

import '../App.css'
import { Toast, Space, NavBar } from 'antd-mobile'

// 父传子：子组件通过props接收父组件传参(rightMsg)
const YdNavbar1 = ({ rightMsg, onSendData }) => {
  // 子传父：子组件通过props接收父组件传递的函数(onSendData)，然后调用该函数并传递参数给父组件
  const handleClick = () => {
    Toast.show({
      content: '提示',
      afterClose: () => {
        onSendData('儿子的问候')
      },
    })
  }
  return (
    <>
      <div className="App">
        <Space style={{ width: '100vw' }} direction="vertical">
          <NavBar right={rightMsg} onBack={handleClick}>
            导航栏
          </NavBar>
        </Space>
      </div>
    </>
  )
}

export default YdNavbar1

2.通过Ref调用子组件方法

• 父组件
• 使用 useRef（父组件调用子组件方法）
• 直接调用子组件方法：适用于需要父组件控制子组件行为的场景。

import { useState } from 'react'
import YdNavbar2 from './components/Ydnavbar2'
// 使用 useRef（父组件调用子组件方法）
import { useRef } from 'react'
function App() {
  const childRef = useRef(null)
  const callChildMethod = () => {
    childRef.current.sayHello()
  }
  return (
    <>
      <YdNavbar2 ref={childRef}></YdNavbar2>
    </>
  )
}

export default App

• 子组件
• 需显式暴露方法：子组件必须通过 useImperativeHandle 暴露方法。

import '../App.css'
import { Space, NavBar } from 'antd-mobile'
import { useImperativeHandle, forwardRef } from 'react'
// props 是必须的：当使用 forwardRef 时，组件的函数参数必须包含 props 和 ref，即使没有使用 props
// 通过 forwardRef 包裹组件
const YdNavbar2 = forwardRef((props, ref) => {
  // 使用 useImperativeHandle 暴露给父组件方法（sayHello）
  useImperativeHandle(ref, () => ({
    sayHello: () => {
      console.log('使用ref调用子组件方法')
    },
  }))
  return (
    <>
      <div className="App">
        <Space style={{ width: '100vw' }} direction="vertical">
          <NavBar>导航栏</NavBar>
        </Space>
      </div>
    </>
  )
})

export default YdNavbar2

3.使用 Context API（跨层级共享数据）

• 在src目录创建文件夹 contexts 创建 MyContext.js 文件，再创建 MyContextProvider.jsx 文件，如图

• MyContext.js

import { createContext } from 'react'

// 可以创建多个 Context 对象
const MyContext = createContext()

export default MyContext

• MyContextProvider.jsx

import { useState } from 'react'
import MyContext from './MyContext'

function MyProvider({ children }) {
  const [leftMsg, setLeftMsg] = useState('左边')
  return (
    <MyContext.Provider value={{ leftMsg, setLeftMsg }}>
      {children}
    </MyContext.Provider>
  )
}
export default MyProvider

• 组件1

import { useState } from 'react'
import YdNavbar3 from './components/Ydnavbar3'
// 使用 Context API（跨层级共享数据）
import MyProvider from './contexts/MyContextProvider'
function App() {
  return (
    <>
      <MyProvider>
        <YdNavbar3></YdNavbar3>
      </MyProvider>
    </>
  )
}

export default App

• 组件2

import '../App.css'
import { Toast, Space, NavBar } from 'antd-mobile'
// 使用 Context API（跨层级共享数据）
import { useContext } from 'react'
// 引用上下文对象
import MyContext from '../contexts/MyContext'

const YdNavbar1 = () => {
  const { leftMsg, setLeftMsg } = useContext(MyContext)
  return (
    <>
      <div className="App">
        <Space style={{ width: '100vw' }} direction="vertical">
          <NavBar left={leftMsg} onBack={() => setLeftMsg('哈哈哈')}>
            导航栏
          </NavBar>
        </Space>
      </div>
    </>
  )
}

export default YdNavbar1

4.使用 Zustand 状态管理

• 首先安装 Zustand

npm i zustand

• 在 src 下创建 stores 文件夹，创建文件 useStore.js 文件

// stores/userStore.js
import { create } from 'zustand'

const useUserStore = create((set) => ({
  user: null, // 初始状态
  setUser: (user) => set({ user }), // 修改用户的方法
}))

export default useUserStore

• 组件使用方法

import { useState } from 'react'
import { Button, Space } from 'antd-mobile'
// 使用 Zustand 状态管理
import useUserStore from './stores/userStore'
function App() {
  const { user, setUser } = useUserStore() // 获取状态和方法
  return (
    <>
      <div>{user}</div>
      <Button onClick={() => (user ? setUser(null) : setUser('132456'))}>
        改变用户
      </Button>
    </>
  )
}

export default App