React хуки - общая модель взаимодействия компонентов

Question

Пытаюсь переписать приложение React + mobx с использованием хуков + mobx-react-lite. Поделитесь опытом, как должна выглядеть модель взаимодействия компонентов между собой на примере следующей простой задачи:

function App() {  
  return (
    <div className="App">
      <div className="frame">
        <Header store={store} />          
        <Table store={store} />
        <IntroButton store={store} />
      </div>
    </div>
  );  
}

Header, Table, IntroButton - 'observer' компоненты которые через props получали экземпляр class Store. Свои события они биндили к соответствующим методам класса.

onChange={store.ChangeFilter.bind()}

Внутри класса находились observable переменные, которые изменялись. Теперь я изменил описание class Store на function Store() и столкнулся с трудностями... Из-за того что теперь экземпляр класса не создается, через props передается ссылка на функцию?! Биндить методы теперь тоже не получается... Как в принципе должно выглядеть взаимодействие между компонентами и некоторым менеджером роль которого в моем примере выполняет class Store?

Answer 1

Насколько я понял, вам нужно создать экземпляр класса Store для каждого инстанса компонента App.

Для этого используют хук useEffect

function App() {
  const [store, setStore] = React.useState(undefined)
  React.useEffect(()=>{
    setStore(new Store()) // Создаем инстанс только внутри эффекта
  },
  []) // Пустой список зависимых переменных является эквивалентом конструктора
  ...
}

БЛОГ НА HUSL

React хуки - общая модель взаимодействия компонентов

Ответы (1 шт):