Какие существуют способы взаимодействия между компонентами в приложении?

1. Передача пропсов (props) сверху вниз от родительского компонента к дочернему.
2. Испускание событий (events) снизу вверх от дочернего компонента к родительскому.
3. Использование контекста API (Context API) для передачи данных через дерево компонентов без необходимости явно передавать пропсы на каждом уровне.
4. Применение глобального хранилища состояний, например, Redux, Vuex или Zustand, для управления состоянием приложения и обмена данными между компонентами на разных уровнях.
5. Использование рефов (refs) для прямого доступа к DOM-элементам или дочерним компонентам (не рекомендуется для обмена данными между независимыми компонентами).
6. callback-функции, передаваемые через пропсы, для вызова методов родителя из дочернего компонента.
7. Посредники (Mediator pattern) для сложных взаимодействий, где компоненты общаются не напрямую, а через центральный объект.
8. Service locator для доступа к экземплярам сервисов или зависимостям, которыми могут делиться компоненты.

Пример передачи пропсов и испускания событий (React):

// ParentComponent.jsx
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [message, setMessage] = React.useState('Hello from parent');

  const handleChildEvent = (data) => {
    console.log('Received data from child:', data);
    setMessage(`Updated by child: ${data}`);
  };

  return (
    <div>
      <p>{message}</p>
      <ChildComponent parentMessage={message} onChildEvent={handleChildEvent} />
    </div>
  );
}

export default ParentComponent;

// ChildComponent.jsx
function ChildComponent(props) {
  const handleClick = () => {
    // Испускаем событие с данными
    props.onChildEvent('Data from child');
  };

  return (
    <div>
      <p>Message from parent: {props.parentMessage}</p>
      <button onClick={handleClick}>Send data to parent</button>
    </div>
  );
}

export default ChildComponent;

Пример использования Context API (React):

// MyContext.js
import React from 'react';

const MyContext = React.createContext('default value');

export default MyContext;

// App.jsx
import MyContext from './MyContext';
import ComponentA from './ComponentA';

function App() {
  const sharedValue = 'Value from context provider';

  return (
    <MyContext.Provider value={sharedValue}>
      <ComponentA />
    </MyContext.Provider>
  );
}

export default App;

// ComponentA.jsx
import ComponentB from './ComponentB';

function ComponentA() {
  return <ComponentB />;
}

export default ComponentA;

// ComponentB.jsx
import React, { useContext } from 'react';
import MyContext from './MyContext';

function ComponentB() {
  const contextValue = useContext(MyContext);

  return (
    <div>
      <p>Value from context: {contextValue}</p>
    </div>
  );
}

export default ComponentB;