我有一个<svg />元素，我在其中渲染了几个<g />和<circle />并通过useState()存储的元素。通过直接通过<line />更改DOM，可以将<svg />添加到append(), removeChild, insertBefore(), etc.和从<lines />中删除。
由于在React中，您实际上不应该直接对DOM进行更改，所以我想知道是否要切换到将useState()与<g />一起存储并以这种方式呈现（同样，只是就像我已经在使用<circles />和<line />一样。但是，这将增加状态存储和管理的数量，根据React最佳实践，状态数量应尽量减少（？ ）。
顺便说一句，到目前为止，我一直没有将<lines />存储在状态中，因为我可以基于它们的ID查询DOM并计算元素之间的关系。这是因为有人告诉我将状态保持在最低水平。但是，在状态中存储serial1.write(b'hello')
的潜在好处是计算关系的代码逻辑可能会更简单。
因此，本质上，问题在于（A）增强状态（可能更容易进行关系查找）但避免直接DOM操作与（B）保持较小的状态但直接修改DOM之间。