问反应更糟糕的实践:更胖的状态还是DOM操作？

EN

我有一个<svg />元素，我在其中呈现了几个通过useState()存储的<g />和<circle />。通过直接通过append(), removeChild, insertBefore(), etc.修改DOM，可以将<line />添加到<svg />或从DOM中删除

因为在React中你不应该直接改变DOM，我想知道是否应该切换到用useState()存储<lines />并以这种方式呈现它们(再一次，就像我已经用我的<g />和<circles />一样)。然而，这会增加存储和管理的状态数量，根据React最佳实践(?)。

顺便说一句，到目前为止，我一直没有在状态中存储<line />，因为根据它们的ids，我可以查询DOM并计算元素之间的关系。这是因为我被告知要保持最低限度的状态。然而，将<lines />存储在状态中的一个潜在优势是，计算关系的代码逻辑可能会更简单。

因此，本质上的问题是(A)使状态变胖(以及可能更容易的关系查找)，但避免直接DOM操作与(B)保持较小的状态，但直接修改DOM。