该应用程序用于用户创建树状结构。树节点定义为：
// This is a node
{
images: [{x:0, y:0, width: 100, height: 100}, ...],
subnodes: {key1: [<node>...], key2: [<node>...]}
}
UI看起来像
+----------+----------------------------+
| | |
| Tree | +---+ |
| Overview | | | +--------+ |
| | | | | | |
| | | | +--------+ |
| | +---+ |
| | |
| | drag drop to resize |
| | and position |
| +----------------------------+
| | |
| | some options for leaf |
| | |
| | |
+----------+----------------------------+
左手边是作为结果的总数据结构。右侧用于编辑左侧选择的节点。
问题是，我应该使用节点数据作为道具还是右手边的状态？
使用state更容易修改节点数据，但风险是不一致的，因为它违反了单一的真相来源。
若我对右上角的组件使用道具，我必须将拖动事件传播到右上角组件，然后道具到最上面的组件，然后修改数据。
只要组件需要改变自己，它就应该进入状态。如果没有，它应该进入道具中，您可以将其更多地用作组件的配置。
在您的情况下，我认为您当前使用的节点数据应该处于右上角的组件状态，而您四处移动，组件必须自行更改。完成后，使用从父组件作为道具传递的更新函数更新源数据，并让数据再次流经组件。
在我看来，无状态组件或dumm组件完全依赖于它们接收的道具，并且只有在它们更改时才会更新，应该用于数据流末尾的简单事情。更复杂的自更改组件，如拖放/调整大小组件，应该在活动时处理自己的状态。
希望它能有所帮助！