React: معالجة DOM في componentDidUpdate

مرحبًا ، هذا أشبه بسؤال ، أود أن أفتح مناقشة بخصوص معالجة DOM في componentDidUpdate .

أنا أقوم بإنشاء مكون إضافي لـ React. يجب أن يقوم ببعض حسابات DOM ، لأن CSS ليست قوية بما يكفي لتغطية كل ما يحتاجه هذا المكون الإضافي. تكمن المشكلة في أنني بحاجة إلى ضبط بعض خصائص CSS اعتمادًا على القيمة المرجعة لـ getBoundingClientRect () لبعض عناصر DOM الأخرى التي يقدمها نفس المكون .

من الناحية الفنية ، لدينا 3 خيارات:

1) احسب getBoundingClientRect في componentDidUpdate واستدعاء setState مع القيم المحسوبة. أخشى الحلقة اللانهائية التي يمكن أن تحدث في حالات معينة ، لذلك لن أذهب إلى هذه الحلقة.

2) افعلها كما في 1) والعب قليلاً بـ shouldComponentUpdate ، لكن هذا يبدو معقدًا للغاية وغير قابل للقراءة. تنبثق الكثير من الأسئلة التي تعتمد على حالة استخدام معينة.

3) تحديث DOM من componentDidUpdate. هذا هو الحل الذي قررت البحث عنه ، إنه يعمل ، إنه بسيط ومستقر ويعمل على النحو المنشود. ومع ذلك ، أشعر أنني على حافة الهاوية ، لذلك أردت التحقق مرة أخرى من أن هذه طريقة جيدة للقيام بالأشياء. هل من المقبول التلاعب بـ DOM في componentDidUpdate ؟ يتم استدعاؤها في كل مرة يتم فيها 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}/>
   ...
   );
}