И есть классы которые ничего не выводят, и не работают с DOM, главный класс называется CProductsView, в нем уже есть CProductsTopFilter и другие классы, он их объединяет. Компоненты на JQuery просто брали данные из своих классов, например из CProductsView, и действия выполняли тоже через эти классы, нажимаем кнопку, вызывается CProductsView.Search()
В React можно создать компонент ProductsViewComponent, но где хранить класс CProductsView? Как я понял useState/setState для этого не подходит, оно не для сложных объектов, если я вызову CProductsView.Search() то при следующем проходе функции оно сбросится до оригинального, и вообще модификация без setState не советуется. Как совмещать?
Использовать mobx. Прямо один в один впишется. Методы классов станут экшенами (в мобиксовом понимании, см. доку), данные - наблюдаемыми полями и конструкторами. Экземпляры классов можно хранить в useRef или том же useState, если ему передать функцию создания экземпляра. Экземпляры общеиспользуемых классов прокидывать вниз через контекст. Можно совсем упороться и поюзать DI-контейнер.
При должной сноровке структура приложения будет простой и прозрачной.
Подробностей много, читай мануалы к реакту и mobx.
vladimir_vist, useRef - просто ячейка, в которой можно что-то хранить между рендерами, пока компонент не размаунтится.
В чистом реакте компоненты обновляются, если используешь useState, useReduce, или изменились пропсы компонента. Причем объекты сравниваются по ссылке (т.е. нельзя просто взять и поменять что-то внутри существующего объекта, чтобы ui обновился). Царство иммутабельности и чистых функций. Натянуть на это дело ООП (или всё это натянуть на ООП) не получится без костылей.
автор mobx по факту запилил собственную систему реактивности, основанную на проксях и аналогичную vue.
Средний