Реквизит или состояние для редактора древовидной структуры данных

Question

Приложение предназначено для создания древовидной структуры. Узел дерева определяется:

// This is a node 
{ 
    images: [{x:0, y:0, width: 100, height: 100}, ...], 
    subnodes: {key1: [<node>...], key2: [<node>...]} 
} 

интерфейс выглядит как

+----------+----------------------------+ 
|   |       | 
| Tree  |  +---+     | 
| Overview |  | | +--------+  | 
|   |  | | |  |  | 
|   |  | | +--------+  | 
|   |  +---+     | 
|   |       | 
|   | drag drop to resize  | 
|   | and position    | 
|   +----------------------------+ 
|   |       | 
|   | some options for leaf | 
|   |       | 
|   |       | 
+----------+----------------------------+ 

левая сторона является общая структура данных в результате. Правая сторона предназначена для редактирования узла, выбранного в левой части.

Вопрос в том, следует ли использовать данные узла в качестве реквизита или состояния для правой стороны?

Использование состояния легче изменить данные узла, но риск несовместим, поскольку он нарушает единый источник правды.

Если я использую реквизиты для верхнего правого компонента, я должен распространять событие перетаскивания на правый компонент, а затем ссылаться на большинство компонентов, а затем изменять данные.

Answer 1

До тех пор, пока компонент должен изменить себя, он должен войти в состояние. Если нет, он должен попасть в реквизиты, которые вы можете использовать в качестве конфигурации компонента.

В вашем случае я считаю, что данные узла, с которыми вы работаете в данный момент, должны находиться в состоянии верхнего правого компонента, в то время как вы перемещаете вещи, а компонент должен сам себя изменять. Когда вы закончите, обновите исходные данные с помощью функции обновления, переданной в качестве опоры из родительского компонента, и позвольте данным снова течь через компоненты.

Государство меньше, или немой, компоненты, которые полностью полагаются на реквизиты, которые они получают, и будут обновляться только после их изменения, на мой взгляд, должны использоваться для простых вещей в конце потока данных. Более сложные самонастраивающиеся компоненты, такие как компонент перетаскивания/изменения размера, должны обрабатывать свое собственное состояние в активном состоянии.

Надеюсь, это поможет!