React中能完全避免在生命周期方法中直接进行DOM操作吗？

问题背景：

在使用 Canvas 绘制图形时，需要根据某元素的位置和大小来决定绘制的图形的位置和大小，然而只有在真正的 DOM 渲染出来之后，才能获取到该元素的位置和大小。

我的做法是在

方法中获取该元素的位置和大小，然后进行图形绘制，这似乎造成了直接进行 DOM 操作？

疑问：
个人感觉完全避免在生命周期方法中直接进行 DOM 操作似乎是不可行的，只能说尽量减少在生命周期方法中直接进行 DOM 操作，不知个人理解是否有误？或者针对上述情况有没有可以避免在生命周期方法中直接进行 DOM 操作的方法？