концепция Feature-Sliced Design и React компоненты

стал изучать Feature-Sliced Design и возникли вопросы, впрочем это наверное да общие вопросы дизайна React кода

Есть компонент, который содержит 3 компонента - Большую кнопку, Тулбар с несколькими кнопками и Таблицу. Весь код строк на 300 ;-)

Потенциально код уже тяжело начинает восприниматься, что затрудняет его расширение и т.д.

Что обычно рекомендуется в таких случаях делать? Мне кажется, что минимум

  1. разделить компонент на 3 отдельных компонента, каждый запихнуть в свой tsx, даже большую кнопку, которая вместе со всеми include будет занимать всего строк 15-20

  2. всю обработку связи между этими компонентами оставить в родительском

  3. всю индивидуальную обработку перенести в соответствующие компоненты (из серии нажимаем на кнопку, на ней меняется иконка)

В FSD, как я понял, идут дальше и вообще разделяют компонент на части, когда логика выносится отдельно, отрисовка отдельно и т.д. или я ошибаюсь (я скорее про код, который используется лишь в одном компоненте, т.е. нет дублирования)?


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

Автор решения: Igor Ivanov

я бы вынес таблицу как отдельный компонент в папку features, а кнопку и тулбар отдельными компонентами в папку components.

→ Ссылка