组件通信中的设计模式选择

组件通信中的设计模式选择

组件通信是前端开发的核心问题之一，不同的场景需要不同的设计模式来解耦逻辑、提升可维护性。从简单的父子组件数据传递到复杂的跨层级状态同步，合理选择模式能显著降低代码复杂度。

父子组件通信：Props与回调

最基本的通信方式通过props向下传递数据，子组件通过回调函数向上传递事件。这种模式适合直接层级关系明确的场景。

// 父组件
function Parent() {
  const [count, setCount] = useState(0);
  
  const handleIncrement = () => {
    setCount(prev => prev + 1);
  };

  return <Child count={count} onIncrement={handleIncrement} />;
}

// 子组件
function Child({ count, onIncrement }) {
  return (
    <div>
      <span>{count}</span>
      <button onClick={onIncrement}>+</button>
    </div>
  );
}

当需要穿透多层组件时，prop drilling会导致中间组件被迫传递不关心的属性。此时可以考虑组合组件模式：

// 使用组合组件避免prop drilling
function Card({ children }) {
  return <div className="card">{children}</div>;
}

function App() {
  return (
    <Card>
      <Avatar /> {/* 直接访问上层Context而非通过props传递 */}
    </Card>
  );
}

跨层级通信：Context模式

React Context提供了一种跨组件树共享数据的方案，适合全局主题、用户认证等场景。本质上实现了依赖注入模式。

const ThemeContext = createContext('light');

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

function Toolbar() {
  // 中间组件无需传递theme prop
  return <ThemedButton />;
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>按钮</button>;
}

对于频繁更新的数据，建议将Context拆分为状态和分发两个独立Context以避免不必要的渲染：

const StateContext = createContext();
const DispatchContext = createContext();

function App() {
  const [state, dispatch] = useReducer(reducer, initialState);
  
  return (
    <StateContext.Provider value={state}>
      <DispatchContext.Provider value={dispatch}>
        <Content />
      </DispatchContext.Provider>
    </StateContext.Provider>
  );
}

事件总线：发布订阅模式

对于完全解耦的组件通信，事件总线采用发布订阅模式实现跨组件事件监听。这适合非父子关系的远距离组件交互。

class EventBus {
  constructor() {
    this.events = {};
  }
  
  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  }
  
  emit(event, ...args) {
    const callbacks = this.events[event];
    callbacks?.forEach(cb => cb(...args));
  }
}

// 使用示例
const bus = new EventBus();

// 组件A
bus.on('dataUpdate', (data) => {
  console.log('收到数据:', data);
});

// 组件B
bus.emit('dataUpdate', { newData: 123 });

在React中可以使用useEffect管理订阅生命周期：

function ComponentA() {
  useEffect(() => {
    const handler = (data) => console.log(data);
    bus.on('event', handler);
    return () => bus.off('event', handler);
  }, []);
}

状态提升与单一数据源

当多个组件需要共享状态时，将状态提升到最近的共同祖先组件是常见做法。结合Flux架构可以形成单向数据流。

function Parent() {
  const [sharedState, setSharedState] = useState(null);
  
  return (
    <>
      <ChildA state={sharedState} />
      <ChildB onStateChange={setSharedState} />
    </>
  );
}

对于复杂场景，使用Redux这类状态管理库实现了观察者模式：

// store.js
const store = createStore(reducer);

// Component.js
function Component() {
  const dispatch = useDispatch();
  const data = useSelector(state => state.data);
  
  const updateData = () => {
    dispatch({ type: 'UPDATE', payload: newData });
  };
}

渲染属性与作用域插槽

渲染属性(Render Props)模式通过函数prop动态决定子组件的渲染内容，实现逻辑复用。

function MouseTracker({ render }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  
  const handleMove = (e) => {
    setPosition({ x: e.clientX, y: e.clientY });
  };
  
  return <div onMouseMove={handleMove}>{render(position)}</div>;
}

// 使用
<MouseTracker render={({ x, y }) => (
  <p>当前鼠标位置: {x}, {y}</p>
)} />

Vue中的作用域插槽也是类似思想：

<!-- 子组件 -->
<template>
  <slot :user="user"></slot>
</template>

<!-- 父组件 -->
<child>
  <template v-slot="{ user }">
    {{ user.name }}
  </template>
</child>

高阶组件模式

高阶组件(HOC)通过包裹原始组件来增强功能，适合横切关注点如日志记录、权限控制等。

function withLogger(WrappedComponent) {
  return function(props) {
    useEffect(() => {
      console.log('组件挂载:', WrappedComponent.name);
      return () => console.log('组件卸载:', WrappedComponent.name);
    }, []);
    
    return <WrappedComponent {...props} />;
  };
}

// 使用
const EnhancedComponent = withLogger(OriginalComponent);

可以组合多个HOC形成功能管道：

const SuperComponent = withRouter(
  withAuth(
    withLogger(BaseComponent)
  )
);

中介者模式协调复杂交互

当多个组件需要复杂协调时，引入中介者作为通信枢纽能降低耦合度。

class ChatRoom {
  constructor() {
    this.users = [];
  }
  
  register(user) {
    this.users.push(user);
    user.room = this;
  }
  
  send(message, from) {
    this.users.forEach(user => {
      if (user !== from) {
        user.receive(message);
      }
    });
  }
}

class User {
  constructor(name) {
    this.name = name;
  }
  
  send(message) {
    this.room.send(message, this);
  }
  
  receive(message) {
    console.log(`${this.name} 收到消息: ${message}`);
  }
}

// 使用
const room = new ChatRoom();
const user1 = new User('张三');
const user2 = new User('李四');
room.register(user1);
room.register(user2);
user1.send('你好!');

命令模式封装操作

将操作封装为命令对象，支持撤销、队列等高级功能。

class Command {
  constructor(receiver, action, args) {
    this.receiver = receiver;
    this.action = action;
    this.args = args;
    this.executed = false;
  }
  
  execute() {
    this.receiver[this.action](...this.args);
    this.executed = true;
  }
  
  undo() {
    if (this.executed) {
      this.receiver[`undo${this.action}`](...this.args);
      this.executed = false;
    }
  }
}

// 使用
const command = new Command(light, 'toggle', []);
button.onclick = () => command.execute();

策略模式动态选择算法

根据不同场景选择不同的通信策略，提升系统灵活性。

const strategies = {
  websocket: (data) => {
    socket.send(data);
  },
  localStorage: (data) => {
    localStorage.setItem('key', JSON.stringify(data));
  },
  rest: (data) => {
    fetch('/api', { method: 'POST', body: data });
  }
};

function communicate(data, strategy) {
  return strategies[strategy](data);
}

// 使用
communicate(data, navigator.onLine ? 'websocket' : 'localStorage');