React: Memanipulasi DOM di componentDidUpdate

Hai, ini lebih seperti pertanyaan, saya ingin membuka diskusi tentang manipulasi DOM di componentDidUpdate .

Saya sedang membuat plugin Bereaksi. Itu harus melakukan beberapa perhitungan DOM, karena CSS tidak cukup kuat untuk mencakup semua yang perlu dilakukan plugin ini. Masalahnya adalah saya perlu menyesuaikan beberapa properti CSS tergantung pada nilai pengembalian getBoundingClientRect() dari beberapa elemen DOM lain yang dirender oleh component yang sama .

Jadi secara teknis kami memiliki 3 opsi:

1) Hitung getBoundingClientRect di componentDidUpdate dan panggil setState dengan nilai yang dihitung. Saya takut loop tak terbatas yang bisa terjadi dalam kasus-kasus tertentu, jadi saya tidak akan memilih yang ini.

2) Lakukan seperti di 1) dan mainkan sedikit dengan shouldComponentUpdate , tetapi ini tampaknya sangat rumit dan tidak dapat dibaca. Banyak pertanyaan muncul yang bergantung pada kasus penggunaan tertentu.

3) Perbarui DOM dari componentDidUpdate. Ini adalah solusi yang saya putuskan untuk digunakan, ini berfungsi, sederhana, stabil, dan berfungsi sebagaimana dimaksud. Namun saya merasa saya berada di tepi, jadi saya ingin memeriksa ulang bahwa ini adalah cara yang OK untuk melakukan sesuatu. Apakah boleh memanipulasi DOM di componentDidUpdate ? Itu dipanggil setiap kali render selesai, dan saya setuju untuk membuang perubahan saya, karena untuk render saya akan memodifikasi DOM lagi.

Berikut adalah bagian dari kode

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