react: правильная архитектура вложенных (дочерних) компонентов

подскажите как лучше организовать работу для следующей задачи:

  1. есть хранилище данных (комментарии)

  2. по нажатии на кнопку ButtonExport (расположенная в компоненте PageMain) происходит запись данных на диск

  3. отображение комментария, а также его редактирование происходит в Input.Textarea компоненте CommentBlock, который сам вложен в компонент PageMain через кучу родительских компонентов:

    PageMain -> TableData -> RowContent -> CommentBlock

пока я реализовал в лоб:

обработку ввода текста берет на себя полностью CommentBlock:

const CommentBlock: React.FC<any> = (props) => {
  // контроль состояний
  const [comments, setComments] = useState<string>('');           // комментарий

  // событие: изменён комментарий
  const handleChangeComment = (e: ChangeEvent<HTMLTextAreaElement>) => {
    setComments(e.target.value);
    props.onChangeComment(e.target.value, props.id);
  }

  // отрисовать компонент
  return (
    <div key={props.id}>
      {
        props.comments_enabled && 
        <Input.TextArea
          autoSize 
          allowClear 
          value     = {comments} 
          onChange  = {handleChangeComment} 
          className = 'textarea-comments' 
        />
      }
    </div>
  );

если комментарий меняется, то через колбэк onChangeComment он пробрасывается через все родители (которые никак комментарий не меняют!!!) до PageMain и уже в данном верхнем компоненте они добавляются в данные, которые будут затем по нажатию на ButtonExport записаны в файл.


такая структура мне кажется не очень хорошей:

  1. пробрасывать на самый верх через несколько родителей через колбэки данные кажется не очень хорошей идеей
  2. по сути происходит дублирование комментариев: в самом CommentBlock (индивидуальный комментарий) и в PageMain (все комментарии от всех CommentBlock)

подскажите как в таком случае правильно организовывается работа?

вроде как сюда просится управление состояниями (через Redux, Mobx или Effector), так ли это?

Но возникает второй вопрос тогда - не приведет ли изменение данных только в PageMain от которых зависит CommentBlock перерисовки всех CommentBlock, что скажется на производительности.


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