React: DOM in ComponentDidUpdate manipulieren

Hallo, dies ist eher eine Frage, ich möchte eine Diskussion über die DOM-Manipulation in componentDidUpdate eröffnen.

Ich erstelle ein React-Plugin. Es muss einige DOM-Berechnungen durchführen, da CSS nicht leistungsstark genug ist, um alles abzudecken, was dieses Plugin tun muss. Das Problem ist, dass ich einige CSS-Eigenschaften abhängig vom Rückgabewert von getBoundingClientRect() eines anderen DOM-Elements anpassen muss, das von derselben Komponente gerendert wird .

Technisch haben wir also 3 Möglichkeiten:

1) Berechne getBoundingClientRect in componentDidUpdate und rufe setState mit berechneten Werten auf. Ich habe Angst vor der Endlosschleife, die in bestimmten Fällen passieren könnte, also würde ich mich nicht für diese entscheiden.

2) Machen Sie es wie in 1) und spielen Sie ein bisschen mit shouldComponentUpdate , aber das scheint sehr komplex und nicht lesbar zu sein. Es tauchen viele Fragen auf, die vom jeweiligen Anwendungsfall abhängig sind.

3) Aktualisieren Sie DOM von ComponentDidUpdate. Dies ist die Lösung, für die ich mich entschieden habe, sie funktioniert, sie ist einfach, stabil und funktioniert wie beabsichtigt. Ich habe jedoch das Gefühl, dass ich am Rande bin, also wollte ich noch einmal überprüfen, ob dies eine OK-Methode ist. Ist es in Ordnung, DOM in componentDidUpdate zu manipulieren? Es wird jedes Mal aufgerufen, wenn render fertig ist, und ich bin damit einverstanden, meine Änderungen wegzuwerfen, denn für die nächsten render werde ich DOM wieder modifizieren.

Hier ist ein Teil des Codes

componentDidMount() {
  this.recalculateIndent();
}

componentDidUpdate() {
  this.recalculateIndent();
}

recalculateIndent() {
  // calculate indent based on getBoundingClientRect of some DOM reference
  this.textareaRef.style.textIndent = `${indent}px`;
}

render() {
   return (
   ...
   <textarea ref={ref => this.textareaRef = ref}/>
   ...
   );
}