ರಿಯಾಕ್ಟ್ ರಿಕನ್ಸಿಲಿಯೇಶನ್: ವರ್ಚುವಲ್ DOM ಡಿಫಿಂಗ್ ಅಲ್ಗಾರಿದಮ್ ಅನ್ನು ಅನಾವರಣಗೊಳಿಸುವುದು

ರಿಯಾಕ್ಟ್, ಯೂಸರ್ ಇಂಟರ್‌ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಬಳಸುವ ಜನಪ್ರಿಯ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿಯಾಗಿದ್ದು, ತನ್ನ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ದಕ್ಷತೆಗೆ ರಿಕನ್ಸಿಲಿಯೇಶನ್ ಎಂಬ ಪ್ರಕ್ರಿಯೆಗೆ ಋಣಿಯಾಗಿದೆ. ರಿಕನ್ಸಿಲಿಯೇಶನ್‌ನ ಹೃದಯಭಾಗದಲ್ಲಿ ವರ್ಚುವಲ್ DOM ಡಿಫಿಂಗ್ ಅಲ್ಗಾರಿದಮ್ ಇದೆ, ಇದು ನಿಜವಾದ DOM (ಡಾಕ್ಯುಮೆಂಟ್ ಆಬ್ಜೆಕ್ಟ್ ಮಾಡೆಲ್) ಅನ್ನು ಅತ್ಯಂತ ದಕ್ಷ ರೀತಿಯಲ್ಲಿ ಹೇಗೆ ಅಪ್‌ಡೇಟ್ ಮಾಡಬೇಕೆಂದು ನಿರ್ಧರಿಸುವ ಒಂದು ಅತ್ಯಾಧುನಿಕ ಯಾಂತ್ರಿಕತೆಯಾಗಿದೆ. ಈ ಲೇಖನವು ರಿಯಾಕ್ಟ್‌ನ ರಿಕನ್ಸಿಲಿಯೇಶನ್ ಪ್ರಕ್ರಿಯೆಯ ಬಗ್ಗೆ ಆಳವಾದ ವಿವರಣೆಯನ್ನು ನೀಡುತ್ತದೆ, ವರ್ಚುವಲ್ DOM, ಡಿಫಿಂಗ್ ಅಲ್ಗಾರಿದಮ್, ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸಲು ಪ್ರಾಯೋಗಿಕ ತಂತ್ರಗಳನ್ನು ವಿವರಿಸುತ್ತದೆ.

ವರ್ಚುವಲ್ DOM ಎಂದರೇನು?

ವರ್ಚುವಲ್ DOM (VDOM) ಎಂಬುದು ನಿಜವಾದ DOM ನ ಒಂದು ಹಗುರವಾದ, ಇನ್-ಮೆಮೊರಿ ಪ್ರತಿನಿಧಿಯಾಗಿದೆ. ಇದನ್ನು ನಿಜವಾದ ಯೂಸರ್ ಇಂಟರ್‌ಫೇಸ್‌ನ ನೀಲನಕ್ಷೆ ಎಂದು ಭಾವಿಸಿ. ಬ್ರೌಸರ್‌ನ DOM ಅನ್ನು ನೇರವಾಗಿ ಬದಲಾಯಿಸುವ ಬದಲು, ರಿಯಾಕ್ಟ್ ಈ ವರ್ಚುವಲ್ ಪ್ರತಿನಿಧಿತ್ವದೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ. ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ ಡೇಟಾ ಬದಲಾದಾಗ, ಹೊಸ ವರ್ಚುವಲ್ DOM ಟ್ರೀ ರಚನೆಯಾಗುತ್ತದೆ. ನಂತರ ಈ ಹೊಸ ಟ್ರೀಯನ್ನು ಹಿಂದಿನ ವರ್ಚುವಲ್ DOM ಟ್ರೀಯೊಂದಿಗೆ ಹೋಲಿಸಲಾಗುತ್ತದೆ.

ವರ್ಚುವಲ್ DOM ಬಳಸುವುದರ ಪ್ರಮುಖ ಪ್ರಯೋಜನಗಳು:

• ಸುಧಾರಿತ ಕಾರ್ಯಕ್ಷಮತೆ: ನಿಜವಾದ DOM ಅನ್ನು ನೇರವಾಗಿ ಬದಲಾಯಿಸುವುದು ದುಬಾರಿಯಾಗಿದೆ. ನೇರ DOM ಮ್ಯಾನಿಪ್ಯುಲೇಷನ್‌ಗಳನ್ನು ಕಡಿಮೆ ಮಾಡುವ ಮೂಲಕ, ರಿಯಾಕ್ಟ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಹೆಚ್ಚಿಸುತ್ತದೆ.
• ಕ್ರಾಸ್-ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಹೊಂದಾಣಿಕೆ: VDOM, ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಬ್ರೌಸರ್‌ಗಳು, ಮೊಬೈಲ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು (ರಿಯಾಕ್ಟ್ ನೇಟಿವ್), ಮತ್ತು ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್ (Next.js) ನಂತಹ ವಿವಿಧ ಪರಿಸರಗಳಲ್ಲಿ ರೆಂಡರ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ.
• ಸರಳೀಕೃತ ಅಭಿವೃದ್ಧಿ: ಡೆವಲಪರ್‌ಗಳು DOM ಮ್ಯಾನಿಪ್ಯುಲೇಷನ್‌ನ ಸಂಕೀರ್ಣತೆಗಳ ಬಗ್ಗೆ ಚಿಂತಿಸದೆ ಅಪ್ಲಿಕೇಶನ್ ಲಾಜಿಕ್‌ನ ಮೇಲೆ ಗಮನಹರಿಸಬಹುದು.

ರಿಕನ್ಸಿಲಿಯೇಶನ್ ಪ್ರಕ್ರಿಯೆ: ರಿಯಾಕ್ಟ್ DOM ಅನ್ನು ಹೇಗೆ ಅಪ್‌ಡೇಟ್ ಮಾಡುತ್ತದೆ

ರಿಕನ್ಸಿಲಿಯೇಶನ್ ಎಂಬುದು ರಿಯಾಕ್ಟ್ ವರ್ಚುವಲ್ DOM ಅನ್ನು ನಿಜವಾದ DOM ನೊಂದಿಗೆ ಸಿಂಕ್ರೊನೈಸ್ ಮಾಡುವ ಪ್ರಕ್ರಿಯೆಯಾಗಿದೆ. ಕಾಂಪೊನೆಂಟ್‌ನ ಸ್ಟೇಟ್ ಬದಲಾದಾಗ, ರಿಯಾಕ್ಟ್ ಈ ಕೆಳಗಿನ ಹಂತಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ:

1. ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಮರು-ರೆಂಡರ್ ಮಾಡುವುದು: ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಮರು-ರೆಂಡರ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಹೊಸ ವರ್ಚುವಲ್ DOM ಟ್ರೀಯನ್ನು ರಚಿಸುತ್ತದೆ.
2. ಹೊಸ ಮತ್ತು ಹಳೆಯ ಟ್ರೀಗಳನ್ನು ಹೋಲಿಸುವುದು (ಡಿಫಿಂಗ್): ರಿಯಾಕ್ಟ್ ಹೊಸ ವರ್ಚುವಲ್ DOM ಟ್ರೀಯನ್ನು ಹಿಂದಿನದರೊಂದಿಗೆ ಹೋಲಿಸುತ್ತದೆ. ಇಲ್ಲಿಯೇ ಡಿಫಿಂಗ್ ಅಲ್ಗಾರಿದಮ್ ಬಳಕೆಯಾಗುತ್ತದೆ.
3. ಕನಿಷ್ಠ ಬದಲಾವಣೆಗಳ ಗುಂಪನ್ನು ನಿರ್ಧರಿಸುವುದು: ಡಿಫಿಂಗ್ ಅಲ್ಗಾರಿದಮ್ ನಿಜವಾದ DOM ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಲು ಅಗತ್ಯವಿರುವ ಕನಿಷ್ಠ ಬದಲಾವಣೆಗಳ ಗುಂಪನ್ನು ಗುರುತಿಸುತ್ತದೆ.
4. ಬದಲಾವಣೆಗಳನ್ನು ಅನ್ವಯಿಸುವುದು (ಕಮಿಟಿಂಗ್): ರಿಯಾಕ್ಟ್ ಕೇವಲ ಆ ನಿರ್ದಿಷ್ಟ ಬದಲಾವಣೆಗಳನ್ನು ಮಾತ್ರ ನಿಜವಾದ DOM ಗೆ ಅನ್ವಯಿಸುತ್ತದೆ.

ಡಿಫಿಂಗ್ ಅಲ್ಗಾರಿದಮ್: ನಿಯಮಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ಡಿಫಿಂಗ್ ಅಲ್ಗಾರಿದಮ್ ರಿಯಾಕ್ಟ್‌ನ ರಿಕನ್ಸಿಲಿಯೇಶನ್ ಪ್ರಕ್ರಿಯೆಯ ತಿರುಳಾಗಿದೆ. DOM ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಲು ಅತ್ಯಂತ ದಕ್ಷ ಮಾರ್ಗವನ್ನು ಕಂಡುಹಿಡಿಯಲು ಇದು ಹ್ಯೂರಿಸ್ಟಿಕ್ಸ್ ಅನ್ನು ಬಳಸುತ್ತದೆ. ಇದು ಪ್ರತಿ ಸಂದರ್ಭದಲ್ಲೂ ಸಂಪೂರ್ಣ ಕನಿಷ್ಠ ಸಂಖ್ಯೆಯ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ಖಾತರಿಪಡಿಸದಿದ್ದರೂ, ಹೆಚ್ಚಿನ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ ಅತ್ಯುತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ಅಲ್ಗಾರಿದಮ್ ಈ ಕೆಳಗಿನ ಊಹೆಗಳ ಅಡಿಯಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ:

• ವಿಭಿನ್ನ ಪ್ರಕಾರದ ಎರಡು ಎಲಿಮೆಂಟ್‌ಗಳು ವಿಭಿನ್ನ ಟ್ರೀಗಳನ್ನು ಉತ್ಪಾದಿಸುತ್ತವೆ: ಎರಡು ಎಲಿಮೆಂಟ್‌ಗಳು ವಿಭಿನ್ನ ಪ್ರಕಾರಗಳನ್ನು ಹೊಂದಿರುವಾಗ (ಉದಾಹರಣೆಗೆ, <div> ಅನ್ನು <span> ನಿಂದ ಬದಲಾಯಿಸಿದಾಗ), ರಿಯಾಕ್ಟ್ ಹಳೆಯ ನೋಡ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಹೊಸದರೊಂದಿಗೆ ಬದಲಾಯಿಸುತ್ತದೆ.
• key ಪ್ರಾಪ್: ಮಕ್ಕಳ ಪಟ್ಟಿಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ, ಯಾವ ಐಟಂಗಳು ಬದಲಾಗಿವೆ, ಸೇರಿಸಲ್ಪಟ್ಟಿವೆ, ಅಥವಾ ತೆಗೆದುಹಾಕಲ್ಪಟ್ಟಿವೆ ಎಂಬುದನ್ನು ಗುರುತಿಸಲು ರಿಯಾಕ್ಟ್ key ಪ್ರಾಪ್ ಅನ್ನು ಅವಲಂಬಿಸಿದೆ. ಕೀಗಳಿಲ್ಲದೆ, ಕೇವಲ ಒಂದು ಐಟಂ ಬದಲಾಗಿದ್ದರೂ ಸಹ, ರಿಯಾಕ್ಟ್ ಇಡೀ ಪಟ್ಟಿಯನ್ನು ಮರು-ರೆಂಡರ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ.

ಡಿಫಿಂಗ್ ಅಲ್ಗಾರಿದಮ್‌ನ ವಿವರವಾದ ವಿವರಣೆ

ಡಿಫಿಂಗ್ ಅಲ್ಗಾರಿದಮ್ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನಾವು ಹೆಚ್ಚು ವಿವರವಾಗಿ ನೋಡೋಣ:

1. ಎಲಿಮೆಂಟ್ ಪ್ರಕಾರದ ಹೋಲಿಕೆ: ಮೊದಲು, ರಿಯಾಕ್ಟ್ ಎರಡು ಟ್ರೀಗಳ ರೂಟ್ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಹೋಲಿಸುತ್ತದೆ. ಅವುಗಳು ವಿಭಿನ್ನ ಪ್ರಕಾರಗಳನ್ನು ಹೊಂದಿದ್ದರೆ, ರಿಯಾಕ್ಟ್ ಹಳೆಯ ಟ್ರೀಯನ್ನು ಕೆಡವಿ ಹೊಸ ಟ್ರೀಯನ್ನು ಮೊದಲಿನಿಂದ ನಿರ್ಮಿಸುತ್ತದೆ. ಇದು ಹಳೆಯ DOM ನೋಡ್ ಅನ್ನು ತೆಗೆದುಹಾಕುವುದು ಮತ್ತು ಹೊಸ ಎಲಿಮೆಂಟ್ ಪ್ರಕಾರದೊಂದಿಗೆ ಹೊಸ DOM ನೋಡ್ ಅನ್ನು ರಚಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ.
2. DOM ಪ್ರಾಪರ್ಟಿ ಅಪ್‌ಡೇಟ್‌ಗಳು: ಎಲಿಮೆಂಟ್ ಪ್ರಕಾರಗಳು ಒಂದೇ ಆಗಿದ್ದರೆ, ರಿಯಾಕ್ಟ್ ಎರಡು ಎಲಿಮೆಂಟ್‌ಗಳ ಆಟ್ರಿಬ್ಯೂಟ್‌ಗಳನ್ನು (ಪ್ರಾಪ್ಸ್) ಹೋಲಿಸುತ್ತದೆ. ಯಾವ ಆಟ್ರಿಬ್ಯೂಟ್‌ಗಳು ಬದಲಾಗಿವೆ ಎಂಬುದನ್ನು ಇದು ಗುರುತಿಸುತ್ತದೆ ಮತ್ತು ನಿಜವಾದ DOM ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿ ಕೇವಲ ಆ ಆಟ್ರಿಬ್ಯೂಟ್‌ಗಳನ್ನು ಮಾತ್ರ ಅಪ್‌ಡೇಟ್ ಮಾಡುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, <div> ಎಲಿಮೆಂಟ್‌ನ className ಪ್ರಾಪ್ ಬದಲಾಗಿದ್ದರೆ, ರಿಯಾಕ್ಟ್ ಸಂಬಂಧಿತ DOM ನೋಡ್‌ನಲ್ಲಿ className ಆಟ್ರಿಬ್ಯೂಟ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡುತ್ತದೆ.
3. ಕಾಂಪೊನೆಂಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳು: ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಎದುರಿಸಿದಾಗ, ಅದು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಪುನರಾವರ್ತಿತವಾಗಿ ಅಪ್‌ಡೇಟ್ ಮಾಡುತ್ತದೆ. ಇದು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಮರು-ರೆಂಡರ್ ಮಾಡುವುದು ಮತ್ತು ಕಾಂಪೊನೆಂಟ್‌ನ ಔಟ್‌ಪುಟ್‌ಗೆ ಡಿಫಿಂಗ್ ಅಲ್ಗಾರಿದಮ್ ಅನ್ನು ಅನ್ವಯಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ.
4. ಪಟ್ಟಿಯ ಡಿಫಿಂಗ್ (ಕೀಗಳನ್ನು ಬಳಸಿ): ಮಕ್ಕಳ ಪಟ್ಟಿಗಳನ್ನು ದಕ್ಷತೆಯಿಂದ ಡಿಫ್ ಮಾಡುವುದು ಕಾರ್ಯಕ್ಷಮತೆಗೆ ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಪಟ್ಟಿಯನ್ನು ರೆಂಡರ್ ಮಾಡುವಾಗ, ರಿಯಾಕ್ಟ್ ಪ್ರತಿ ಮಗುವಿಗೆ ಒಂದು ವಿಶಿಷ್ಟ key ಪ್ರಾಪ್ ಇರಬೇಕೆಂದು ನಿರೀಕ್ಷಿಸುತ್ತದೆ. key ಪ್ರಾಪ್ ರಿಯಾಕ್ಟ್‌ಗೆ ಯಾವ ಐಟಂಗಳನ್ನು ಸೇರಿಸಲಾಗಿದೆ, ತೆಗೆದುಹಾಕಲಾಗಿದೆ, ಅಥವಾ ಮರುಕ್ರಮಗೊಳಿಸಲಾಗಿದೆ ಎಂಬುದನ್ನು ಗುರುತಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಉದಾಹರಣೆ: ಕೀಗಳೊಂದಿಗೆ (Keys) ಮತ್ತು ಕೀಗಳಿಲ್ಲದೆ ಡಿಫಿಂಗ್

ಕೀಗಳಿಲ್ಲದೆ:

// ಆರಂಭಿಕ ರೆಂಡರ್
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

// ಆರಂಭದಲ್ಲಿ ಒಂದು ಐಟಂ ಸೇರಿಸಿದ ನಂತರ
<ul>
  <li>Item 0</li>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

ಕೀಗಳಿಲ್ಲದೆ, ರಿಯಾಕ್ಟ್ ಎಲ್ಲಾ ಮೂರು ಐಟಂಗಳು ಬದಲಾಗಿವೆ ಎಂದು ಭಾವಿಸುತ್ತದೆ. ಕೇವಲ ಒಂದು ಹೊಸ ಐಟಂ ಅನ್ನು ಸೇರಿಸಲಾಗಿದ್ದರೂ ಸಹ, ಅದು ಪ್ರತಿ ಐಟಂನ DOM ನೋಡ್‌ಗಳನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡುತ್ತದೆ. ಇದು ಅದಕ್ಷವಾಗಿದೆ.

ಕೀಗಳೊಂದಿಗೆ:

// ಆರಂಭಿಕ ರೆಂಡರ್
<ul>
  <li key="item1">Item 1</li>
  <li key="item2">Item 2</li>
</ul>

// ಆರಂಭದಲ್ಲಿ ಒಂದು ಐಟಂ ಸೇರಿಸಿದ ನಂತರ
<ul>
  <li key="item0">Item 0</li>
  <li key="item1">Item 1</li>
  <li key="item2">Item 2</li>
</ul>

ಕೀಗಳೊಂದಿಗೆ, "item0" ಒಂದು ಹೊಸ ಐಟಂ ಎಂದು ರಿಯಾಕ್ಟ್ ಸುಲಭವಾಗಿ ಗುರುತಿಸುತ್ತದೆ, ಮತ್ತು "item1" ಹಾಗೂ "item2" ಕೇವಲ ಕೆಳಗೆ ಸರಿಸಲ್ಪಟ್ಟಿವೆ. ಇದು ಕೇವಲ ಹೊಸ ಐಟಂ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ ಮತ್ತು ಅಸ್ತಿತ್ವದಲ್ಲಿರುವವುಗಳನ್ನು ಮರುಕ್ರಮಗೊಳಿಸುತ್ತದೆ, ಇದರಿಂದಾಗಿ ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆ ಉಂಟಾಗುತ್ತದೆ.

ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳು

ರಿಯಾಕ್ಟ್‌ನ ರಿಕನ್ಸಿಲಿಯೇಶನ್ ಪ್ರಕ್ರಿಯೆ ದಕ್ಷವಾಗಿದ್ದರೂ, ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಮತ್ತಷ್ಟು ಉತ್ತಮಗೊಳಿಸಲು ನೀವು ಬಳಸಬಹುದಾದ ಹಲವಾರು ತಂತ್ರಗಳಿವೆ:

• ಕೀಗಳನ್ನು ಸರಿಯಾಗಿ ಬಳಸಿ: ಮೇಲೆ ತೋರಿಸಿದಂತೆ, ಮಕ್ಕಳ ಪಟ್ಟಿಗಳನ್ನು ರೆಂಡರ್ ಮಾಡುವಾಗ ಕೀಗಳನ್ನು ಬಳಸುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಯಾವಾಗಲೂ ವಿಶಿಷ್ಟ ಮತ್ತು ಸ್ಥಿರವಾದ ಕೀಗಳನ್ನು ಬಳಸಿ. ಅರೇಯ ಇಂಡೆಕ್ಸ್ ಅನ್ನು ಕೀ ಆಗಿ ಬಳಸುವುದು ಸಾಮಾನ್ಯವಾಗಿ ಒಂದು ಆಂಟಿ-ಪ್ಯಾಟರ್ನ್ ಆಗಿದೆ, ಏಕೆಂದರೆ ಪಟ್ಟಿಯನ್ನು ಮರುಕ್ರಮಗೊಳಿಸಿದಾಗ ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು.
• ಅನಗತ್ಯ ರೀ-ರೆಂಡರ್‌ಗಳನ್ನು ತಪ್ಪಿಸಿ: ಕಾಂಪೊನೆಂಟ್‌ಗಳು ತಮ್ಮ ಪ್ರಾಪ್ಸ್ ಅಥವಾ ಸ್ಟೇಟ್ ನಿಜವಾಗಿಯೂ ಬದಲಾದಾಗ ಮಾತ್ರ ಮರು-ರೆಂಡರ್ ಆಗುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಅನಗತ್ಯ ರೀ-ರೆಂಡರ್‌ಗಳನ್ನು ತಡೆಯಲು ನೀವು React.memo, PureComponent, ಮತ್ತು shouldComponentUpdate ನಂತಹ ತಂತ್ರಗಳನ್ನು ಬಳಸಬಹುದು.
• ಇಮ್ಮ್ಯೂಟಬಲ್ ಡೇಟಾ ಸ್ಟ್ರಕ್ಚರ್‌ಗಳನ್ನು ಬಳಸಿ: ಇಮ್ಮ್ಯೂಟಬಲ್ ಡೇಟಾ ಸ್ಟ್ರಕ್ಚರ್‌ಗಳು ಬದಲಾವಣೆಗಳನ್ನು ಪತ್ತೆಹಚ್ಚುವುದನ್ನು ಮತ್ತು ಆಕಸ್ಮಿಕ ಮ್ಯುಟೇಷನ್‌ಗಳನ್ನು ತಡೆಯುವುದನ್ನು ಸುಲಭಗೊಳಿಸುತ್ತವೆ. Immutable.js ನಂತಹ ಲೈಬ್ರರಿಗಳು ಸಹಾಯಕವಾಗಬಹುದು.
• ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್: ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಸಣ್ಣ ತುಂಡುಗಳಾಗಿ ವಿಂಗಡಿಸಿ ಮತ್ತು ಅವುಗಳನ್ನು ಬೇಡಿಕೆಯ ಮೇರೆಗೆ ಲೋಡ್ ಮಾಡಿ. ಇದು ಆರಂಭಿಕ ಲೋಡ್ ಸಮಯವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ಒಟ್ಟಾರೆ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ. ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು React.lazy ಮತ್ತು Suspense ಉಪಯುಕ್ತವಾಗಿವೆ.
• ಮೆಮೊಯೈಸೇಶನ್: ದುಬಾರಿ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ಅಥವಾ ಫಂಕ್ಷನ್ ಕರೆಗಳನ್ನು ಅನಗತ್ಯವಾಗಿ ಮರು ಲೆಕ್ಕಾಚಾರ ಮಾಡುವುದನ್ನು ತಪ್ಪಿಸಲು ಮೆಮೊಯೈಸ್ ಮಾಡಿ. ಮೆಮೊಯೈಸ್ಡ್ ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ರಚಿಸಲು Reselect ನಂತಹ ಲೈಬ್ರರಿಗಳನ್ನು ಬಳಸಬಹುದು.
• ದೀರ್ಘ ಪಟ್ಟಿಗಳನ್ನು ವರ್ಚುವಲೈಸ್ ಮಾಡಿ: ಬಹಳ ದೀರ್ಘವಾದ ಪಟ್ಟಿಗಳನ್ನು ರೆಂಡರ್ ಮಾಡುವಾಗ, ವರ್ಚುವಲೈಸೇಶನ್ ತಂತ್ರಗಳನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ. ವರ್ಚುವಲೈಸೇಶನ್ ಪ್ರಸ್ತುತ ಪರದೆಯ ಮೇಲೆ ಗೋಚರಿಸುವ ಐಟಂಗಳನ್ನು ಮಾತ್ರ ರೆಂಡರ್ ಮಾಡುತ್ತದೆ, ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸುತ್ತದೆ. react-window ಮತ್ತು react-virtualized ನಂತಹ ಲೈಬ್ರರಿಗಳನ್ನು ಈ ಉದ್ದೇಶಕ್ಕಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ.
• ಡಿಬೌನ್ಸಿಂಗ್ ಮತ್ತು ಥ್ರಾಟ್ಲಿಂಗ್: ನೀವು ಸ್ಕ್ರಾಲ್ ಅಥವಾ ರೀಸೈಜ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳಂತಹ ಆಗಾಗ್ಗೆ ಕರೆಯಲ್ಪಡುವ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ಹೊಂದಿದ್ದರೆ, ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವ ಸಂಖ್ಯೆಯನ್ನು ಸೀಮಿತಗೊಳಿಸಲು ಡಿಬೌನ್ಸಿಂಗ್ ಅಥವಾ ಥ್ರಾಟ್ಲಿಂಗ್ ಅನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ. ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ತಡೆಯಬಹುದು.

ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಸನ್ನಿವೇಶಗಳು

ಈ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳನ್ನು ಹೇಗೆ ಅನ್ವಯಿಸಬಹುದು ಎಂಬುದನ್ನು ವಿವರಿಸಲು ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ಪರಿಗಣಿಸೋಣ.

ಉದಾಹರಣೆ 1: React.memo ಬಳಸಿ ಅನಗತ್ಯ ರೀ-ರೆಂಡರ್‌ಗಳನ್ನು ತಡೆಯುವುದು

ಬಳಕೆದಾರರ ಮಾಹಿತಿಯನ್ನು ಪ್ರದರ್ಶಿಸುವ ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಈ ಕಾಂಪೊನೆಂಟ್ ಬಳಕೆದಾರರ ಹೆಸರು ಮತ್ತು ವಯಸ್ಸನ್ನು ಪ್ರಾಪ್ಸ್ ಆಗಿ ಪಡೆಯುತ್ತದೆ. ಬಳಕೆದಾರರ ಹೆಸರು ಮತ್ತು ವಯಸ್ಸು ಬದಲಾಗದಿದ್ದರೆ, ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಮರು-ರೆಂಡರ್ ಮಾಡುವ ಅಗತ್ಯವಿಲ್ಲ. ಅನಗತ್ಯ ರೀ-ರೆಂಡರ್‌ಗಳನ್ನು ತಡೆಯಲು ನೀವು React.memo ಅನ್ನು ಬಳಸಬಹುದು.

import React from 'react';

const UserInfo = React.memo(function UserInfo(props) {
  console.log('Rendering UserInfo component');
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
});

export default UserInfo;

React.memo ಕಾಂಪೊನೆಂಟ್‌ನ ಪ್ರಾಪ್ಸ್‌ಗಳನ್ನು ಆಳವಿಲ್ಲದೆ ಹೋಲಿಸುತ್ತದೆ. ಪ್ರಾಪ್ಸ್‌ಗಳು ಒಂದೇ ಆಗಿದ್ದರೆ, ಅದು ರೀ-ರೆಂಡರ್ ಅನ್ನು ಬಿಟ್ಟುಬಿಡುತ್ತದೆ.

ಉದಾಹರಣೆ 2: ಇಮ್ಮ್ಯೂಟಬಲ್ ಡೇಟಾ ಸ್ಟ್ರಕ್ಚರ್‌ಗಳನ್ನು ಬಳಸುವುದು

ಐಟಂಗಳ ಪಟ್ಟಿಯನ್ನು ಪ್ರಾಪ್ ಆಗಿ ಪಡೆಯುವ ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಪರಿಗಣಿಸಿ. ಪಟ್ಟಿಯನ್ನು ನೇರವಾಗಿ ಬದಲಾಯಿಸಿದರೆ, ರಿಯಾಕ್ಟ್ ಬದಲಾವಣೆಯನ್ನು ಪತ್ತೆಹಚ್ಚದಿರಬಹುದು ಮತ್ತು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಮರು-ರೆಂಡರ್ ಮಾಡದಿರಬಹುದು. ಇಮ್ಮ್ಯೂಟಬಲ್ ಡೇಟಾ ಸ್ಟ್ರಕ್ಚರ್‌ಗಳನ್ನು ಬಳಸುವುದರಿಂದ ಈ ಸಮಸ್ಯೆಯನ್ನು ತಡೆಯಬಹುದು.

import React from 'react';
import { List } from 'immutable';

function ItemList(props) {
  console.log('Rendering ItemList component');
  return (
    <ul>
      {props.items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default ItemList;

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, items ಪ್ರಾಪ್ Immutable.js ಲೈಬ್ರರಿಯಿಂದ ಇಮ್ಮ್ಯೂಟಬಲ್ ಪಟ್ಟಿಯಾಗಿರಬೇಕು. ಪಟ್ಟಿಯನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಿದಾಗ, ಹೊಸ ಇಮ್ಮ್ಯೂಟಬಲ್ ಪಟ್ಟಿ ರಚನೆಯಾಗುತ್ತದೆ, ಇದನ್ನು ರಿಯಾಕ್ಟ್ ಸುಲಭವಾಗಿ ಪತ್ತೆಹಚ್ಚಬಲ್ಲದು.

ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳು ಮತ್ತು ಅವುಗಳನ್ನು ತಪ್ಪಿಸುವುದು ಹೇಗೆ

ಹಲವಾರು ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳು ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್ ಕಾರ್ಯಕ್ಷಮತೆಗೆ ಅಡ್ಡಿಯಾಗಬಹುದು. ಈ ತಪ್ಪುಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಂಡು ಅವುಗಳನ್ನು ತಪ್ಪಿಸುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ.

• ಸ್ಟೇಟ್ ಅನ್ನು ನೇರವಾಗಿ ಬದಲಾಯಿಸುವುದು: ಕಾಂಪೊನೆಂಟ್‌ನ ಸ್ಟೇಟ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಲು ಯಾವಾಗಲೂ setState ಮೆಥಡ್ ಅನ್ನು ಬಳಸಿ. ಸ್ಟೇಟ್ ಅನ್ನು ನೇರವಾಗಿ ಬದಲಾಯಿಸುವುದರಿಂದ ಅನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು.
• shouldComponentUpdate (ಅಥವಾ ಸಮಾನ) ಅನ್ನು ನಿರ್ಲಕ್ಷಿಸುವುದು: ಸೂಕ್ತವಾದಾಗ shouldComponentUpdate ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸದಿರುವುದು (ಅಥವಾ React.memo/PureComponent ಅನ್ನು ಬಳಸದಿರುವುದು) ಅನಗತ್ಯ ರೀ-ರೆಂಡರ್‌ಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು.
• ರೆಂಡರ್‌ನಲ್ಲಿ ಇನ್‌ಲೈನ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಬಳಸುವುದು: ರೆಂಡರ್ ಮೆಥಡ್‌ನಲ್ಲಿ ಹೊಸ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ರಚಿಸುವುದು ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಅನಗತ್ಯ ರೀ-ರೆಂಡರ್‌ಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು. ಈ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಮೆಮೊಯೈಸ್ ಮಾಡಲು useCallback ಬಳಸಿ.
• ಮೆಮೊರಿ ಸೋರಿಕೆ: ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದಾಗ ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳು ಅಥವಾ ಟೈಮರ್‌ಗಳನ್ನು ಕ್ಲೀನ್ ಅಪ್ ಮಾಡಲು ವಿಫಲವಾದರೆ ಮೆಮೊರಿ ಸೋರಿಕೆಗೆ ಕಾರಣವಾಗಬಹುದು ಮತ್ತು ಕಾಲಾನಂತರದಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಕುಗ್ಗಿಸಬಹುದು.
• ಅದಕ್ಷ ಅಲ್ಗಾರಿದಮ್‌ಗಳು: ಹುಡುಕಾಟ ಅಥವಾ ವಿಂಗಡಣೆಯಂತಹ ಕಾರ್ಯಗಳಿಗಾಗಿ ಅದಕ್ಷ ಅಲ್ಗಾರಿದಮ್‌ಗಳನ್ನು ಬಳಸುವುದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರಬಹುದು. ಕೈಯಲ್ಲಿರುವ ಕಾರ್ಯಕ್ಕೆ ಸೂಕ್ತವಾದ ಅಲ್ಗಾರಿದಮ್‌ಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಿ.

ರಿಯಾಕ್ಟ್ ಡೆವಲಪ್‌ಮೆಂಟ್‌ಗಾಗಿ ಜಾಗತಿಕ ಪರಿಗಣನೆಗಳು

ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸುವಾಗ, ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಪರಿಗಣಿಸಿ:

• ಅಂತಾರಾಷ್ಟ್ರೀಕರಣ (i18n) ಮತ್ತು ಸ್ಥಳೀಕರಣ (l10n): ಬಹು ಭಾಷೆಗಳು ಮತ್ತು ಪ್ರಾದೇಶಿಕ ಸ್ವರೂಪಗಳನ್ನು ಬೆಂಬಲಿಸಲು react-intl ಅಥವಾ i18next ನಂತಹ ಲೈಬ್ರರಿಗಳನ್ನು ಬಳಸಿ.
• ಬಲದಿಂದ ಎಡಕ್ಕೆ (RTL) ಲೇಔಟ್: ಅರೇಬಿಕ್ ಮತ್ತು ಹೀಬ್ರೂ ನಂತಹ RTL ಭಾಷೆಗಳನ್ನು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಬೆಂಬಲಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• ಪ್ರವೇಶಿಸುವಿಕೆ (a11y): ಪ್ರವೇಶಿಸುವಿಕೆ ಮಾರ್ಗಸೂಚಿಗಳನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ವಿಕಲಾಂಗ ಬಳಕೆದಾರರಿಗೆ ಪ್ರವೇಶಿಸುವಂತೆ ಮಾಡಿ. ಸೆಮ್ಯಾಂಟಿಕ್ HTML ಬಳಸಿ, ಚಿತ್ರಗಳಿಗೆ ಪರ್ಯಾಯ ಪಠ್ಯವನ್ನು ಒದಗಿಸಿ, ಮತ್ತು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಕೀಬೋರ್ಡ್ ಮೂಲಕ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• ಕಡಿಮೆ-ಬ್ಯಾಂಡ್‌ವಿಡ್ತ್ ಬಳಕೆದಾರರಿಗಾಗಿ ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್: ನಿಧಾನಗತಿಯ ಇಂಟರ್ನೆಟ್ ಸಂಪರ್ಕ ಹೊಂದಿರುವ ಬಳಕೆದಾರರಿಗಾಗಿ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ. ಲೋಡ್ ಸಮಯವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್, ಇಮೇಜ್ ಆಪ್ಟಿಮೈಸೇಶನ್, ಮತ್ತು ಕ್ಯಾಶಿಂಗ್ ಬಳಸಿ.
• ಟೈಮ್ ಝೋನ್‌ಗಳು ಮತ್ತು ದಿನಾಂಕ/ಸಮಯ ಫಾರ್ಮ್ಯಾಟಿಂಗ್: ಬಳಕೆದಾರರು ತಮ್ಮ ಸ್ಥಳವನ್ನು ಲೆಕ್ಕಿಸದೆ ಸರಿಯಾದ ಮಾಹಿತಿಯನ್ನು ನೋಡುತ್ತಾರೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಟೈಮ್ ಝೋನ್‌ಗಳು ಮತ್ತು ದಿನಾಂಕ/ಸಮಯ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಅನ್ನು ಸರಿಯಾಗಿ ನಿರ್ವಹಿಸಿ. Moment.js ಅಥವಾ date-fns ನಂತಹ ಲೈಬ್ರರಿಗಳು ಸಹಾಯಕವಾಗಬಹುದು.

ತೀರ್ಮಾನ

ರಿಯಾಕ್ಟ್‌ನ ರಿಕನ್ಸಿಲಿಯೇಶನ್ ಪ್ರಕ್ರಿಯೆ ಮತ್ತು ವರ್ಚುವಲ್ DOM ಡಿಫಿಂಗ್ ಅಲ್ಗಾರಿದಮ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಹೆಚ್ಚಿನ-ಕಾರ್ಯಕ್ಷಮತೆಯ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಅತ್ಯಗತ್ಯ. ಕೀಗಳನ್ನು ಸರಿಯಾಗಿ ಬಳಸುವ ಮೂಲಕ, ಅನಗತ್ಯ ರೀ-ರೆಂಡರ್‌ಗಳನ್ನು ತಡೆಯುವ ಮೂಲಕ, ಮತ್ತು ಇತರ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳನ್ನು ಅನ್ವಯಿಸುವ ಮೂಲಕ, ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಸ್ಪಂದಿಸುವಿಕೆಯನ್ನು ನೀವು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸಬಹುದು. ವೈವಿಧ್ಯಮಯ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸುವಾಗ ಅಂತಾರಾಷ್ಟ್ರೀಕರಣ, ಪ್ರವೇಶಿಸುವಿಕೆ, ಮತ್ತು ಕಡಿಮೆ-ಬ್ಯಾಂಡ್‌ವಿಡ್ತ್ ಬಳಕೆದಾರರಿಗಾಗಿ ಕಾರ್ಯಕ್ಷಮತೆಯಂತಹ ಜಾಗತಿಕ ಅಂಶಗಳನ್ನು ಪರಿಗಣಿಸಲು ಮರೆಯದಿರಿ.

ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ ರಿಯಾಕ್ಟ್ ರಿಕನ್ಸಿಲಿಯೇಶನ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಒಂದು ದೃಢವಾದ ಅಡಿಪಾಯವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಈ ತತ್ವಗಳು ಮತ್ತು ತಂತ್ರಗಳನ್ನು ಅನ್ವಯಿಸುವ ಮೂಲಕ, ನೀವು ಎಲ್ಲರಿಗೂ ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ನೀಡುವ ದಕ್ಷ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯುಳ್ಳ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು.