При разработке программного обеспечения существуют сценарии, в которых нам необходимо обновить родительское представление при возникновении изменений в дочернем элементе, но без непосредственного отображения данных дочернего элемента. Это может быть полезно во многих приложениях, таких как информационные панели реального времени, инструменты совместного редактирования или приложения чата. В этой статье мы рассмотрим несколько методов достижения такого поведения, а также примеры кода.

Метод 1. Событийный подход с использованием пользовательских событий

// Child component
const ChildComponent = () => {
  // Some data and logic

  useEffect(() => {
    // Emit event when a change occurs
    window.dispatchEvent(new CustomEvent('childChanged', { detail: { /* data */ } }));
  }, [/* relevant dependencies */]);
  // ...
};
// Parent component
const ParentComponent = () => {
  useEffect(() => {
    // Listen for the event and update the parent view
    const handleChildChanged = (event) => {
      // Update the parent view based on the event data
    };
    window.addEventListener('childChanged', handleChildChanged);
    return () => {
      // Clean up the event listener
      window.removeEventListener('childChanged', handleChildChanged);
    };
  }, []);
  // ...
};

Метод 2: шаблон наблюдателя с использованием глобального менеджера состояний (например, Redux)

// Child component
const ChildComponent = () => {
  // Some data and logic

  useEffect(() => {
    // Dispatch an action when a change occurs
    store.dispatch({ type: 'CHILD_CHANGED', payload: { /* data */ } });
  }, [/* relevant dependencies */]);
  // ...
};
// Parent component
const ParentComponent = () => {
  useEffect(() => {
    // Subscribe to the state changes and update the parent view
    const handleChildChanged = () => {
      // Update the parent view based on the updated state
    };
    const unsubscribe = store.subscribe(handleChildChanged);
    return () => {
      // Clean up the subscription
      unsubscribe();
    };
  }, []);
  // ...
};

Метод 3. Привязка данных с использованием библиотеки синхронизации данных (например, MobX)

import { observable, autorun } from 'mobx';
// Child component
const ChildComponent = () => {
  const data = observable({ /* data */ });
  autorun(() => {
    // Triggered when a change occurs
    // Update the parent view indirectly (e.g., through a callback)
  });
  // ...
};
// Parent component
const ParentComponent = () => {
  // ...
  // ...
};

Метод 4: события, отправленные через WebSocket или сервер (SSE) для обновлений в реальном времени

// Child component
const ChildComponent = () => {
  // Some data and logic

  useEffect(() => {
    // Establish a WebSocket connection or SSE connection
    const connection = new WebSocket('wss://example.com');
    connection.onmessage = (event) => {
      // Handle the message and update the parent view indirectly
    };
    return () => {
      // Clean up the connection
      connection.close();
    };
  }, []);
  // ...
};
// Parent component
const ParentComponent = () => {
  // ...
  // ...
};

В этой статье мы рассмотрели несколько методов автоматического обновления родительского представления при возникновении изменений в дочернем представлении без непосредственного отображения данных дочернего элемента. Эти методы включают использование пользовательских событий, шаблона наблюдателя с глобальным менеджером состояний, библиотек синхронизации данных и протоколов связи в реальном времени. Используя эти методы, разработчики могут повысить эффективность и удобство взаимодействия с пользователем в различных приложениях.