react: правильная архитектура вложенных (дочерних) компонентов
подскажите как лучше организовать работу для следующей задачи:
есть хранилище данных (комментарии)
по нажатии на кнопку
ButtonExport
(расположенная в компонентеPageMain
) происходит запись данных на дискотображение комментария, а также его редактирование происходит в
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
записаны в файл.
такая структура мне кажется не очень хорошей:
- пробрасывать на самый верх через несколько родителей через колбэки данные кажется не очень хорошей идеей
- по сути происходит дублирование комментариев: в самом
CommentBlock
(индивидуальный комментарий) и вPageMain
(все комментарии от всехCommentBlock
)
подскажите как в таком случае правильно организовывается работа?
вроде как сюда просится управление состояниями (через Redux, Mobx или Effector), так ли это?
Но возникает второй вопрос тогда - не приведет ли изменение данных только в PageMain
от которых зависит CommentBlock
перерисовки всех CommentBlock
, что скажется на производительности.