React组件通信全解：父子、子父、兄弟及跨组件通信

在React开发中，组件通信是一个核心且常见的话题。无论是简单的父子组件数据传递，还是复杂的跨层级通信，掌握合适的通信方式能显著提高开发效率和代码可维护性。今天我将系统讲解React中的各种组件通信方式，并附上实用的代码示例。

一、父子组件通信

父子组件通信是最基础也是最常用的通信方式，主要使用props来实现数据从父组件到子组件的单向传递。

实现方式

父组件直接在子组件的标签上绑定属性值
子组件通过参数props接收数据（props接收的数据是只读的）

代码示例

javascript 复制代码

//父组件
import Child from "./child"
export default function Parent() {
    const state={
        name:'汉堡'
    }
  return (
    <div>
        <h2>父组件</h2>
        <Child msg={state.name}/>
    </div>
  )
}
//子组件
export default function child(props) {
  return (
    <h3>子组件--{props.msg}</h3>
  )
}

注意事项

Props是只读的，子组件不能直接修改接收到的props

二、子父组件通信

当子组件需要向父组件传递数据时，可以通过回调函数的方式实现。

实现原理

父组件传递一个函数给子组件
子组件调用该函数并传递数据作为参数
父组件在函数中接收数据并更新状态

代码示例

javascript 复制代码

//父组件
import Child from "./Child"
import {useState} from 'react'
export default function Parent() {
    let [count,setCount]=useState(1)
    const getNum=(n)=>{
        setCount(n)
    }
  return (
    <div>
        <h2>父组件二 -- {count} </h2>
        <Child getNum={getNum}></Child>
    </div>
  )
}
//子组件
export default function Child(props) {
    const state={
        num:100
    }
    function send(){
        props.getNum(state.num)
    }
  return (
    <div>
        <h3>子组件二</h3>
        <button onClick={send}>发送</button>
    </div>
  )
}

核心要点

react里面的useState方法里面的setCount（会存储count值保证再次渲染页面获得的不是初始值）可以重新渲染页面拿到值

三、兄弟组件通信

兄弟组件之间没有直接的通信渠道，需要通过共同的父组件作为"桥梁"。

实现原理

子组件1通过回调函数将数据传递给父组件
父组件接收并保存数据
父组件将数据通过props传递给子组件2

代码示例

javascript 复制代码

//child1
export default function Child1(props) {
    const state={
        msg:'3.1中的数据'
    }
    function send(){
      props.getNum(state.msg)
    }
  return (
    <div>
        <h3>子组件3.1</h3>
        <button onClick={send}>3.1</button>
    </div>
  )
}
//child2
export default function Child2(props) {

  return (
    <div>
        <h3>
            子组件3.2--{props.msg}
        </h3>
    </div>
  )
}
//parent
import Child1 from "./Child1"
import Child2 from "./Child2"
import {useState} from 'react'
export default function Parent() {
    let [count,setCount]=useState(1)
    const getNum=(n)=>{
        setCount(n)
    }
  return (
        <div>
            <h2>父组件三</h2>
            <Child1 getNum={getNum}/>
            <Child2 msg={count}/>

        </div>
  )
}

优化方案

对于复杂的兄弟组件通信，可以考虑使用状态管理库（如Redux）或React Context API来避免"prop drilling"（属性层层传递）问题。

四、跨组件通信

当组件层级很深时，使用props逐层传递会非常繁琐。React提供了Context API来解决跨组件通信问题。

实现原理

使用React.createContext()创建一个上下文对象
使用Context.Provider在父组件中提供数据
在后代组件中使用useContext钩子获取数据

代码示例

javascript 复制代码

//child1
import Child2 from "./Child2"

export default function Child1(props) {
    const state={
        msg:'4.1中的数据'
    }
   
  return (
    <div>
        <h3>子组件4.1</h3>
        <Child2></Child2>
       
    </div>
  )
}
//child2
import {useContext} from 'react'
import {Context}from "./Parent"

export default function Child2(props) {
const msg=useContext(Context)
  return (
    <div>
        <h4>
            孙子组件4.2
        </h4>
    </div>
  )
}
//parent
import { createContext } from "react"
import Child1 from "./Child1"
  export const Context=createContext()//创建一个上下文对象

export default function Parent() {
   

  return (
        <div>
            <h2>父组件四</h2>
            <Context.Provider value={'父组件的数据'}>
            <Child1 />
           
            </Context.Provider>
            
           

        </div>
  )
}

总结

React组件通信是构建React应用的基础，不同的场景需要选择不同的通信方式。简单的父子通信使用props，子父通信使用回调函数，兄弟通信通过共同的父组件中转，跨层级通信使用Context API。对于大型复杂应用，可以考虑引入专门的状态管理库。