The selection of design patterns in component communication

Design Pattern Selection in Component Communication

Component communication is one of the core issues in front-end development. Different scenarios require different design patterns to decouple logic and improve maintainability. From simple parent-child component data passing to complex cross-level state synchronization, choosing the right pattern can significantly reduce code complexity.

Parent-Child Component Communication: Props and Callbacks

The most basic communication method involves passing data downward via props, while child components pass events upward via callback functions. This pattern is suitable for scenarios with clear direct hierarchical relationships.

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

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

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

When passing data through multiple layers of components, prop drilling can force intermediate components to pass properties they don't care about. In such cases, the component composition pattern can be considered:

// Using component composition to avoid prop drilling
function Card({ children }) {
  return <div className="card">{children}</div>;
}

function App() {
  return (
    <Card>
      <Avatar /> {/* Accesses the upper Context directly instead of via props */}
    </Card>
  );
}

Cross-Level Communication: Context Pattern

React Context provides a solution for sharing data across the component tree, suitable for global themes, user authentication, and similar scenarios. It essentially implements the dependency injection pattern.

const ThemeContext = createContext('light');

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

function Toolbar() {
  // Intermediate components don't need to pass the theme prop
  return <ThemedButton />;
}

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

For frequently updated data, it's recommended to split the Context into separate state and dispatch Contexts to avoid unnecessary renders:

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>
  );
}

Event Bus: Publish-Subscribe Pattern

For completely decoupled component communication, an event bus uses the publish-subscribe pattern to enable cross-component event listening. This is suitable for interactions between distant components without a parent-child relationship.

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));
  }
}

// Usage example
const bus = new EventBus();

// Component A
bus.on('dataUpdate', (data) => {
  console.log('Received data:', data);
});

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

In React, useEffect can be used to manage subscription lifecycles:

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

State Lifting and Single Source of Truth

When multiple components need to share state, lifting the state to the nearest common ancestor component is a common approach. Combining this with the Flux architecture can create a unidirectional data flow.

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

For complex scenarios, state management libraries like Redux implement the observer pattern:

// 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 and Scoped Slots

The Render Props pattern dynamically determines the rendering content of child components via function props, enabling logic reuse.

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>;
}

// Usage
<MouseTracker render={({ x, y }) => (
  <p>Current mouse position: {x}, {y}</p>
)} />

Vue's scoped slots follow a similar concept:

<!-- Child component -->
<template>
  <slot :user="user"></slot>
</template>

<!-- Parent component -->
<child>
  <template v-slot="{ user }">
    {{ user.name }}
  </template>
</child>

Higher-Order Component (HOC) Pattern

Higher-Order Components enhance functionality by wrapping the original component, suitable for cross-cutting concerns like logging and permission control.

function withLogger(WrappedComponent) {
  return function(props) {
    useEffect(() => {
      console.log('Component mounted:', WrappedComponent.name);
      return () => console.log('Component unmounted:', WrappedComponent.name);
    }, []);
    
    return <WrappedComponent {...props} />;
  };
}

// Usage
const EnhancedComponent = withLogger(OriginalComponent);

Multiple HOCs can be combined to form a functional pipeline:

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

Mediator Pattern for Complex Coordination

When multiple components require complex coordination, introducing a mediator as a communication hub can reduce coupling.

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} received message: ${message}`);
  }
}

// Usage
const room = new ChatRoom();
const user1 = new User('Zhang San');
const user2 = new User('Li Si');
room.register(user1);
room.register(user2);
user1.send('Hello!');

Command Pattern for Encapsulating Operations

Encapsulating operations as command objects supports advanced features like undo and queuing.

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;
    }
  }
}

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

Strategy Pattern for Dynamic Algorithm Selection

Different communication strategies can be selected based on varying scenarios to improve system flexibility.

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);
}

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