ರಿಯಾಕ್ಟ್ ಫೈಬರ್‌ನ ಸಂಕೀರ್ಣತೆಗಳನ್ನು ಅನ್ವೇಷಿಸಿ, ಅದರ ಕ್ರಾಂತಿಕಾರಿ ರಿಕನ್ಸಿಲಿಯೇಶನ್ ಅಲ್ಗಾರಿದಮ್, ಕನ್‌ಕರೆನ್ಸಿ, ಶೆಡ್ಯೂಲಿಂಗ್, ಮತ್ತು ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಸುಗಮವಾದ, ಸ್ಪಂದನಾಶೀಲ ಬಳಕೆದಾರ ಇಂಟರ್‌ಫೇಸ್‌ಗಳನ್ನು ಹೇಗೆ ಸಶಕ್ತಗೊಳಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ತಿಳಿಯಿರಿ.
ರಿಯಾಕ್ಟ್ ಫೈಬರ್: ಜಾಗತಿಕ UI ಶ್ರೇಷ್ಠತೆಗಾಗಿ ರಿಕನ್ಸಿಲಿಯೇಶನ್ ಅಲ್ಗಾರಿದಮ್‌ನ ಆಳವಾದ ನೋಟ
ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್‌ನ ಕ್ರಿಯಾತ್ಮಕ ಜಗತ್ತಿನಲ್ಲಿ, ಸುಗಮ ಮತ್ತು ಸ್ಪಂದನಾಶೀಲ ಇಂಟರ್‌ಫೇಸ್‌ಗಳಿಗಾಗಿ ಬಳಕೆದಾರರ ನಿರೀಕ್ಷೆಗಳು ನಿರಂತರವಾಗಿ ಹೆಚ್ಚುತ್ತಿವೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ನಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಶಕ್ತಿಯುತಗೊಳಿಸುವ ಮೂಲಭೂತ ತಂತ್ರಜ್ಞಾನಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಅತ್ಯಂತ ಮುಖ್ಯವಾಗಿದೆ. ಬಳಕೆದಾರ ಇಂಟರ್‌ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಪ್ರಮುಖ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿಯಾದ ರಿಯಾಕ್ಟ್, ರಿಯಾಕ್ಟ್ ಫೈಬರ್ ಅನ್ನು ಪರಿಚಯಿಸುವ ಮೂಲಕ ಮಹತ್ವದ ವಾಸ್ತುಶಿಲ್ಪದ ಬದಲಾವಣೆಗೆ ಒಳಗಾಯಿತು. ಇದು ಕೇವಲ ಆಂತರಿಕ ಬದಲಾವಣೆಯಲ್ಲ; ಇದು ರಿಯಾಕ್ಟ್ ಬದಲಾವಣೆಗಳನ್ನು ಹೇಗೆ ರಿಕನ್ಸೈಲ್ ಮಾಡುತ್ತದೆ ಎಂಬುದನ್ನು ಮೂಲಭೂತವಾಗಿ ಬದಲಾಯಿಸಿದ ಒಂದು ಕ್ರಾಂತಿಕಾರಿ ಹೆಜ್ಜೆಯಾಗಿದೆ, ಮತ್ತು ಕನ್‌ಕರೆಂಟ್ ಮೋಡ್ (Concurrent Mode) ಮತ್ತು ಸಸ್ಪೆನ್ಸ್ (Suspense) ನಂತಹ ಶಕ್ತಿಯುತ ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳಿಗೆ ದಾರಿ ಮಾಡಿಕೊಟ್ಟಿತು.
ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ ರಿಯಾಕ್ಟ್ ಫೈಬರ್‌ನ ಆಳಕ್ಕೆ ಇಳಿದು, ಅದರ ರಿಕನ್ಸಿಲಿಯೇಶನ್ ಅಲ್ಗಾರಿದಮ್ ಅನ್ನು ಸರಳವಾಗಿ ವಿವರಿಸುತ್ತದೆ. ಫೈಬರ್ ಏಕೆ ಅಗತ್ಯವಾಗಿತ್ತು, ಅದು ತೆರೆಮರೆಯಲ್ಲಿ ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ, ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಬಳಕೆದಾರರ ಅನುಭವದ ಮೇಲೆ ಅದರ ಆಳವಾದ ಪ್ರಭಾವ, ಮತ್ತು ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಇದರ ಅರ್ಥವೇನು ಎಂಬುದನ್ನು ನಾವು ಅನ್ವೇಷಿಸುತ್ತೇವೆ.
ರಿಯಾಕ್ಟ್‌ನ ವಿಕಾಸ: ಫೈಬರ್ ಏಕೆ ಅತ್ಯಗತ್ಯವಾಯಿತು
ಫೈಬರ್ಗೆ ಮೊದಲು, ರಿಯಾಕ್ಟ್‌ನ ರಿಕನ್ಸಿಲಿಯೇಶನ್ ಪ್ರಕ್ರಿಯೆ (ಅಪ್ಲಿಕೇಶನ್ ಸ್ಥಿತಿಯಲ್ಲಿನ ಬದಲಾವಣೆಗಳನ್ನು ಪ್ರತಿಬಿಂಬಿಸಲು DOM ಅನ್ನು ಹೇಗೆ ಅಪ್‌ಡೇಟ್ ಮಾಡುತ್ತದೆ) ಹೆಚ್ಚಾಗಿ ಸಿಂಕ್ರೋನಸ್ ಆಗಿತ್ತು. ಇದು ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯನ್ನು ಕ್ರಮಿಸಿ, ವ್ಯತ್ಯಾಸಗಳನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಿ, ಮತ್ತು ಒಂದೇ, ಅಡೆತಡೆಯಿಲ್ಲದ ಪಾಸ್‌ನಲ್ಲಿ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಅನ್ವಯಿಸುತ್ತಿತ್ತು. ಸಣ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಇದು ಸಮರ್ಥವಾಗಿದ್ದರೂ, ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಸಂಕೀರ್ಣತೆ ಮತ್ತು ಸಂವಾದಾತ್ಮಕ ಬೇಡಿಕೆಗಳಲ್ಲಿ ಬೆಳೆದಂತೆ ಈ ವಿಧಾನವು ಗಮನಾರ್ಹ ಮಿತಿಗಳನ್ನು ಹೊಂದಿತ್ತು:
- ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸುವುದು: ದೊಡ್ಡ ಅಥವಾ ಸಂಕೀರ್ಣವಾದ ಅಪ್‌ಡೇಟ್‌ಗಳು ಬ್ರೌಸರ್‌ನ ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸುತ್ತಿದ್ದವು, ಇದು UI ಜ್ಯಾಂಕ್, ಫ್ರೇಮ್‌ಗಳು ಡ್ರಾಪ್ ಆಗುವುದು, ಮತ್ತು ನಿಧಾನಗತಿಯ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಕಾರಣವಾಗುತ್ತಿತ್ತು. ಜಾಗತಿಕ ಇ-ಕಾಮರ್ಸ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಸಂಕೀರ್ಣ ಫಿಲ್ಟರ್ ಕಾರ್ಯಾಚರಣೆಯನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುವುದನ್ನು ಅಥವಾ ಸಹಯೋಗಿ ಡಾಕ್ಯುಮೆಂಟ್ ಎಡಿಟರ್ ನೈಜ-ಸಮಯದ ಬದಲಾವಣೆಗಳನ್ನು ಖಂಡಗಳಾದ್ಯಂತ ಸಿಂಕ್ ಮಾಡುವುದನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ; ನಿಂತುಹೋದ UI ಸ್ವೀಕಾರಾರ್ಹವಲ್ಲ.
- ಆದ್ಯತೆಯ ಕೊರತೆ: ಎಲ್ಲಾ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಸಮಾನವಾಗಿ ಪರಿಗಣಿಸಲಾಗುತ್ತಿತ್ತು. ಒಂದು ಪ್ರಮುಖ ಬಳಕೆದಾರ ಇನ್‌ಪುಟ್ (ಸರ್ಚ್ ಬಾರ್‌ನಲ್ಲಿ ಟೈಪ್ ಮಾಡುವಂತಹದ್ದು) ಕಡಿಮೆ ತುರ್ತಾದ ಹಿನ್ನೆಲೆ ಡೇಟಾ ಫೆಚ್‌ನಿಂದ ವಿಳಂಬವಾಗಬಹುದು, ಇದು ಬಳಕೆದಾರರಲ್ಲಿ ಹತಾಶೆಯನ್ನು ಉಂಟುಮಾಡುತ್ತಿತ್ತು.
- ಸೀಮಿತ ಅಡಚಣೆ ಸಾಧ್ಯತೆ: ಒಮ್ಮೆ ಅಪ್‌ಡೇಟ್ ಪ್ರಾರಂಭವಾದರೆ, ಅದನ್ನು ವಿರಾಮಗೊಳಿಸಲು ಅಥವಾ ಪುನರಾರಂಭಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತಿರಲಿಲ್ಲ. ಇದು ಟೈಮ್-ಸ್ಲೈಸಿಂಗ್ ಅಥವಾ ತುರ್ತು ಕಾರ್ಯಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡುವಂತಹ ಸುಧಾರಿತ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಕಷ್ಟಕರವಾಗಿಸಿತ್ತು.
- ಅಸಿಂಕ್ರೋನಸ್ UI ಪ್ಯಾಟರ್ನ್‌ಗಳೊಂದಿಗೆ ತೊಂದರೆ: ಡೇಟಾ ಫೆಚಿಂಗ್ ಮತ್ತು ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳನ್ನು ಸರಾಗವಾಗಿ ನಿರ್ವಹಿಸಲು ಸಂಕೀರ್ಣ ಪರಿಹಾರಗಳು ಬೇಕಾಗಿದ್ದವು, ಇದು ಆಗಾಗ್ಗೆ ವಾಟರ್‌ಫಾಲ್‌ಗಳಿಗೆ ಅಥವಾ ಆದರ್ಶವಲ್ಲದ ಬಳಕೆದಾರರ ಹರಿವುಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತಿತ್ತು.
ರಿಯಾಕ್ಟ್ ತಂಡವು ಈ ಮಿತಿಗಳನ್ನು ಗುರುತಿಸಿ, ಕೋರ್ ರಿಕನ್ಸೈಲರ್ ಅನ್ನು ಪುನರ್ನಿರ್ಮಿಸಲು ಬಹು-ವರ್ಷದ ಯೋಜನೆಯನ್ನು ಕೈಗೊಂಡಿತು. ಇದರ ಫಲಿತಾಂಶವೇ ಫೈಬರ್, ಇದು ಇಂಕ್ರಿಮೆಂಟಲ್ ರೆಂಡರಿಂಗ್, ಕನ್‌ಕರೆನ್ಸಿ, ಮತ್ತು ರೆಂಡರಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯ ಮೇಲೆ ಉತ್ತಮ ನಿಯಂತ್ರಣವನ್ನು ಬೆಂಬಲಿಸಲು ಮೊದಲಿನಿಂದಲೂ ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ಒಂದು ವಾಸ್ತುಶಿಲ್ಪವಾಗಿದೆ.
ಮೂಲ ಪರಿಕಲ್ಪನೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು: ಫೈಬರ್ ಎಂದರೇನು?
ಮೂಲಭೂತವಾಗಿ, ರಿಯಾಕ್ಟ್ ಫೈಬರ್ ಎಂಬುದು ರಿಯಾಕ್ಟ್‌ನ ಕೋರ್ ರಿಕನ್ಸಿಲಿಯೇಶನ್ ಅಲ್ಗಾರಿದಮ್‌ನ ಸಂಪೂರ್ಣ ಪುನರ್ಬರಹವಾಗಿದೆ. ಇದರ ಪ್ರಮುಖ ಆವಿಷ್ಕಾರವೆಂದರೆ ರೆಂಡರಿಂಗ್ ಕೆಲಸವನ್ನು ವಿರಾಮಗೊಳಿಸುವ, ನಿಲ್ಲಿಸುವ ಮತ್ತು ಪುನರಾರಂಭಿಸುವ ಸಾಮರ್ಥ್ಯ. ಇದನ್ನು ಸಾಧಿಸಲು, ಫೈಬರ್ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯ ಹೊಸ ಆಂತರಿಕ ನಿರೂಪಣೆಯನ್ನು ಮತ್ತು ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುವ ಹೊಸ ವಿಧಾನವನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ.
ಕೆಲಸದ ಘಟಕಗಳಾಗಿ ಫೈಬರ್‌ಗಳು
ಫೈಬರ್ ವಾಸ್ತುಶಿಲ್ಪದಲ್ಲಿ, ಪ್ರತಿಯೊಂದು ರಿಯಾಕ್ಟ್ ಎಲಿಮೆಂಟ್ (ಕಾಂಪೊನೆಂಟ್‌ಗಳು, DOM ನೋಡ್‌ಗಳು, ಇತ್ಯಾದಿ) ಒಂದು ಫೈಬರ್ಗೆ ಅನುರೂಪವಾಗಿದೆ. ಫೈಬರ್ ಒಂದು ಸರಳ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಆಬ್ಜೆಕ್ಟ್ ಆಗಿದ್ದು, ಇದು ಕೆಲಸದ ಒಂದು ಘಟಕವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಇದನ್ನು ವರ್ಚುವಲ್ ಸ್ಟಾಕ್ ಫ್ರೇಮ್ ಎಂದು ಯೋಚಿಸಿ, ಆದರೆ ಬ್ರೌಸರ್‌ನ ಕಾಲ್ ಸ್ಟಾಕ್‌ನಿಂದ ನಿರ್ವಹಿಸಲ್ಪಡುವ ಬದಲು, ಇದನ್ನು ರಿಯಾಕ್ಟ್ ಸ್ವತಃ ನಿರ್ವಹಿಸುತ್ತದೆ. ಪ್ರತಿಯೊಂದು ಫೈಬರ್ ಒಂದು ಕಾಂಪೊನೆಂಟ್, ಅದರ ಸ್ಥಿತಿ, ಪ್ರಾಪ್ಸ್, ಮತ್ತು ಇತರ ಫೈಬರ್‌ಗಳೊಂದಿಗಿನ ಅದರ ಸಂಬಂಧದ (ಪೋಷಕ, ಮಗು, ಸಹೋದರ) ಬಗ್ಗೆ ಮಾಹಿತಿಯನ್ನು ಸಂಗ್ರಹಿಸುತ್ತದೆ.
ರಿಯಾಕ್ಟ್ ಒಂದು ಅಪ್‌ಡೇಟ್ ಅನ್ನು ನಿರ್ವಹಿಸಬೇಕಾದಾಗ, ಅದು "ವರ್ಕ್-ಇನ್-ಪ್ರೋಗ್ರೆಸ್" ಟ್ರೀ ಎಂದು ಕರೆಯಲ್ಪಡುವ ಫೈಬರ್‌ಗಳ ಹೊಸ ಟ್ರೀಯನ್ನು ರಚಿಸುತ್ತದೆ. ನಂತರ ಅದು ಈ ಹೊಸ ಟ್ರೀಯನ್ನು ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ "ಕರೆಂಟ್" ಟ್ರೀಯೊಂದಿಗೆ ರಿಕನ್ಸೈಲ್ ಮಾಡುತ್ತದೆ, ನಿಜವಾದ DOMಗೆ ಯಾವ ಬದಲಾವಣೆಗಳನ್ನು ಅನ್ವಯಿಸಬೇಕು ಎಂಬುದನ್ನು ಗುರುತಿಸುತ್ತದೆ. ಈ ಸಂಪೂರ್ಣ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸಣ್ಣ, ಅಡಚಣೆ ಮಾಡಬಹುದಾದ ಕೆಲಸದ ತುಣುಕುಗಳಾಗಿ ವಿಭಜಿಸಲಾಗಿದೆ.
ಹೊಸ ಡೇಟಾ ರಚನೆ: ಲಿಂಕ್ಡ್ ಲಿಸ್ಟ್
ಮುಖ್ಯವಾಗಿ, ಫೈಬರ್‌ಗಳನ್ನು ಟ್ರೀ-ರೀತಿಯ ರಚನೆಯಲ್ಲಿ ಒಟ್ಟಿಗೆ ಜೋಡಿಸಲಾಗಿದೆ, ಆದರೆ ಆಂತರಿಕವಾಗಿ, ರಿಕನ್ಸಿಲಿಯೇಶನ್ ಸಮಯದಲ್ಲಿ ಸಮರ್ಥ ಸಂಚಾರಕ್ಕಾಗಿ ಅವು ಸಿಂಗ್ಲಿ ಲಿಂಕ್ಡ್ ಲಿಸ್ಟ್ ಅನ್ನು ಹೋಲುತ್ತವೆ. ಪ್ರತಿಯೊಂದು ಫೈಬರ್ ನೋಡ್ ಪಾಯಿಂಟರ್‌ಗಳನ್ನು ಹೊಂದಿರುತ್ತದೆ:
child: ಮೊದಲ ಚೈಲ್ಡ್ ಫೈಬರ್ಗೆ ಪಾಯಿಂಟ್ ಮಾಡುತ್ತದೆ.sibling: ಮುಂದಿನ ಸಹೋದರ ಫೈಬರ್ಗೆ ಪಾಯಿಂಟ್ ಮಾಡುತ್ತದೆ.return: ಪೋಷಕ ಫೈಬರ್ಗೆ ("ರಿಟರ್ನ್" ಫೈಬರ್) ಪಾಯಿಂಟ್ ಮಾಡುತ್ತದೆ.
ಈ ಲಿಂಕ್ಡ್ ಲಿಸ್ಟ್ ರಚನೆಯು ರಿಯಾಕ್ಟ್‌ಗೆ ಟ್ರೀಯನ್ನು ಡೆಪ್ತ್-ಫಸ್ಟ್ ಆಗಿ ಸಂಚರಿಸಲು ಮತ್ತು ನಂತರ ಹಿಂದೆ ಬರಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಯಾವುದೇ ಹಂತದಲ್ಲಿ ಸುಲಭವಾಗಿ ವಿರಾಮಗೊಳಿಸಲು ಮತ್ತು ಪುನರಾರಂಭಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ. ಈ ನಮ್ಯತೆಯೇ ಫೈಬರ್‌ನ ಕನ್‌ಕರೆಂಟ್ ಸಾಮರ್ಥ್ಯಗಳಿಗೆ ಪ್ರಮುಖವಾಗಿದೆ.
ಫೈಬರ್ ರಿಕನ್ಸಿಲಿಯೇಶನ್‌ನ ಎರಡು ಹಂತಗಳು
ಫೈಬರ್ ರಿಕನ್ಸಿಲಿಯೇಶನ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಎರಡು ವಿಭಿನ್ನ ಹಂತಗಳಾಗಿ ವಿಭಜಿಸುತ್ತದೆ, ಇದು ರಿಯಾಕ್ಟ್‌ಗೆ ಅಸಿಂಕ್ರೋನಸ್ ಆಗಿ ಕೆಲಸ ಮಾಡಲು ಮತ್ತು ಕಾರ್ಯಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ:
ಹಂತ 1: ರೆಂಡರ್/ರಿಕನ್ಸಿಲಿಯೇಶನ್ ಹಂತ (ವರ್ಕ್-ಇನ್-ಪ್ರೋಗ್ರೆಸ್ ಟ್ರೀ)
ಈ ಹಂತವನ್ನು "ವರ್ಕ್ ಲೂಪ್" ಅಥವಾ "ರೆಂಡರ್ ಹಂತ" ಎಂದೂ ಕರೆಯಲಾಗುತ್ತದೆ. ಇಲ್ಲಿ ರಿಯಾಕ್ಟ್ ಫೈಬರ್ ಟ್ರೀಯನ್ನು ಸಂಚರಿಸುತ್ತದೆ, ಡಿಫಿಂಗ್ ಅಲ್ಗಾರಿದಮ್ (ಬದಲಾವಣೆಗಳನ್ನು ಗುರುತಿಸುವುದು) ಅನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ, ಮತ್ತು UIಯ ಮುಂಬರುವ ಸ್ಥಿತಿಯನ್ನು ಪ್ರತಿನಿಧಿಸುವ ಹೊಸ ಫೈಬರ್ ಟ್ರೀಯನ್ನು (ವರ್ಕ್-ಇನ್-ಪ್ರೋಗ್ರೆಸ್ ಟ್ರೀ) ನಿರ್ಮಿಸುತ್ತದೆ. ಈ ಹಂತವು ಅಡಚಣೆ ಮಾಡಬಹುದಾದದ್ದು.
ಈ ಹಂತದಲ್ಲಿನ ಪ್ರಮುಖ ಕಾರ್ಯಾಚರಣೆಗಳು:
-
ಪ್ರಾಪ್ಸ್ ಮತ್ತು ಸ್ಟೇಟ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡುವುದು: ರಿಯಾಕ್ಟ್ ಪ್ರತಿಯೊಂದು ಕಾಂಪೊನೆಂಟ್‌ಗೆ ಹೊಸ ಪ್ರಾಪ್ಸ್ ಮತ್ತು ಸ್ಟೇಟ್ ಅನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುತ್ತದೆ,
getDerivedStateFromPropsನಂತಹ ಲೈಫ್‌ಸೈಕಲ್ ಮೆಥಡ್‌ಗಳನ್ನು ಅಥವಾ ಫಂಕ್ಷನಲ್ ಕಾಂಪೊನೆಂಟ್ ಬಾಡಿಗಳನ್ನು ಕರೆಯುತ್ತದೆ. -
ಮಕ್ಕಳನ್ನು ಡಿಫ್ ಮಾಡುವುದು: ಪ್ರತಿಯೊಂದು ಕಾಂಪೊನೆಂಟ್‌ಗೆ, ರಿಯಾಕ್ಟ್ ಅದರ ಪ್ರಸ್ತುತ ಮಕ್ಕಳನ್ನು ಹೊಸ ಮಕ್ಕಳೊಂದಿಗೆ (ರೆಂಡರಿಂಗ್‌ನಿಂದ) ಹೋಲಿಸಿ, ಏನನ್ನು ಸೇರಿಸಬೇಕು, ತೆಗೆದುಹಾಕಬೇಕು ಅಥವಾ ಅಪ್‌ಡೇಟ್ ಮಾಡಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. ಇಲ್ಲಿಯೇ ಪ್ರಸಿದ್ಧ "
key" ಪ್ರಾಪ್ ಪಟ್ಟಿಗಳ ಸಮರ್ಥ ರಿಕನ್ಸಿಲಿಯೇಶನ್‌ಗೆ ಅತ್ಯಗತ್ಯವಾಗುತ್ತದೆ. - ಸೈಡ್ ಎಫೆಕ್ಟ್‌ಗಳನ್ನು ಗುರುತಿಸುವುದು: ನಿಜವಾದ DOM ರೂಪಾಂತರಗಳನ್ನು ನಿರ್ವಹಿಸುವ ಅಥವಾ `componentDidMount`/`Update` ಅನ್ನು ತಕ್ಷಣವೇ ಕರೆಯುವ ಬದಲು, ಫೈಬರ್ ಫೈಬರ್ ನೋಡ್‌ಗಳನ್ನು "ಸೈಡ್ ಎಫೆಕ್ಟ್‌ಗಳೊಂದಿಗೆ" (ಉದಾ., `Placement`, `Update`, `Deletion`) ಗುರುತಿಸುತ್ತದೆ. ಈ ಎಫೆಕ್ಟ್‌ಗಳನ್ನು "ಎಫೆಕ್ಟ್ ಲಿಸ್ಟ್" ಅಥವಾ "ಅಪ್‌ಡೇಟ್ ಕ್ಯೂ" ಎಂಬ ಸಿಂಗ್ಲಿ ಲಿಂಕ್ಡ್ ಲಿಸ್ಟ್‌ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಲಾಗುತ್ತದೆ. ಈ ಪಟ್ಟಿಯು ರೆಂಡರ್ ಹಂತ ಪೂರ್ಣಗೊಂಡ ನಂತರ ನಡೆಯಬೇಕಾದ ಎಲ್ಲಾ ಅಗತ್ಯ DOM ಕಾರ್ಯಾಚರಣೆಗಳು ಮತ್ತು ಲೈಫ್‌ಸೈಕಲ್ ಕಾಲ್‌ಗಳನ್ನು ಸಂಗ್ರಹಿಸಲು ಒಂದು ಹಗುರವಾದ ಮಾರ್ಗವಾಗಿದೆ.
ಈ ಹಂತದಲ್ಲಿ, ರಿಯಾಕ್ಟ್ ನಿಜವಾದ DOM ಅನ್ನು ಮುಟ್ಟುವುದಿಲ್ಲ. ಇದು ಏನನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಲಾಗುವುದು ಎಂಬುದರ ನಿರೂಪಣೆಯನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ. ಈ ಪ್ರತ್ಯೇಕತೆಯು ಕನ್‌ಕರೆನ್ಸಿಗೆ ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಒಂದು ವೇಳೆ ಹೆಚ್ಚಿನ ಆದ್ಯತೆಯ ಅಪ್‌ಡೇಟ್ ಬಂದರೆ, ರಿಯಾಕ್ಟ್ ಭಾಗಶಃ ನಿರ್ಮಿಸಲಾದ ವರ್ಕ್-ಇನ್-ಪ್ರೋಗ್ರೆಸ್ ಟ್ರೀಯನ್ನು ತಿರಸ್ಕರಿಸಿ, ಹೆಚ್ಚು ತುರ್ತು ಕೆಲಸದೊಂದಿಗೆ ಪುನರಾರಂಭಿಸಬಹುದು, ಮತ್ತು ಇದು ಪರದೆಯ ಮೇಲೆ ಗೋಚರಿಸುವ ಅಸಂಗತತೆಗಳನ್ನು ಉಂಟುಮಾಡುವುದಿಲ್ಲ.
ಹಂತ 2: ಕಮಿಟ್ ಹಂತ (ಬದಲಾವಣೆಗಳನ್ನು ಅನ್ವಯಿಸುವುದು)
ಒಮ್ಮೆ ರೆಂಡರ್ ಹಂತ ಯಶಸ್ವಿಯಾಗಿ ಪೂರ್ಣಗೊಂಡ ನಂತರ, ಮತ್ತು ನಿರ್ದಿಷ್ಟ ಅಪ್‌ಡೇಟ್‌ಗಾಗಿ ಎಲ್ಲಾ ಕೆಲಸಗಳು ಪ್ರಕ್ರಿಯೆಗೊಂಡ ನಂತರ (ಅಥವಾ ಅದರ ಒಂದು ಭಾಗ), ರಿಯಾಕ್ಟ್ ಕಮಿಟ್ ಹಂತವನ್ನು ಪ್ರವೇಶಿಸುತ್ತದೆ. ಈ ಹಂತವು ಸಿಂಕ್ರೋನಸ್ ಮತ್ತು ಅಡೆತಡೆಯಿಲ್ಲದ್ದು. ಇಲ್ಲಿ ರಿಯಾಕ್ಟ್ ವರ್ಕ್-ಇನ್-ಪ್ರೋಗ್ರೆಸ್ ಟ್ರೀಯಿಂದ ಸಂಗ್ರಹಿಸಲಾದ ಸೈಡ್ ಎಫೆಕ್ಟ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಂಡು ಅವುಗಳನ್ನು ನಿಜವಾದ DOMಗೆ ಅನ್ವಯಿಸುತ್ತದೆ ಮತ್ತು ಸಂಬಂಧಿತ ಲೈಫ್‌ಸೈಕಲ್ ಮೆಥಡ್‌ಗಳನ್ನು ಕರೆಯುತ್ತದೆ.
ಈ ಹಂತದಲ್ಲಿನ ಪ್ರಮುಖ ಕಾರ್ಯಾಚರಣೆಗಳು:
- DOM ರೂಪಾಂತರಗಳು: ಹಿಂದಿನ ಹಂತದಲ್ಲಿ ಗುರುತಿಸಲಾದ `Placement`, `Update`, ಮತ್ತು `Deletion` ಎಫೆಕ್ಟ್‌ಗಳ ಆಧಾರದ ಮೇಲೆ ರಿಯಾಕ್ಟ್ ಎಲ್ಲಾ ಅಗತ್ಯ DOM ಮ್ಯಾನಿಪ್ಯುಲೇಷನ್‌ಗಳನ್ನು (ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಸೇರಿಸುವುದು, ತೆಗೆದುಹಾಕುವುದು, ಅಪ್‌ಡೇಟ್ ಮಾಡುವುದು) ನಿರ್ವಹಿಸುತ್ತದೆ.
- ಲೈಫ್‌ಸೈಕಲ್ ಮೆಥಡ್‌ಗಳು ಮತ್ತು ಹುಕ್ಸ್: ಈ ಸಮಯದಲ್ಲಿ `componentDidMount`, `componentDidUpdate`, `componentWillUnmount` (ತೆಗೆದುಹಾಕುವಿಕೆಗಾಗಿ), ಮತ್ತು `useLayoutEffect` ಕಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಕರೆಯಲಾಗುತ್ತದೆ. ಮುಖ್ಯವಾಗಿ, `useEffect` ಕಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಬ್ರೌಸರ್ ಪೇಂಟ್ ಮಾಡಿದ ನಂತರ ಚಲಾಯಿಸಲು ನಿಗದಿಪಡಿಸಲಾಗುತ್ತದೆ, ಇದು ಸೈಡ್ ಎಫೆಕ್ಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ನಾನ್-ಬ್ಲಾಕಿಂಗ್ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ.
ಕಮಿಟ್ ಹಂತವು ಸಿಂಕ್ರೋನಸ್ ಆಗಿರುವುದರಿಂದ, ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸುವುದನ್ನು ತಪ್ಪಿಸಲು ಇದು ಬೇಗನೆ ಪೂರ್ಣಗೊಳ್ಳಬೇಕು. ಇದಕ್ಕಾಗಿಯೇ ಫೈಬರ್ ರೆಂಡರ್ ಹಂತದಲ್ಲಿ ಎಲ್ಲಾ ಬದಲಾವಣೆಗಳನ್ನು ಪೂರ್ವ-ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ, ಇದರಿಂದ ಕಮಿಟ್ ಹಂತವು ಆ ಬದಲಾವಣೆಗಳ ವೇಗದ, ನೇರ ಅನ್ವಯವಾಗಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
ರಿಯಾಕ್ಟ್ ಫೈಬರ್‌ನ ಪ್ರಮುಖ ಆವಿಷ್ಕಾರಗಳು
ಎರಡು-ಹಂತದ ವಿಧಾನ ಮತ್ತು ಫೈಬರ್ ಡೇಟಾ ರಚನೆಯು ಹೊಸ ಸಾಮರ್ಥ್ಯಗಳ ಸಂಪತ್ತನ್ನು ತೆರೆಯುತ್ತದೆ:
ಕನ್‌ಕರೆನ್ಸಿ ಮತ್ತು ಅಡಚಣೆ (ಟೈಮ್ ಸ್ಲೈಸಿಂಗ್)
ಫೈಬರ್‌ನ ಅತ್ಯಂತ ಮಹತ್ವದ ಸಾಧನೆಯೆಂದರೆ ಕನ್‌ಕರೆನ್ಸಿಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುವುದು. ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಒಂದೇ ಬ್ಲಾಕ್ ಆಗಿ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುವ ಬದಲು, ಫೈಬರ್ ರೆಂಡರಿಂಗ್ ಕೆಲಸವನ್ನು ಸಣ್ಣ ಸಮಯದ ಘಟಕಗಳಾಗಿ (ಟೈಮ್ ಸ್ಲೈಸ್‌ಗಳು) ವಿಭಜಿಸಬಹುದು. ನಂತರ ಅದು ಯಾವುದೇ ಹೆಚ್ಚಿನ ಆದ್ಯತೆಯ ಕೆಲಸ ಲಭ್ಯವಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಬಹುದು. ಹಾಗಿದ್ದಲ್ಲಿ, ಅದು ಪ್ರಸ್ತುತ ಕಡಿಮೆ-ಆದ್ಯತೆಯ ಕೆಲಸವನ್ನು ವಿರಾಮಗೊಳಿಸಿ, ತುರ್ತು ಕೆಲಸಕ್ಕೆ ಬದಲಾಯಿಸಬಹುದು, ಮತ್ತು ನಂತರ ವಿರಾಮಗೊಳಿಸಿದ ಕೆಲಸವನ್ನು ಪುನರಾರಂಭಿಸಬಹುದು, ಅಥವಾ ಅದು ಇನ್ನು ಮುಂದೆ ಸಂಬಂಧಿಸದಿದ್ದರೆ ಅದನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ತಿರಸ್ಕರಿಸಬಹುದು.
ಇದನ್ನು `requestIdleCallback` ನಂತಹ ಬ್ರೌಸರ್ APIಗಳನ್ನು ಬಳಸಿ ಸಾಧಿಸಲಾಗುತ್ತದೆ (ಕಡಿಮೆ-ಆದ್ಯತೆಯ ಹಿನ್ನೆಲೆ ಕೆಲಸಕ್ಕಾಗಿ, ಆದರೂ ರಿಯಾಕ್ಟ್ ಸಾಮಾನ್ಯವಾಗಿ `MessageChannel` ಆಧಾರಿತ ಕಸ್ಟಮ್ ಶೆಡ್ಯೂಲರ್ ಅನ್ನು ಪರಿಸರಗಳಾದ್ಯಂತ ಹೆಚ್ಚು ವಿಶ್ವಾಸಾರ್ಹ ಶೆಡ್ಯೂಲಿಂಗ್‌ಗಾಗಿ ಬಳಸುತ್ತದೆ) ಇದು ಮುಖ್ಯ ಥ್ರೆಡ್ ನಿಷ್ಕ್ರಿಯವಾಗಿದ್ದಾಗ ರಿಯಾಕ್ಟ್‌ಗೆ ನಿಯಂತ್ರಣವನ್ನು ಬ್ರೌಸರ್‌ಗೆ ಹಿಂತಿರುಗಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಈ ಸಹಕಾರಿ ಮಲ್ಟಿಟಾಸ್ಕಿಂಗ್ ತುರ್ತು ಬಳಕೆದಾರರ ಸಂವಾದಗಳು (ಅನಿಮೇಷನ್‌ಗಳು ಅಥವಾ ಇನ್‌ಪುಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್‌ನಂತಹ) ಯಾವಾಗಲೂ ಆದ್ಯತೆ ಪಡೆಯುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಕಡಿಮೆ ಶಕ್ತಿಯುತ ಸಾಧನಗಳಲ್ಲಿ ಅಥವಾ ಹೆಚ್ಚಿನ ಲೋಡ್ ಅಡಿಯಲ್ಲಿಯೂ ಸಹ ಗ್ರಹಿಸಬಹುದಾದಷ್ಟು ಸುಗಮ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ.
ಆದ್ಯತೆ ಮತ್ತು ಶೆಡ್ಯೂಲಿಂಗ್
ಫೈಬರ್ ಒಂದು ದೃಢವಾದ ಆದ್ಯತಾ ವ್ಯವಸ್ಥೆಯನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ. ವಿವಿಧ ರೀತಿಯ ಅಪ್‌ಡೇಟ್‌ಗಳಿಗೆ ವಿಭಿನ್ನ ಆದ್ಯತೆಗಳನ್ನು ನಿಗದಿಪಡಿಸಬಹುದು:
- ತಕ್ಷಣ/ಸಿಂಕ್: ತಕ್ಷಣವೇ ನಡೆಯಬೇಕಾದ ನಿರ್ಣಾಯಕ ಅಪ್‌ಡೇಟ್‌ಗಳು (ಉದಾ., ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು).
- ಬಳಕೆದಾರರನ್ನು ನಿರ್ಬಂಧಿಸುವುದು: ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸುವ ಅಪ್‌ಡೇಟ್‌ಗಳು (ಉದಾ., ಟೆಕ್ಸ್ಟ್ ಇನ್‌ಪುಟ್).
- ಸಾಮಾನ್ಯ: ಪ್ರಮಾಣಿತ ರೆಂಡರಿಂಗ್ ಅಪ್‌ಡೇಟ್‌ಗಳು.
- ಕಡಿಮೆ: ಮುಂದೂಡಬಹುದಾದ ಕಡಿಮೆ ನಿರ್ಣಾಯಕ ಅಪ್‌ಡೇಟ್‌ಗಳು.
- ನಿಷ್ಕ್ರಿಯ: ಹಿನ್ನೆಲೆ ಕಾರ್ಯಗಳು.
ರಿಯಾಕ್ಟ್‌ನ ಆಂತರಿಕ Scheduler ಪ್ಯಾಕೇಜ್ ಈ ಆದ್ಯತೆಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ, ಮುಂದೆ ಯಾವ ಕೆಲಸವನ್ನು ನಿರ್ವಹಿಸಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. ವಿಭಿನ್ನ ನೆಟ್‌ವರ್ಕ್ ಪರಿಸ್ಥಿತಿಗಳು ಮತ್ತು ಸಾಧನ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಹೊಂದಿರುವ ಬಳಕೆದಾರರಿಗೆ ಸೇವೆ ಸಲ್ಲಿಸುವ ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ, ಈ ಬುದ್ಧಿವಂತ ಆದ್ಯತೆಯು ಸ್ಪಂದನಾಶೀಲತೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಲು ಅಮೂಲ್ಯವಾಗಿದೆ.
ಎರರ್ ಬೌಂಡರೀಸ್
ರೆಂಡರಿಂಗ್ ಅನ್ನು ಅಡ್ಡಿಪಡಿಸುವ ಮತ್ತು ಪುನರಾರಂಭಿಸುವ ಫೈಬರ್‌ನ ಸಾಮರ್ಥ್ಯವು ಹೆಚ್ಚು ದೃಢವಾದ ದೋಷ ನಿರ್ವಹಣಾ ಕಾರ್ಯವಿಧಾನವನ್ನು ಸಹ ಸಕ್ರಿಯಗೊಳಿಸಿದೆ: ಎರರ್ ಬೌಂಡರೀಸ್. ರಿಯಾಕ್ಟ್ ಎರರ್ ಬೌಂಡರಿ ಎಂಬುದು ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಆಗಿದ್ದು, ಅದು ತನ್ನ ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯಲ್ಲಿ ಎಲ್ಲಿಯಾದರೂ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ದೋಷಗಳನ್ನು ಹಿಡಿಯುತ್ತದೆ, ಆ ದೋಷಗಳನ್ನು ಲಾಗ್ ಮಾಡುತ್ತದೆ, ಮತ್ತು ಸಂಪೂರ್ಣ ಅಪ್ಲಿಕೇಶನ್ ಕ್ರ್ಯಾಶ್ ಆಗುವ ಬದಲು ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ಇದು ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಸ್ಥಿತಿಸ್ಥಾಪಕತ್ವವನ್ನು ಹೆಚ್ಚು ಹೆಚ್ಚಿಸುತ್ತದೆ, ಒಂದೇ ಕಾಂಪೊನೆಂಟ್ ದೋಷವು ವಿವಿಧ ಸಾಧನಗಳು ಮತ್ತು ಬ್ರೌಸರ್‌ಗಳಾದ್ಯಂತ ಸಂಪೂರ್ಣ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಅಡ್ಡಿಪಡಿಸುವುದನ್ನು ತಡೆಯುತ್ತದೆ.
ಸಸ್ಪೆನ್ಸ್ ಮತ್ತು ಅಸಿಂಕ್ರೋನಸ್ UI
ಫೈಬರ್‌ನ ಕನ್‌ಕರೆಂಟ್ ಸಾಮರ್ಥ್ಯಗಳ ಮೇಲೆ ನಿರ್ಮಿಸಲಾದ ಅತ್ಯಂತ ರೋಚಕ ವೈಶಿಷ್ಟ್ಯಗಳಲ್ಲಿ ಒಂದೆಂದರೆ ಸಸ್ಪೆನ್ಸ್. ಸಸ್ಪೆನ್ಸ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ರೆಂಡರಿಂಗ್ ಮಾಡುವ ಮೊದಲು ಯಾವುದಕ್ಕಾದರೂ "ಕಾಯಲು" ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ – ಸಾಮಾನ್ಯವಾಗಿ ಡೇಟಾ ಫೆಚಿಂಗ್, ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್, ಅಥವಾ ಇಮೇಜ್ ಲೋಡಿಂಗ್. ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಕಾಯುತ್ತಿರುವಾಗ, ಸಸ್ಪೆನ್ಸ್ ಫಾಲ್‌ಬ್ಯಾಕ್ ಲೋಡಿಂಗ್ UI ಅನ್ನು (ಉದಾ., ಸ್ಪಿನ್ನರ್) ಪ್ರದರ್ಶಿಸಬಹುದು. ಡೇಟಾ ಅಥವಾ ಕೋಡ್ ಸಿದ್ಧವಾದ ನಂತರ, ಕಾಂಪೊನೆಂಟ್ ರೆಂಡರ್ ಆಗುತ್ತದೆ. ಈ ಡಿಕ್ಲರೇಟಿವ್ ವಿಧಾನವು ಅಸಿಂಕ್ರೋನಸ್ UI ಪ್ಯಾಟರ್ನ್‌ಗಳನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸರಳಗೊಳಿಸುತ್ತದೆ ಮತ್ತು "ಲೋಡಿಂಗ್ ವಾಟರ್‌ಫಾಲ್‌ಗಳನ್ನು" ತೊಡೆದುಹಾಕಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ, ಇದು ವಿಶೇಷವಾಗಿ ನಿಧಾನಗತಿಯ ನೆಟ್‌ವರ್ಕ್‌ಗಳಲ್ಲಿರುವ ಬಳಕೆದಾರರಿಗೆ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಕುಗ್ಗಿಸಬಹುದು.
ಉದಾಹರಣೆಗೆ, ಜಾಗತಿಕ ಸುದ್ದಿ ಪೋರ್ಟಲ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಸಸ್ಪೆನ್ಸ್‌ನೊಂದಿಗೆ, ಒಂದು `NewsFeed` ಕಾಂಪೊನೆಂಟ್ ಅದರ ಲೇಖನಗಳನ್ನು ಫೆಚ್ ಮಾಡುವವರೆಗೆ ಸಸ್ಪೆಂಡ್ ಆಗಬಹುದು, ಸ್ಕೆಲಿಟನ್ ಲೋಡರ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ಒಂದು `AdBanner` ಕಾಂಪೊನೆಂಟ್ ಅದರ ಜಾಹೀರಾತು ವಿಷಯವನ್ನು ಲೋಡ್ ಮಾಡುವವರೆಗೆ ಸಸ್ಪೆಂಡ್ ಆಗಬಹುದು, ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಅನ್ನು ತೋರಿಸುತ್ತದೆ. ಇವು ಸ್ವತಂತ್ರವಾಗಿ ಲೋಡ್ ಆಗಬಹುದು, ಮತ್ತು ಬಳಕೆದಾರರು ಪ್ರಗತಿಶೀಲ, ಕಡಿಮೆ ಅಡಚಣೆಯುಳ್ಳ ಅನುಭವವನ್ನು ಪಡೆಯುತ್ತಾರೆ.
ಡೆವಲಪರ್‌ಗಳಿಗೆ ಪ್ರಾಯೋಗಿಕ ಪರಿಣಾಮಗಳು ಮತ್ತು ಪ್ರಯೋಜನಗಳು
ಫೈಬರ್‌ನ ವಾಸ್ತುಶಿಲ್ಪವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಮತ್ತು ಅದರ ಸಂಪೂರ್ಣ ಸಾಮರ್ಥ್ಯವನ್ನು ಬಳಸಿಕೊಳ್ಳಲು ಮೌಲ್ಯಯುತ ಒಳನೋಟಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ:
- ಸುಗಮ ಬಳಕೆದಾರ ಅನುಭವ: ಅತ್ಯಂತ ತಕ್ಷಣದ ಪ್ರಯೋಜನವೆಂದರೆ ಹೆಚ್ಚು ಸರಾಗ ಮತ್ತು ಸ್ಪಂದನಾಶೀಲ UI. ಬಳಕೆದಾರರು, ಅವರ ಸಾಧನ ಅಥವಾ ಇಂಟರ್ನೆಟ್ ವೇಗವನ್ನು ಲೆಕ್ಕಿಸದೆ, ಕಡಿಮೆ ಫ್ರೀಜ್‌ಗಳು ಮತ್ತು ಜ್ಯಾಂಕ್ ಅನ್ನು ಅನುಭವಿಸುತ್ತಾರೆ, ಇದು ಹೆಚ್ಚಿನ ತೃಪ್ತಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
- ವರ್ಧಿತ ಕಾರ್ಯಕ್ಷಮತೆ: ಬುದ್ಧಿವಂತಿಕೆಯಿಂದ ಕೆಲಸಕ್ಕೆ ಆದ್ಯತೆ ನೀಡಿ ಮತ್ತು ಶೆಡ್ಯೂಲ್ ಮಾಡುವ ಮೂಲಕ, ಫೈಬರ್ ನಿರ್ಣಾಯಕ ಅಪ್‌ಡೇಟ್‌ಗಳು (ಅನಿಮೇಷನ್‌ಗಳು ಅಥವಾ ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್‌ನಂತಹ) ಕಡಿಮೆ ತುರ್ತು ಕಾರ್ಯಗಳಿಂದ ನಿರ್ಬಂಧಿಸಲ್ಪಡುವುದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಇದು ಉತ್ತಮ ಗ್ರಹಿಸಿದ ಕಾರ್ಯಕ್ಷಮತೆಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
- ಸರಳೀಕೃತ ಅಸಿಂಕ್ರೋನಸ್ ಲಾಜಿಕ್: ಸಸ್ಪೆನ್ಸ್‌ನಂತಹ ವೈಶಿಷ್ಟ್ಯಗಳು ಡೆವಲಪರ್‌ಗಳು ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳು ಮತ್ತು ಅಸಿಂಕ್ರೋನಸ್ ಡೇಟಾವನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸುತ್ತಾರೆ ಎಂಬುದನ್ನು ತೀವ್ರವಾಗಿ ಸರಳಗೊಳಿಸುತ್ತವೆ, ಇದು ಸ್ವಚ್ಛ, ಹೆಚ್ಚು ನಿರ್ವಹಿಸಬಲ್ಲ ಕೋಡ್‌ಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
- ದೃಢವಾದ ದೋಷ ನಿರ್ವಹಣೆ: ಎರರ್ ಬೌಂಡರಿಗಳು ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಹೆಚ್ಚು ಸ್ಥಿತಿಸ್ಥಾಪಕವಾಗಿಸುತ್ತವೆ, ದುರಂತ ವೈಫಲ್ಯಗಳನ್ನು ತಡೆಯುತ್ತವೆ ಮತ್ತು ಆಕರ್ಷಕವಾದ ಡಿಗ್ರೇಡೇಶನ್ ಅನುಭವವನ್ನು ಒದಗಿಸುತ್ತವೆ.
- ಭವಿಷ್ಯ-ನಿರೋಧಕ: ಫೈಬರ್ ಭವಿಷ್ಯದ ರಿಯಾಕ್ಟ್ ವೈಶಿಷ್ಟ್ಯಗಳು ಮತ್ತು ಆಪ್ಟಿಮೈಸೇಷನ್‌ಗಳಿಗೆ ಅಡಿಪಾಯವಾಗಿದೆ, ಇಂದು ನಿರ್ಮಿಸಲಾದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಪರಿಸರ ವ್ಯವಸ್ಥೆ ವಿಕಸನಗೊಂಡಂತೆ ಹೊಸ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಸುಲಭವಾಗಿ ಅಳವಡಿಸಿಕೊಳ್ಳಬಹುದು ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
ರಿಕನ್ಸಿಲಿಯೇಶನ್ ಅಲ್ಗಾರಿದಮ್‌ನ ಕೋರ್ ಲಾಜಿಕ್‌ನ ಆಳವಾದ ನೋಟ
ರೆಂಡರ್ ಹಂತದಲ್ಲಿ ಫೈಬರ್ ಟ್ರೀಯೊಳಗೆ ರಿಯಾಕ್ಟ್ ಬದಲಾವಣೆಗಳನ್ನು ಹೇಗೆ ಗುರುತಿಸುತ್ತದೆ ಎಂಬುದರ ಕೋರ್ ಲಾಜಿಕ್ ಅನ್ನು ಸಂಕ್ಷಿಪ್ತವಾಗಿ ನೋಡೋಣ.
ಡಿಫಿಂಗ್ ಅಲ್ಗಾರಿದಮ್ ಮತ್ತು ಹ್ಯೂರಿಸ್ಟಿಕ್ಸ್ (`key` ಪ್ರಾಪ್‌ನ ಪಾತ್ರ)
ಪ್ರಸ್ತುತ ಫೈಬರ್ ಟ್ರೀಯನ್ನು ಹೊಸ ವರ್ಕ್-ಇನ್-ಪ್ರೋಗ್ರೆಸ್ ಟ್ರೀಯೊಂದಿಗೆ ಹೋಲಿಸುವಾಗ, ರಿಯಾಕ್ಟ್ ತನ್ನ ಡಿಫಿಂಗ್ ಅಲ್ಗಾರಿದಮ್‌ಗಾಗಿ ಕೆಲವು ಹ್ಯೂರಿಸ್ಟಿಕ್ಸ್‌ಗಳನ್ನು ಬಳಸುತ್ತದೆ:
- ವಿಭಿನ್ನ ಎಲಿಮೆಂಟ್ ಪ್ರಕಾರಗಳು: ಒಂದು ಎಲಿಮೆಂಟ್‌ನ `type` ಬದಲಾದರೆ (ಉದಾ., a `<div>` ಒಂದು `<p>` ಆದರೆ), ರಿಯಾಕ್ಟ್ ಹಳೆಯ ಕಾಂಪೊನೆಂಟ್/ಎಲಿಮೆಂಟ್ ಅನ್ನು ಕೆಡವಿ ಹೊಸದನ್ನು ಮೊದಲಿನಿಂದ ನಿರ್ಮಿಸುತ್ತದೆ. ಇದರರ್ಥ ಹಳೆಯ DOM ನೋಡ್ ಮತ್ತು ಅದರ ಎಲ್ಲಾ ಮಕ್ಕಳನ್ನು ನಾಶಪಡಿಸುವುದು.
- ಒಂದೇ ಎಲಿಮೆಂಟ್ ಪ್ರಕಾರ: `type` ಒಂದೇ ಆಗಿದ್ದರೆ, ರಿಯಾಕ್ಟ್ ಪ್ರಾಪ್ಸ್ ಅನ್ನು ನೋಡುತ್ತದೆ. ಇದು ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ DOM ನೋಡ್‌ನಲ್ಲಿ ಬದಲಾದ ಪ್ರಾಪ್ಸ್ ಅನ್ನು ಮಾತ್ರ ಅಪ್‌ಡೇಟ್ ಮಾಡುತ್ತದೆ. ಇದು ಅತ್ಯಂತ ಸಮರ್ಥ ಕಾರ್ಯಾಚರಣೆಯಾಗಿದೆ.
- ಮಕ್ಕಳ ಪಟ್ಟಿಗಳನ್ನು ರಿಕನ್ಸೈಲ್ ಮಾಡುವುದು (`key` ಪ್ರಾಪ್): ಇಲ್ಲಿಯೇ `key` ಪ್ರಾಪ್ ಅನಿವಾರ್ಯವಾಗುತ್ತದೆ. ಮಕ್ಕಳ ಪಟ್ಟಿಗಳನ್ನು ರಿಕನ್ಸೈಲ್ ಮಾಡುವಾಗ, ರಿಯಾಕ್ಟ್ `keys` ಅನ್ನು ಬಳಸಿ ಯಾವ ಐಟಂಗಳು ಬದಲಾಗಿವೆ, ಸೇರಿಸಲ್ಪಟ್ಟಿವೆ, ಅಥವಾ ತೆಗೆದುಹಾಕಲ್ಪಟ್ಟಿವೆ ಎಂಬುದನ್ನು ಗುರುತಿಸುತ್ತದೆ. `keys` ಇಲ್ಲದೆ, ರಿಯಾಕ್ಟ್ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಅಸಮರ್ಥವಾಗಿ ಮರು-ರೆಂಡರ್ ಮಾಡಬಹುದು ಅಥವಾ ಮರು-ಕ್ರಮಗೊಳಿಸಬಹುದು, ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳಿಗೆ ಅಥವಾ ಪಟ್ಟಿಗಳಲ್ಲಿ ಸ್ಟೇಟ್ ಬಗ್‌ಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು. ಒಂದು ಅನನ್ಯ, ಸ್ಥಿರವಾದ `key` (ಉದಾ., ಒಂದು ಡೇಟಾಬೇಸ್ ID, ಅರೇ ಇಂಡೆಕ್ಸ್ ಅಲ್ಲ) ರಿಯಾಕ್ಟ್‌ಗೆ ಹಳೆಯ ಪಟ್ಟಿಯಿಂದ ಹೊಸ ಪಟ್ಟಿಗೆ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ನಿಖರವಾಗಿ ಹೊಂದಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಸಮರ್ಥ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ.
ಫೈಬರ್‌ನ ವಿನ್ಯಾಸವು ಈ ಡಿಫಿಂಗ್ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ಇಂಕ್ರಿಮೆಂಟಲ್ ಆಗಿ ನಿರ್ವಹಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಅಗತ್ಯವಿದ್ದರೆ ವಿರಾಮಗೊಳಿಸಬಹುದು, ಇದು ಹಳೆಯ ಸ್ಟಾಕ್ ರಿಕನ್ಸೈಲರ್‌ನೊಂದಿಗೆ ಸಾಧ್ಯವಿರಲಿಲ್ಲ.
ಫೈಬರ್ ವಿವಿಧ ರೀತಿಯ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸುತ್ತದೆ
ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ಮರು-ರೆಂಡರ್ ಅನ್ನು ಪ್ರಚೋದಿಸುವ ಯಾವುದೇ ಬದಲಾವಣೆ (ಉದಾ., `setState`, `forceUpdate`, `useState` ಅಪ್‌ಡೇಟ್, `useReducer` ಡಿಸ್ಪ್ಯಾಚ್) ಹೊಸ ರಿಕನ್ಸಿಲಿಯೇಶನ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ. ಒಂದು ಅಪ್‌ಡೇಟ್ ಸಂಭವಿಸಿದಾಗ, ರಿಯಾಕ್ಟ್:
- ಕೆಲಸವನ್ನು ನಿಗದಿಪಡಿಸುತ್ತದೆ: ಅಪ್‌ಡೇಟ್ ಅನ್ನು ನಿರ್ದಿಷ್ಟ ಆದ್ಯತೆಯೊಂದಿಗೆ ಕ್ಯೂಗೆ ಸೇರಿಸಲಾಗುತ್ತದೆ.
- ಕೆಲಸವನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ: ಶೆಡ್ಯೂಲರ್ ತನ್ನ ಆದ್ಯತೆ ಮತ್ತು ಲಭ್ಯವಿರುವ ಟೈಮ್ ಸ್ಲೈಸ್‌ಗಳ ಆಧಾರದ ಮೇಲೆ ಅಪ್‌ಡೇಟ್ ಅನ್ನು ಯಾವಾಗ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲು ಪ್ರಾರಂಭಿಸಬೇಕು ಎಂದು ನಿರ್ಧರಿಸುತ್ತದೆ.
- ಫೈಬರ್‌ಗಳನ್ನು ಸಂಚರಿಸುತ್ತದೆ: ರಿಯಾಕ್ಟ್ ರೂಟ್ ಫೈಬರ್‌ನಿಂದ (ಅಥವಾ ಅಪ್‌ಡೇಟ್ ಆದ ಕಾಂಪೊನೆಂಟ್‌ನ ಹತ್ತಿರದ ಸಾಮಾನ್ಯ ಪೂರ್ವಜ) ಪ್ರಾರಂಭಿಸಿ ಕೆಳಮುಖವಾಗಿ ಸಂಚರಿಸುತ್ತದೆ.
- `beginWork` ಫಂಕ್ಷನ್: ಪ್ರತಿಯೊಂದು ಫೈಬರ್ಗೆ, ರಿಯಾಕ್ಟ್ `beginWork` ಫಂಕ್ಷನ್ ಅನ್ನು ಕರೆಯುತ್ತದೆ. ಈ ಫಂಕ್ಷನ್ ಚೈಲ್ಡ್ ಫೈಬರ್‌ಗಳನ್ನು ರಚಿಸಲು, ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಮಕ್ಕಳನ್ನು ರಿಕನ್ಸೈಲ್ ಮಾಡಲು, ಮತ್ತು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲು ಮುಂದಿನ ಚೈಲ್ಡ್‌ಗೆ ಪಾಯಿಂಟರ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸಲು ಜವಾಬ್ದಾರವಾಗಿರುತ್ತದೆ.
- `completeWork` ಫಂಕ್ಷನ್: ಒಂದು ಫೈಬರ್‌ನ ಎಲ್ಲಾ ಮಕ್ಕಳು ಪ್ರಕ್ರಿಯೆಗೊಂಡ ನಂತರ, ರಿಯಾಕ್ಟ್ ಆ ಫೈಬರ್ಗೆ `completeWork` ಅನ್ನು ಕರೆಯುವ ಮೂಲಕ ಕೆಲಸವನ್ನು "ಪೂರ್ಣಗೊಳಿಸುತ್ತದೆ". ಇಲ್ಲಿಯೇ ಸೈಡ್ ಎಫೆಕ್ಟ್‌ಗಳನ್ನು ಗುರುತಿಸಲಾಗುತ್ತದೆ (ಉದಾ., DOM ಅಪ್‌ಡೇಟ್ ಅಗತ್ಯ, ಲೈಫ್‌ಸೈಕಲ್ ಮೆಥಡ್ ಅನ್ನು ಕರೆಯುವ ಅಗತ್ಯ). ಈ ಫಂಕ್ಷನ್ ಅತ್ಯಂತ ಆಳವಾದ ಮಗುವಿನಿಂದ ರೂಟ್ ಕಡೆಗೆ ಮೇಲೆ ಬರುತ್ತದೆ.
- ಎಫೆಕ್ಟ್ ಲಿಸ್ಟ್ ರಚನೆ: `completeWork` ಚಲಾಯಿಸುತ್ತಿರುವಾಗ, ಅದು "ಎಫೆಕ್ಟ್ ಲಿಸ್ಟ್" ಅನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ – ಇದು ಕಮಿಟ್ ಹಂತದಲ್ಲಿ ಅನ್ವಯಿಸಬೇಕಾದ ಸೈಡ್ ಎಫೆಕ್ಟ್‌ಗಳನ್ನು ಹೊಂದಿರುವ ಎಲ್ಲಾ ಫೈಬರ್‌ಗಳ ಪಟ್ಟಿ.
- ಕಮಿಟ್: ಒಮ್ಮೆ ರೂಟ್ ಫೈಬರ್‌ನ `completeWork` ಮುಗಿದ ನಂತರ, ಸಂಪೂರ್ಣ ಎಫೆಕ್ಟ್ ಲಿಸ್ಟ್ ಅನ್ನು ಸಂಚರಿಸಲಾಗುತ್ತದೆ, ಮತ್ತು ನಿಜವಾದ DOM ಮ್ಯಾನಿಪ್ಯುಲೇಷನ್‌ಗಳು ಮತ್ತು ಅಂತಿಮ ಲೈಫ್‌ಸೈಕಲ್/ಎಫೆಕ್ಟ್ ಕಾಲ್‌ಗಳನ್ನು ಮಾಡಲಾಗುತ್ತದೆ.
ಈ ವ್ಯವಸ್ಥಿತ, ಎರಡು-ಹಂತದ ವಿಧಾನವು ಅದರ ತಿರುಳಿನಲ್ಲಿ ಅಡಚಣೆ ಸಾಧ್ಯತೆಯನ್ನು ಹೊಂದಿರುವುದು, ರಿಯಾಕ್ಟ್ ಸಂಕೀರ್ಣ UI ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಸುಲಭವಾಗಿ ನಿರ್ವಹಿಸಬಲ್ಲದು ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಹೆಚ್ಚು ಸಂವಾದಾತ್ಮಕ ಮತ್ತು ಡೇಟಾ-ತೀವ್ರ ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿಯೂ ಸಹ.
ಫೈಬರ್ ಅನ್ನು ಗಮನದಲ್ಲಿಟ್ಟುಕೊಂಡು ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್
ಫೈಬರ್ ರಿಯಾಕ್ಟ್‌ನ ಅಂತರ್ಗತ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸಿದರೂ, ಡೆವಲಪರ್‌ಗಳು ತಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವಲ್ಲಿ ಪ್ರಮುಖ ಪಾತ್ರ ವಹಿಸುತ್ತಾರೆ. ಫೈಬರ್‌ನ ಕಾರ್ಯವೈಖರಿಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಹೆಚ್ಚು ತಿಳುವಳಿಕೆಯುಳ್ಳ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳಿಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ:
- ಮೆಮೊಯಿಜೇಷನ್ (`React.memo`, `useMemo`, `useCallback`): ಈ ಉಪಕರಣಗಳು ತಮ್ಮ ಔಟ್‌ಪುಟ್ ಅನ್ನು ಮೆಮೊಯಿಜ್ ಮಾಡುವ ಮೂಲಕ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ಅಥವಾ ಮೌಲ್ಯಗಳ ಮರು-ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ತಡೆಯುತ್ತವೆ. ಫೈಬರ್‌ನ ರೆಂಡರ್ ಹಂತವು ಬದಲಾಗದಿದ್ದರೂ ಸಹ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಸಂಚರಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. ಮೆಮೊಯಿಜೇಷನ್ ಈ ಹಂತದಲ್ಲಿ ಕೆಲಸವನ್ನು ಬಿಟ್ಟುಬಿಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಕಾರ್ಯಕ್ಷಮತೆ ನಿರ್ಣಾಯಕವಾಗಿರುವ ಜಾಗತಿಕ ಬಳಕೆದಾರರ ನೆಲೆಯನ್ನು ಹೊಂದಿರುವ ದೊಡ್ಡ, ಡೇಟಾ-ಚಾಲಿತ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಇದು ವಿಶೇಷವಾಗಿ ಮುಖ್ಯವಾಗಿದೆ.
- ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್ (`React.lazy`, `Suspense`): ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್‌ಗಾಗಿ ಸಸ್ಪೆನ್ಸ್ ಅನ್ನು ಬಳಸಿಕೊಳ್ಳುವುದು ಬಳಕೆದಾರರು ಯಾವುದೇ ಕ್ಷಣದಲ್ಲಿ ಅವರಿಗೆ ಅಗತ್ಯವಿರುವ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಅನ್ನು ಮಾತ್ರ ಡೌನ್‌ಲೋಡ್ ಮಾಡುತ್ತಾರೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಆರಂಭಿಕ ಲೋಡ್ ಸಮಯವನ್ನು ಸುಧಾರಿಸಲು ಇದು ಅತ್ಯಗತ್ಯ, ವಿಶೇಷವಾಗಿ ಉದಯೋನ್ಮುಖ ಮಾರುಕಟ್ಟೆಗಳಲ್ಲಿ ನಿಧಾನಗತಿಯ ಇಂಟರ್ನೆಟ್ ಸಂಪರ್ಕಗಳನ್ನು ಹೊಂದಿರುವ ಬಳಕೆದಾರರಿಗೆ.
- ವರ್ಚುವಲೈಸೇಶನ್: ದೊಡ್ಡ ಪಟ್ಟಿಗಳು ಅಥವಾ ಟೇಬಲ್‌ಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು (ಉದಾ., ಸಾವಿರಾರು ಸಾಲುಗಳನ್ನು ಹೊಂದಿರುವ ಹಣಕಾಸು ಡ್ಯಾಶ್‌ಬೋರ್ಡ್, ಅಥವಾ ಜಾಗತಿಕ ಸಂಪರ್ಕಗಳ ಪಟ್ಟಿ), ವರ್ಚುವಲೈಸೇಶನ್ ಲೈಬ್ರರಿಗಳು (ಉದಾಹರಣೆಗೆ `react-window` ಅಥವಾ `react-virtualized`) ವೀಕ್ಷಣೆ ಪೋರ್ಟ್‌ನಲ್ಲಿ ಗೋಚರಿಸುವ ಐಟಂಗಳನ್ನು ಮಾತ್ರ ರೆಂಡರ್ ಮಾಡುತ್ತವೆ. ಇದು ಆಧಾರವಾಗಿರುವ ಡೇಟಾ ಸೆಟ್ ವಿಶಾಲವಾಗಿದ್ದರೂ ಸಹ, ರಿಯಾಕ್ಟ್ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಬೇಕಾದ ಫೈಬರ್‌ಗಳ ಸಂಖ್ಯೆಯನ್ನು ನಾಟಕೀಯವಾಗಿ ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.
- ರಿಯಾಕ್ಟ್ ಡೆವ್‌ಟೂಲ್ಸ್‌ನೊಂದಿಗೆ ಪ್ರೊಫೈಲಿಂಗ್: ರಿಯಾಕ್ಟ್ ಡೆವ್‌ಟೂಲ್ಸ್ ಫೈಬರ್ ರಿಕನ್ಸಿಲಿಯೇಶನ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ದೃಶ್ಯೀಕರಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುವ ಶಕ್ತಿಯುತ ಪ್ರೊಫೈಲಿಂಗ್ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ನೀಡುತ್ತದೆ. ಯಾವ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ರೆಂಡರ್ ಆಗುತ್ತಿವೆ, ಪ್ರತಿಯೊಂದು ಹಂತವು ಎಷ್ಟು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಎಂಬುದನ್ನು ನೀವು ನೋಡಬಹುದು ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸಬಹುದು. ಸಂಕೀರ್ಣ UIಗಳನ್ನು ಡೀಬಗ್ ಮಾಡಲು ಮತ್ತು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಇದು ಅನಿವಾರ್ಯ ಸಾಧನವಾಗಿದೆ.
- ಅನಗತ್ಯ ಪ್ರಾಪ್ ಬದಲಾವಣೆಗಳನ್ನು ತಪ್ಪಿಸುವುದು: ಪ್ರತಿ ರೆಂಡರ್‌ನಲ್ಲಿ ಹೊಸ ಆಬ್ಜೆಕ್ಟ್ ಅಥವಾ ಅರೇ ಲಿಟರಲ್‌ಗಳನ್ನು ಪ್ರಾಪ್ಸ್ ಆಗಿ ರವಾನಿಸುವ ಬಗ್ಗೆ ಜಾಗರೂಕರಾಗಿರಿ, ಅವುಗಳ ವಿಷಯವು ಶಬ್ದಾರ್ಥವಾಗಿ ಬದಲಾಗದಿದ್ದರೂ ಸಹ. ಇದು `React.memo` ನೊಂದಿಗೆ ಸಹ ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ಪ್ರಚೋದಿಸಬಹುದು, ಏಕೆಂದರೆ ಹೊಸ ಉಲ್ಲೇಖವನ್ನು ಬದಲಾವಣೆಯಾಗಿ ನೋಡಲಾಗುತ್ತದೆ.
ಮುಂದಿನ ನೋಟ: ರಿಯಾಕ್ಟ್‌ನ ಭವಿಷ್ಯ ಮತ್ತು ಕನ್‌ಕರೆಂಟ್ ವೈಶಿಷ್ಟ್ಯಗಳು
ಫೈಬರ್ ಕೇವಲ ಹಿಂದಿನ ಸಾಧನೆಯಲ್ಲ; ಇದು ರಿಯಾಕ್ಟ್‌ನ ಭವಿಷ್ಯಕ್ಕೆ ಅಡಿಪಾಯವಾಗಿದೆ. ರಿಯಾಕ್ಟ್ ತಂಡವು ಈ ವಾಸ್ತುಶಿಲ್ಪದ ಮೇಲೆ ನಿರ್ಮಿಸುವುದನ್ನು ಮುಂದುವರೆಸಿದೆ, ಶಕ್ತಿಯುತ ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ನೀಡಲು, ವೆಬ್ UI ಡೆವಲಪ್‌ಮೆಂಟ್‌ನಲ್ಲಿ ಸಾಧ್ಯವಿರುವುದರ ಗಡಿಗಳನ್ನು ಮತ್ತಷ್ಟು ತಳ್ಳುತ್ತಿದೆ:
- ರಿಯಾಕ್ಟ್ ಸರ್ವರ್ ಕಾಂಪೊನೆಂಟ್ಸ್ (RSC): ಫೈಬರ್‌ನ ಕ್ಲೈಂಟ್-ಸೈಡ್ ರಿಕನ್ಸಿಲಿಯೇಶನ್‌ನ ನೇರ ಭಾಗವಲ್ಲದಿದ್ದರೂ, RSCಗಳು ಸರ್ವರ್‌ನಲ್ಲಿ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರೆಂಡರ್ ಮಾಡಲು ಮತ್ತು ಅವುಗಳನ್ನು ಕ್ಲೈಂಟ್‌ಗೆ ಸ್ಟ್ರೀಮ್ ಮಾಡಲು ಕಾಂಪೊನೆಂಟ್ ಮಾದರಿಯನ್ನು ಬಳಸಿಕೊಳ್ಳುತ್ತವೆ. ಇದು ಆರಂಭಿಕ ಪುಟ ಲೋಡ್ ಸಮಯವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸಬಹುದು ಮತ್ತು ಕ್ಲೈಂಟ್-ಸೈಡ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಂಡಲ್‌ಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಬಹುದು, ವಿಶೇಷವಾಗಿ ನೆಟ್‌ವರ್ಕ್ ಲೇಟೆನ್ಸಿ ಮತ್ತು ಬಂಡಲ್ ಗಾತ್ರಗಳು ವ್ಯಾಪಕವಾಗಿ ಬದಲಾಗಬಹುದಾದ ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಪ್ರಯೋಜನಕಾರಿಯಾಗಿದೆ.
- ಆಫ್‌ಸ್ಕ್ರೀನ್ API: ಈ ಮುಂಬರುವ API ರಿಯಾಕ್ಟ್‌ಗೆ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಆಫ್-ಸ್ಕ್ರೀನ್‌ನಲ್ಲಿ ರೆಂಡರ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ, ಅವುಗಳು ಗೋಚರಿಸುವ UIಯ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರದಂತೆ. ಟ್ಯಾಬ್ಡ್ ಇಂಟರ್‌ಫೇಸ್‌ಗಳಂತಹ ಸನ್ನಿವೇಶಗಳಿಗೆ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ, ಅಲ್ಲಿ ನೀವು ನಿಷ್ಕ್ರಿಯ ಟ್ಯಾಬ್‌ಗಳನ್ನು ರೆಂಡರ್ ಮಾಡಿಡಲು (ಮತ್ತು ಸಂಭಾವ್ಯವಾಗಿ ಪೂರ್ವ-ರೆಂಡರ್) ಬಯಸುತ್ತೀರಿ, ಆದರೆ ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಸಕ್ರಿಯವಾಗಿರುವುದಿಲ್ಲ, ಬಳಕೆದಾರರು ಟ್ಯಾಬ್‌ಗಳನ್ನು ಬದಲಾಯಿಸಿದಾಗ ತಕ್ಷಣದ ಪರಿವರ್ತನೆಗಳನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
- ವರ್ಧಿತ ಸಸ್ಪೆನ್ಸ್ ಪ್ಯಾಟರ್ನ್ಸ್: ಸಸ್ಪೆನ್ಸ್‌ನ ಸುತ್ತಲಿನ ಪರಿಸರ ವ್ಯವಸ್ಥೆಯು ನಿರಂತರವಾಗಿ ವಿಕಸನಗೊಳ್ಳುತ್ತಿದೆ, ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳು, ಪರಿವರ್ತನೆಗಳು, ಮತ್ತು ಇನ್ನೂ ಹೆಚ್ಚು ಸಂಕೀರ್ಣ UI ಸನ್ನಿವೇಶಗಳಿಗೆ ಕನ್‌ಕರೆಂಟ್ ರೆಂಡರಿಂಗ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಹೆಚ್ಚು ಅತ್ಯಾಧುನಿಕ ಮಾರ್ಗಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.
ಈ ಆವಿಷ್ಕಾರಗಳು, ಎಲ್ಲವೂ ಫೈಬರ್ ವಾಸ್ತುಶಿಲ್ಪದಲ್ಲಿ ಬೇರೂರಿದೆ, ಹೆಚ್ಚಿನ-ಕಾರ್ಯಕ್ಷಮತೆಯ, ಶ್ರೀಮಂತ ಬಳಕೆದಾರ ಅನುಭವಗಳನ್ನು ನಿರ್ಮಿಸುವುದನ್ನು ಹಿಂದೆಂದಿಗಿಂತಲೂ ಸುಲಭ ಮತ್ತು ಹೆಚ್ಚು ಸಮರ್ಥವಾಗಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ, ವಿಶ್ವಾದ್ಯಂತ ವೈವಿಧ್ಯಮಯ ಬಳಕೆದಾರ ಪರಿಸರಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ.
ತೀರ್ಮಾನ: ಮಾಡರ್ನ್ ರಿಯಾಕ್ಟ್ ಅನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು
ರಿಯಾಕ್ಟ್ ಫೈಬರ್ ಒಂದು ಸ್ಮಾರಕ ಎಂಜಿನಿಯರಿಂಗ್ ಪ್ರಯತ್ನವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ, ಅದು ರಿಯಾಕ್ಟ್ ಅನ್ನು ಒಂದು ಶಕ್ತಿಯುತ ಲೈಬ್ರರಿಯಿಂದ ಆಧುನಿಕ UIಗಳನ್ನು ನಿರ್ಮಿಸಲು ಒಂದು ಹೊಂದಿಕೊಳ್ಳುವ, ಭವಿಷ್ಯ-ನಿರೋಧಕ ವೇದಿಕೆಯಾಗಿ ಪರಿವರ್ತಿಸಿತು. ರೆಂಡರಿಂಗ್ ಕೆಲಸವನ್ನು ಕಮಿಟ್ ಹಂತದಿಂದ ಬೇರ್ಪಡಿಸುವ ಮೂಲಕ ಮತ್ತು ಅಡಚಣೆ ಸಾಧ್ಯತೆಯನ್ನು ಪರಿಚಯಿಸುವ ಮೂಲಕ, ಫೈಬರ್ ಕನ್‌ಕರೆಂಟ್ ವೈಶಿಷ್ಟ್ಯಗಳ ಹೊಸ ಯುಗಕ್ಕೆ ಅಡಿಪಾಯ ಹಾಕಿತು, ಇದು ಸುಗಮ, ಹೆಚ್ಚು ಸ್ಪಂದನಾಶೀಲ, ಮತ್ತು ಹೆಚ್ಚು ಸ್ಥಿತಿಸ್ಥಾಪಕ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಕಾರಣವಾಯಿತು.
ಡೆವಲಪರ್‌ಗಳಿಗೆ, ಫೈಬರ್‌ನ ಆಳವಾದ ತಿಳುವಳಿಕೆಯು ಕೇವಲ ಶೈಕ್ಷಣಿಕ ವ್ಯಾಯಾಮವಲ್ಲ; ಅದೊಂದು ಕಾರ್ಯತಂತ್ರದ ಪ್ರಯೋಜನವಾಗಿದೆ. ಇದು ಹೆಚ್ಚು ಕಾರ್ಯಕ್ಷಮತೆಯ ಕೋಡ್ ಬರೆಯಲು, ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಪತ್ತೆಹಚ್ಚಲು, ಮತ್ತು ಜಗತ್ತಿನಾದ್ಯಂತ ಸಾಟಿಯಿಲ್ಲದ ಬಳಕೆದಾರ ಅನುಭವಗಳನ್ನು ನೀಡುವ ಅತ್ಯಾಧುನಿಕ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳಲು ನಿಮಗೆ ಅಧಿಕಾರ ನೀಡುತ್ತದೆ. ನೀವು ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವುದನ್ನು ಮತ್ತು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದನ್ನು ಮುಂದುವರೆಸಿದಂತೆ, ನೆನಪಿಡಿ, ಅದರ ತಿರುಳಿನಲ್ಲಿ, ಮ್ಯಾಜಿಕ್ ನಡೆಯುವಂತೆ ಮಾಡುವುದು ಫೈಬರ್‌ಗಳ ಸಂಕೀರ್ಣ ನೃತ್ಯವಾಗಿದೆ, ನಿಮ್ಮ ಬಳಕೆದಾರರು ಎಲ್ಲೇ ಇದ್ದರೂ, ನಿಮ್ಮ UIಗಳು ವೇಗವಾಗಿ ಮತ್ತು ಆಕರ್ಷಕವಾಗಿ ಪ್ರತಿಕ್ರಿಯಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.