一、父组件向子组件通信：Props驱动的数据流

在React单向数据流架构中，父组件通过props向子组件传递数据是最基础的通信方式。这种模式遵循”数据自上而下流动”的原则，子组件通过接收props参数访问父组件传递的数据。

// 父组件
function ParentComponent() {
  const userData = { name: 'Alice', age: 28 };
  return <ChildComponent data={userData} />;
}
// 子组件
function ChildComponent({ data }) {
  return <div>{`Name: ${data.name}, Age: ${data.age}`}</div>;
}

工程实践要点：

类型安全：使用TypeScript或PropTypes进行props类型校验
默认值处理：为非必传props设置合理的默认值
性能优化：对复杂对象使用useMemo避免不必要的重新渲染
不可变原则：子组件不应直接修改接收的props

二、子组件向父组件通信：回调函数模式

当子组件需要向父组件反馈数据或触发父组件逻辑时，回调函数是最常用的解决方案。父组件通过props将函数传递给子组件，子组件在特定时机调用该函数。

2.1 基础回调实现

// 父组件
function Parent() {
  const handleChildEvent = (payload) => {
    console.log('Child event:', payload);
  };
  return <Child onEvent={handleChildEvent} />;
}
// 子组件
function Child({ onEvent }) {
  const handleClick = () => {
    onEvent({ timestamp: Date.now(), action: 'click' });
  };
  return <button onClick={handleClick}>Trigger Event</button>;
}

2.2 回调函数优化实践

参数解构：使用对象参数提高可读性
错误处理：在回调函数中添加try-catch块
防抖节流：对高频触发事件进行优化
异步处理：支持Promise返回的异步回调

// 优化后的回调示例
function OptimizedParent() {
  const handleAsyncEvent = async ({ id, value }) => {
    try {
      const result = await fetchData(id);
      console.log('Processed:', result + value);
    } catch (error) {
      console.error('Event handling failed:', error);
    }
  };
  return <Child onAsyncEvent={handleAsyncEvent} />;
}

三、跨层级组件通信：状态提升与Context API

当组件层级较深时，逐层传递props（prop drilling）会导致代码冗余。此时可采用状态提升或Context API实现跨层级通信。

3.1 状态提升模式

将共享状态提升到最近的共同父组件，通过props向下分发：

function GrandParent() {
  const [sharedState, setSharedState] = useState('initial');
  return (
    <Parent sharedState={sharedState} onUpdate={setSharedState} />
  );
}
function Parent({ sharedState, onUpdate }) {
  return <Child state={sharedState} updateState={onUpdate} />;
}

3.2 Context API实现

对于全局或频繁使用的状态，使用Context API更高效：

// 创建Context
const ThemeContext = createContext({ theme: 'light', toggleTheme: () => {} });
// 父组件提供值
function App() {
  const [theme, setTheme] = useState('light');
  const toggleTheme = () => setTheme(prev => prev === 'light' ? 'dark' : 'light');
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      <DeepNestedComponent />
    </ThemeContext.Provider>
  );
}
// 任意层级子组件使用
function DeepNestedComponent() {
  const { theme, toggleTheme } = useContext(ThemeContext);
  return (
    <button onClick={toggleTheme} style={{ background: theme === 'light' ? '#fff' : '#333' }}>
      Toggle Theme
    </button>
  );
}

Context使用准则：

避免过度使用，仅用于真正全局的状态
将Context值设计为不可变对象
对频繁更新的状态考虑使用useReducer
通过拆分多个Context避免不必要的渲染

四、高级通信模式：Ref转发与自定义事件

4.1 Ref转发机制

通过forwardRef和useImperativeHandle实现父组件对子组件实例方法的调用：

// 子组件
const Child = forwardRef((props, ref) => {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus(),
    getValue: () => inputRef.current.value
  }));
  return <input ref={inputRef} />;
});
// 父组件
function Parent() {
  const childRef = useRef();
  const handleClick = () => {
    childRef.current.focus();
    console.log(childRef.current.getValue());
  };
  return (
    <>
      <Child ref={childRef} />
      <button onClick={handleClick}>Focus Input</button>
    </>
  );
}

4.2 自定义事件总线（适用于非React环境集成）

在需要与第三方库或非React组件通信时，可实现简单的事件总线：

// 事件总线实现
class EventBus {
  static #instance = null;
  static getInstance() {
    if (!this.#instance) {
      this.#instance = new EventBus();
    }
    return this.#instance;
  }
  #events = new Map();
  subscribe(event, callback) {
    if (!this.#events.has(event)) {
      this.#events.set(event, new Set());
    }
    this.#events.get(event).add(callback);
  }
  publish(event, payload) {
    this.#events.get(event)?.forEach(cb => cb(payload));
  }
}
// 使用示例
const bus = EventBus.getInstance();
// 组件A订阅
bus.subscribe('userUpdate', (user) => {
  console.log('User updated:', user);
});
// 组件B发布
bus.publish('userUpdate', { id: 1, name: 'Bob' });

五、通信模式选择指南

场景	推荐方案	注意事项
父子直接通信	Props/回调	保持简单直接
深层组件通信	Context API	注意性能优化
复杂状态管理	状态管理库	考虑引入Redux/Zustand
非React集成	自定义事件	做好类型安全
实例方法调用	Ref转发	谨慎使用，破坏封装性

六、性能优化建议

避免不必要的渲染：使用React.memo、useMemo、useCallback
Context分割：将频繁更新的状态单独放在一个Context
批量更新：对多个状态更新使用unstable_batchedUpdates
选择性订阅：在事件总线中实现按需订阅

通过合理选择通信模式，开发者可以构建出既保持组件独立性又实现高效协作的React应用架构。在实际开发中，建议根据组件关系复杂度、通信频率和性能要求等因素综合决策通信方案。

React组件通信全解析：三种核心模式与工程实践