react.js怎么处理组件通信

在 React 中，组件通信的方式主要取决于组件之间的层级关系。下面按常见场景系统讲一下（以 函数组件 + Hooks 为主，也提一下 class 思想）。

一、父组件 → 子组件（最常见）

方式：props 传值

父组件通过属性把数据传给子组件。

function Parent() {
  const msg = "hello child";
  return <Child message={msg} />;
}

function Child({ message }) {
  return <div>{message}</div>;
}

✅ 适用于：

• 直接父子关系
• 数据流向清晰（单向）

二、子组件 → 父组件

方式：父传回调函数（子调用）

function Parent() {
  const getData = (val) => {
    console.log("子组件说：", val);
  };
  return <Child onSend={getData} />;
}

function Child({ onSend }) {
  return <button onClick={() => onSend("hi")}>发送</button>;
}

✅ 本质：props 传函数

三、兄弟组件通信

方式 1：状态提升（推荐）

把共享状态放到共同的父组件。

function Parent() {
  const [value, setValue] = useState("");

  return (
    <>
      <BrotherA onChange={setValue} />
      <BrotherB value={value} />
    </>
  );
}

方式 2：Context（适合多层）

见下文。

四、跨层级通信（祖 → 孙）

方式：Context API

const UserContext = createContext();

function Grandpa() {
  return (
    <UserContext.Provider value="Tom">
      <Father />
    </UserContext.Provider>
  );
}

function Child() {
  const name = useContext(UserContext);
  return <div>{name}</div>;
}

✅ 适合：

• 主题
• 用户信息
• 语言设置

❌ 不适合高频变化数据

五、全局状态管理（复杂项目）

1️⃣ Redux / Redux Toolkit

适合：

• 大型应用
• 多模块共享状态

2️⃣ Zustand（轻量推荐）

const useStore = create((set) => ({
  count: 0,
  inc: () => set(s => ({ count: s.count + 1 }))
}));

3️⃣ Recoil / Jotai

原子化状态管理

六、非 props 的特殊通信方式

1️⃣ ref 通信（命令式）

const childRef = useRef();

<Child ref={childRef} />
childRef.current.doSomething();

✅ 慎用（破坏单向数据流）

2️⃣ 事件总线（少用）

// 简单事件中心
const bus = new EventTarget();
bus.dispatchEvent(new Event("refresh"));

❌ React 不推荐

七、通信方式选择建议

如果你愿意，可以告诉我：

• 你用的是 函数组件还是 class
• 是 小项目 / 中大型项目
• 具体是哪种通信卡住了

我可以直接帮你写对应代码模板。