React: componentDidUpdateでDOMを操作する

こんにちは、これは質問のようなものです。 componentDidUpdate DOM操作に関するディスカッションを開きたいと思います。

Reactプラグインを作成しています。 CSSは、このプラグインが実行する必要のあるすべてをカバーするほど強力ではないため、いくつかのDOM計算を実行する必要があります。 問題は、同じコンポーネントによってレンダリングされた他のDOM要素のgetBoundingClientRect（）の戻り値に応じて、いくつかのCSSプロパティを調整する必要があることです。

したがって、技術的には3つのオプションがあります。

1）計算getBoundingClientRectでcomponentDidUpdateと呼び出すsetState計算値と。 特定の場合に発生する可能性のある無限ループが怖いので、これには行きません。

2）1）のようにして、 shouldComponentUpdateで少し遊んでください。ただし、これは非常に複雑で読みにくいようです。 特定のユースケースに応じて、多くの質問がポップアップ表示されます。

3）componentDidUpdateからDOMを更新します。 これは私が選択したソリューションであり、機能し、シンプルで安定しており、意図したとおりに機能します。 しかし、私は限界に達していると感じているので、これが問題のない方法であることを再確認したいと思いました。 componentDidUpdate DOMを操作しても大丈夫ですか？ renderが実行されるたびに呼び出され、次のrender DOMを再度変更するため、変更を破棄しても問題ありません。

これがコードの一部です

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}/>
   ...
   );
}