Оптимизация работы секундомеров в React
Я создаю небольшое приложение на React + Redux, в суть его работы углубляться не буду, скажу лишь то, что оно работает с несколькими секундомерами. Можно создавать новые секундомеры, можно удалять ненужные, работают они независимо друг от друга и список их может быть сколь угодно длинным.
Сам секундомер это обычный презентационный компонент. А вот список секундомеров это уже контейнер, который подключается к Store и на его основе создает массив из компонентов секундомера, после чего их и отображает. И разумеется, если запустить любой из секундомеров в этом случае, то каждую секунду (а то и миллисекунду) будут перерисовываться все секундомеры независимо от того, работают они или нет, вместе с самим контейнером.
Быть может вы сможете посоветовать какой-нибудь более-менее удачный выход из этой ситуации? Я не особо опытен в React и на ум приходят только два варианта:
- Переделывать презентационный секундомер из функционального компонента в классовый и запрещать ему перерисовку если она его не касается;
- Превратить секундомер из обычного компонента в еще один контейнер, который будет подключаться к store самостоятельно и забирать из него только информацию относящуюся конкретно к нему, т.е свои секунды. А контейнер со списком секундомеров написать так, чтобы он этой информации не касался и не обновлялся при ее изменении.
Спасибо за внимание.
Ответы (1 шт):
В общем, решил придерживаться второго варианта. Теперь каждый секундомер это контейнер, который самостоятельно цепляется к Store и достает только ту информацию, которая относится лично к нему. Список секундомеров теперь получает только массив из id этих самых секундомеров, для того чтобы знать сколько их и для того чтобы прописать каждому секундомеру key. В итоге все работает как надо, работа одного секундомера не заставляет перерисовываться другие секундомеры.