React: कंपोनेंटडिडअपडेट में डोम में हेरफेर करना

नमस्ते, यह एक प्रश्न की तरह है, मैं componentDidUpdate में डोम हेरफेर के बारे में एक चर्चा खोलना चाहता हूं।

मैं एक प्रतिक्रिया प्लगइन बना रहा हूँ। इसे कुछ DOM गणनाएँ करनी पड़ती हैं, क्योंकि CSS इतना शक्तिशाली नहीं है कि वह सब कुछ कवर कर सके जो इस प्लगइन को करने की आवश्यकता है। समस्या यह है कि मुझे उसी घटक द्वारा प्रदान किए गए कुछ अन्य डीओएम तत्व के getBoundingClientRect() के वापसी मूल्य के आधार पर कुछ सीएसएस गुणों को समायोजित करने की आवश्यकता है ।

तो तकनीकी रूप से हमारे पास 3 विकल्प हैं:

1) getBoundingClientRect गणना componentDidUpdate और परिकलित मानों के साथ setState कॉल करें। मैं अनंत लूप से डरता हूं जो कुछ मामलों में हो सकता है, इसलिए मैं इसके लिए नहीं जाऊंगा।

2) इसे 1 में पसंद करें) और shouldComponentUpdate साथ थोड़ा खेलें, लेकिन यह बहुत जटिल और पठनीय नहीं लगता है। बहुत सारे प्रश्न सामने आते हैं जो निश्चित उपयोग के मामले पर निर्भर होते हैं।

3) कंपोनेंटडिडअपडेट से डोम अपडेट करें। यह वह समाधान है जिसके लिए मैंने जाने का फैसला किया है, यह काम करता है, यह सरल, स्थिर है और इरादा के अनुसार काम करता है। हालांकि मुझे लगता है कि मैं किनारे पर हूं, इसलिए मैं दोबारा जांचना चाहता था कि यह चीजों को करने का एक ठीक तरीका है। क्या 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}/>
   ...
   );
}