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, что скажется на производительности.