Loading...

React in Hindi – Reconciliation

  • Introduction to react reconciliation in Hindi
  • React diffing algorithm in Hindi

Introduction to React Reconciliation

कुछ समय React को use करने के बाद आप पाते है की render() function React elements का एक tree create करता है। जब भी props या state update होती है तो render() function एक अलग tree return करता है।

React को UI को इस प्रकार update करने की आवश्यकता होती है की वह कम से कम changes किए बिना most recent React tree से match हो जाए। यानी की minimum number of operations generate करके एक tree को दूसरे tree में transform कर दिया जाए।

इस algorithmic problem के कई solutions available है। लेकिन इन algorithms की complexity बहुत अधिक है। ऐसे में यदि React tree में elements की संख्या अधिक है तो बहुत अधिक comparisons की आवश्यकता होती है। इससे application की performance पर असर पड़ता है।

लेकिन इन algorithms की बजाय React एक heuristic O(n) algorithm implement करती है। यह algorithm दो assumptions पर आधारित है।

  1. दो अलग type के elements अलग अलग trees produce करेंगे।
  2. एक key prop के द्वारा developer यह hint दे सकता है की अलग अलग renders के दौरान child elements stable रहेंगे।

ये दोनो assumptions हर प्रकार के use case के लिए valid है।

The Diffing Algorithm

Diffing algorithm old और new दो React trees को differentiate करती है। इस algorithm में सबसे पहले दोनो trees के root elements को compare किया जाता है।

यदि दोनो trees के root elements एक ही type के है तो इसका अर्थ है की दोनो trees में समानता है और आगे के elements को compare किया जा सकता है।

लेकिन यदि दोनो root elements अलग अलग type के है तो इस algorithm की first assumption के आधार पर निर्णय लिया जाता है की दोनो trees पूरी तरह अलग है और आगे के elements को compare करने की आवश्यकता नहीं है।

When Root Elements are of Different Type

जब भी दोनो root elements अलग अलग type के होते है तो React द्वारा old tree destroy कर दिया जाता है और उसकी जगह एक नया tree शुरुआत से build किया जाता है। इसे full rebuild कहा जाता है।

उदाहरण के लिए इस code को देखिए।

<div>
  <button />
</div>

यदि आप इसे update करके नीचे दिए गए code के रूप में render करवाते है तो इस situation में full rebuild perform किया जाएगा।

<span>
  <button />
</span>

जब old tree को destroy किया जाता है तो उसकी सभी DOM nodes destroy कर दी जाती है और component instances को unmount कर दिया जाता है।

Old tree में root element के under दिए गए दूसरे components भी destroy कर दिए जाते है और उनकी states lost हो जाती है।

जब नया React tree build किया जाता है तो नयी DOM nodes insert की जाती है और नए component instances को mount किया जाता है।

When DOM Root Elements are of Same Type

जब दोनो trees के root elements DOM elements है और same type के है तो React उन दोनो root elements के attributes को देखती है। इस situation में React DOM node वही रखती है और सिर्फ़ change किए गए attributes को ही update करती है।

<div class='site' title='header' />

<div class='site' title='article' />

ऊपर दिए गए दोनो दोनो nodes को compare करते समय React को पता होता है की सिर्फ़ title attribute ही change हुआ है। इसलिए React पूरे DOM node को change नहीं करती है सिर्फ़ title attribute को update करती है।

यदि elements पर style apply की गयी है तो उस situation में भी केवल उन्हीं styles को update करती है जिन्हें change किया गया है।

When Component Root Elements are of Same Type

जब दोनो trees के root elements component elements है और same type के है तो ऐसे में component instance same होता है। Component की state अलग अलग renders के दौरान maintain की जाती है।

React पुराने component instance की props को update करती है ताकि वह नए element से match कर सके। साथ React पुराने component instance पर componentWillReceiveProps() और componentWillUpdate() methods call करती है।

Rebuilding Children

जब React एक DOM node के children को rebuild करती है तो वह दोनो trees में same time पर children’s को iterate करती है और जब भी उन children में difference पाया जाता है तो tree को update किया जाता है।

उदाहरण के लिए इस code को देखिए।

<div>
  <span>One</span>
  <span>Two</span>
</div>

मान लीजिए इस code को नीचे दिए गए code से replace कर दिया जाता है।

<div>
  <span>One</span>
  <span>Two</span>
  <span>Three</span>
</div>

जब React द्वारा दोनो DOM elements के children को iterate किया जाता है तो first और second <span> elements को update करने के बाद React third <span> element को नए DOM tree में insert कर देती है।

किसी children element को आख़िर में add करने पर आसानी से React उसे handle कर लेती है।

<div>
  <span>Three</span>    <!-- Inserting new children at beginning 
  <span>One</span>           creates performance issues. -->
  <span>Two</span>
</div>

लेकिन जब एक नया children element शुरुआत में ही add कर दिया जाता है तो React सभी children elements को update करती है। हालाँकि ऐसा करना ज़रूरी नहीं है। इससे application की performance पर बुरा असर पड़ता है।

Keys

ऊपर explain की गयी problem को keys के माध्यम से solve किया जा सकता है। React आपको key attribute provide करती है। इस attribute को आप सभी child elements पर define कर सकते है।

जब सभी children elements की keys होती है तो React keys के माध्यम से पूरे tree को नए tree से match करने का प्रयास करती है। सिर्फ़ keys में बदलाव आने पर ही children को change किया जाता है। Keys के प्रयोग से React tree conversion efficient हो जाता है।

<div>
  <span key="3">Three</span>    <!-- No issue as children updation will be based on
  <span key="1">One</span>           keys. -->
  <span key="2">Two</span>
</div>

यदि childrens अधिक है तो manually keys define करने के बजाय आप उनकी id को keys के roop में use कर सकते है। बस आपको इतना ध्यान रखना है सभी children elements की keys unique होनी चाहिए।

Drawbacks

Diffing algorithm को constantly improve किया जा रहा है ताकि इसे और fast बनाया जा सके। इस algorithm दो मुख्य drawbacks है।

  1. दो अलग अलग type के components के subtrees को compare नहीं किया जाएगा। यदि आपके components का type अलग है और output same है तो बेहतर यही होगा की आप उनको एक ही type का बनाए।
  2. Children elements की keys stable और unique होनी चाहिए। यदि keys stable नहीं होती है, यानी की यदि keys हर render के दौरान change हो जाती है तो हर बार सभी children elements को rerender किया जाएगा। Keys सभी renders के दौरान constant होनी चाहिए। ताकि सिर्फ़ उसी element को rerender किया जा सके जिसकी की सही में change हुई है।

इन दोनो drawbacks को छोड़कर diffing algorithm में कोई भी drawback नहीं है जो application की performance को effect करता है।