ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್ ಈವೆಂಟ್ ಕ್ಯಾಪ್ಚರಿಂಗ್: ಕ್ರಾಸ್-ಪೋರ್ಟಲ್ ಈವೆಂಟ್ ಇಂಟರ್‌ಸೆಪ್ಷನ್

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

ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ಈವೆಂಟ್ ಕ್ಯಾಪ್ಚರಿಂಗ್ ಬಗ್ಗೆ ಆಳವಾಗಿ ಪರಿಶೀಲಿಸುವ ಮೊದಲು, ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳ ಬಗ್ಗೆ ದೃಢವಾದ ತಿಳುವಳಿಕೆಯನ್ನು ಸ್ಥಾಪಿಸೋಣ. ಪೋರ್ಟಲ್ ನಿಮಗೆ ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು DOM ನ ಬೇರೆ ಭಾಗದಲ್ಲಿ ರೆಂಡರ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ. ನೀವು ಆಳವಾಗಿ ನೆಸ್ಟೆಡ್ ಆದ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಹೊಂದಿದ್ದೀರಿ ಮತ್ತು `body` ಎಲಿಮೆಂಟ್‌ನ ಕೆಳಗೆ ನೇರವಾಗಿ ಮಾಡಲ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡಲು ಬಯಸುತ್ತೀರಿ ಎಂದು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಪೋರ್ಟಲ್ ಇಲ್ಲದೆ, ಮಾಡಲ್ ತನ್ನ ಪೂರ್ವಜರ ಸ್ಟೈಲಿಂಗ್ ಮತ್ತು ಪೊಸಿಶನಿಂಗ್‌ಗೆ ಒಳಪಟ್ಟಿರುತ್ತದೆ, ಇದು ಲೇಔಟ್ ಸಮಸ್ಯೆಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು. ಪೋರ್ಟಲ್ ಇದನ್ನು ತಪ್ಪಿಸಿ, ಮಾಡಲ್ ಅನ್ನು ನೀವು ಬಯಸಿದ ಸ್ಥಳದಲ್ಲಿ ನೇರವಾಗಿ ಇರಿಸುತ್ತದೆ.

ಪೋರ್ಟಲ್ ರಚಿಸಲು ಮೂಲ ಸಿಂಟ್ಯಾಕ್ಸ್ ಹೀಗಿದೆ:

            ReactDOM.createPortal(child, domNode);
            

              
                Copy
              
            
          

ಇಲ್ಲಿ, `child` ನೀವು ರೆಂಡರ್ ಮಾಡಲು ಬಯಸುವ ರಿಯಾಕ್ಟ್ ಎಲಿಮೆಂಟ್ (ಅಥವಾ ಕಾಂಪೊನೆಂಟ್) ಆಗಿದೆ, ಮತ್ತು `domNode` ನೀವು ಅದನ್ನು ರೆಂಡರ್ ಮಾಡಲು ಬಯಸುವ DOM ನೋಡ್ ಆಗಿದೆ.

ಉದಾಹರಣೆ:

            import React from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ children, isOpen, onClose }) => {
  if (!isOpen) return null;

  const modalRoot = document.getElementById('modal-root');
  if (!modalRoot) return null; // Handle case where modal-root doesn't exist

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
    </div>,
    modalRoot
  );
};

export default Modal;
            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, `Modal` ಕಾಂಪೊನೆಂಟ್ ತನ್ನ ಚಿಲ್ಡ್ರನ್‌ಗಳನ್ನು `modal-root` ಐಡಿಯೊಂದಿಗೆ DOM ನೋಡ್‌ಗೆ ರೆಂಡರ್ ಮಾಡುತ್ತದೆ. `.modal-overlay` ಮೇಲಿನ `onClick` ಹ್ಯಾಂಡ್ಲರ್, ಕಂಟೆಂಟ್ ಹೊರಗೆ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಮಾಡಲ್ ಅನ್ನು ಮುಚ್ಚಲು ಅನುಮತಿಸುತ್ತದೆ, ಆದರೆ `e.stopPropagation()` ಕಂಟೆಂಟ್ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಓವರ್‌ಲೇ ಕ್ಲಿಕ್ ಮಾಡಲ್ ಅನ್ನು ಮುಚ್ಚುವುದನ್ನು ತಡೆಯುತ್ತದೆ.

ಕ್ರಾಸ್-ಪೋರ್ಟಲ್ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್‌ನ ಸವಾಲು

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

ಸನ್ನಿವೇಶ: ಪೋರ್ಟಲ್ ಒಳಗೆ ಒಂದು ಬಟನ್ ಇದೆ ಎಂದು ಭಾವಿಸೋಣ, ಮತ್ತು ನೀವು ರಿಯಾಕ್ಟ್ ಟ್ರೀನಲ್ಲಿ ಮೇಲಿರುವ (ಆದರೆ ಪೋರ್ಟಲ್‌ನ ರೆಂಡರ್ ಸ್ಥಳದ *ಹೊರಗೆ*) ಕಾಂಪೊನೆಂಟ್‌ನಿಂದ ಆ ಬಟನ್‌ನ ಕ್ಲಿಕ್‌ಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ಬಯಸುತ್ತೀರಿ. ಪೋರ್ಟಲ್ DOM ಕ್ರಮಾನುಗತವನ್ನು ಮುರಿಯುವುದರಿಂದ, ಈವೆಂಟ್ ರಿಯಾಕ್ಟ್ ಟ್ರೀನಲ್ಲಿ ನಿರೀಕ್ಷಿತ ಪೇರೆಂಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗೆ ಬಬಲ್ ಅಪ್ ಆಗದಿರಬಹುದು.

ಪ್ರಮುಖ ಸಮಸ್ಯೆಗಳು:

• ಈವೆಂಟ್ ಬಬ್ಲಿಂಗ್: ಈವೆಂಟ್‌ಗಳು DOM ಟ್ರೀನ ಮೇಲೆ ಪ್ರಸಾರವಾಗುತ್ತವೆ, ಆದರೆ ಪೋರ್ಟಲ್ ಆ ಟ್ರೀನಲ್ಲಿ ಒಂದು ಅಸಂರಚನೆಯನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ. ಈವೆಂಟ್ ಪೋರ್ಟಲ್‌ನ ಡೆಸ್ಟಿನೇಶನ್ ನೋಡ್‌ನ *ಒಳಗೆ* DOM ಕ್ರಮಾನುಗತದಲ್ಲಿ ಬಬಲ್ ಅಪ್ ಆಗುತ್ತದೆ, ಆದರೆ ಪೋರ್ಟಲ್ ಅನ್ನು ರಚಿಸಿದ ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗೆ ಹಿಂತಿರುಗುವುದಿಲ್ಲ.
• `stopPropagation()`: ಅನೇಕ ಸಂದರ್ಭಗಳಲ್ಲಿ ಉಪಯುಕ್ತವಾಗಿದ್ದರೂ, `stopPropagation()` ಅನ್ನು ವಿವೇಚನೆಯಿಲ್ಲದೆ ಬಳಸುವುದು ಪೋರ್ಟಲ್‌ನ ಹೊರಗಿನ ಲಿಸನರ್‌ಗಳು ಸೇರಿದಂತೆ ಅಗತ್ಯ ಲಿಸನರ್‌ಗಳಿಗೆ ಈವೆಂಟ್‌ಗಳು ತಲುಪುವುದನ್ನು ತಡೆಯಬಹುದು.
• ಈವೆಂಟ್ ಟಾರ್ಗೆಟ್: `event.target` ಪ್ರಾಪರ್ಟಿಯು ಇನ್ನೂ ಈವೆಂಟ್ ಹುಟ್ಟಿದ DOM ಎಲಿಮೆಂಟ್‌ಗೆ ಸೂಚಿಸುತ್ತದೆ, ಆ ಎಲಿಮೆಂಟ್ ಪೋರ್ಟಲ್‌ನಲ್ಲಿದ್ದರೂ ಸಹ.

ಕ್ರಾಸ್-ಪೋರ್ಟಲ್ ಈವೆಂಟ್ ಇಂಟರ್‌ಸೆಪ್ಷನ್‌ಗಾಗಿ ಕಾರ್ಯತಂತ್ರಗಳು

ಪೋರ್ಟಲ್‌ಗಳೊಳಗೆ ಹುಟ್ಟುವ ಮತ್ತು ಅವುಗಳ ಹೊರಗಿನ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ತಲುಪುವ ಈವೆಂಟ್‌ಗಳನ್ನು ನಿಭಾಯಿಸಲು ಹಲವಾರು ಕಾರ್ಯತಂತ್ರಗಳನ್ನು ಬಳಸಬಹುದು:

1. ಈವೆಂಟ್ ಡೆಲಿಗೇಶನ್

ಈವೆಂಟ್ ಡೆಲಿಗೇಶನ್ ಎಂದರೆ ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್‌ಗೆ (ಸಾಮಾನ್ಯವಾಗಿ ಡಾಕ್ಯುಮೆಂಟ್ ಅಥವಾ ಸಾಮಾನ್ಯ ಪೂರ್ವಜ) ಒಂದೇ ಈವೆಂಟ್ ಲಿಸನರ್ ಅನ್ನು ಲಗತ್ತಿಸುವುದು ಮತ್ತು ನಂತರ ಈವೆಂಟ್‌ನ ನಿಜವಾದ ಟಾರ್ಗೆಟ್ ಅನ್ನು ನಿರ್ಧರಿಸುವುದು. ಈ ವಿಧಾನವು ಪ್ರತ್ಯೇಕ ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ ಹಲವಾರು ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳನ್ನು ಲಗತ್ತಿಸುವುದನ್ನು ತಪ್ಪಿಸುತ್ತದೆ, ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ ಮತ್ತು ಈವೆಂಟ್ ನಿರ್ವಹಣೆಯನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ.

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ:

1. ಒಂದು ಸಾಮಾನ್ಯ ಪೂರ್ವಜಕ್ಕೆ (ಉದಾಹರಣೆಗೆ, `document.body`) ಈವೆಂಟ್ ಲಿಸನರ್ ಅನ್ನು ಲಗತ್ತಿಸಿ.
2. ಈವೆಂಟ್ ಲಿಸನರ್‌ನಲ್ಲಿ, ಈವೆಂಟ್ ಅನ್ನು ಪ್ರಚೋದಿಸಿದ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಗುರುತಿಸಲು `event.target` ಪ್ರಾಪರ್ಟಿಯನ್ನು ಪರಿಶೀಲಿಸಿ.
3. ಈವೆಂಟ್ ಟಾರ್ಗೆಟ್ ಆಧರಿಸಿ ಬಯಸಿದ ಕ್ರಿಯೆಯನ್ನು ನಿರ್ವಹಿಸಿ.

ಉದಾಹರಣೆ:

            import React, { useEffect } from 'react';

const PortalAwareComponent = () => {
  useEffect(() => {
    const handleClick = (event) => {
      if (event.target.classList.contains('portal-button')) {
        console.log('Button inside portal clicked!', event.target);
        // Perform actions based on the clicked button
      }
    };

    document.body.addEventListener('click', handleClick);

    return () => {
      document.body.removeEventListener('click', handleClick);
    };
  }, []);

  return (
    <div>
      <p>This is a component outside the portal.</p>
    </div>
  );
};

export default PortalAwareComponent;
            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, `PortalAwareComponent` `document.body` ಗೆ ಕ್ಲಿಕ್ ಲಿಸನರ್ ಅನ್ನು ಲಗತ್ತಿಸುತ್ತದೆ. ಕ್ಲಿಕ್ ಮಾಡಿದ ಎಲಿಮೆಂಟ್ `portal-button` ಕ್ಲಾಸ್ ಅನ್ನು ಹೊಂದಿದೆಯೇ ಎಂದು ಲಿಸನರ್ ಪರಿಶೀಲಿಸುತ್ತದೆ. ಹಾಗಿದ್ದಲ್ಲಿ, ಅದು ಕನ್ಸೋಲ್‌ಗೆ ಸಂದೇಶವನ್ನು ಲಾಗ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಇತರ ಯಾವುದೇ ಅಗತ್ಯ ಕ್ರಮಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. ಈ ವಿಧಾನವು ಬಟನ್ ಪೋರ್ಟಲ್‌ನ ಒಳಗೆ ಅಥವಾ ಹೊರಗೆ ಇರಲಿ, ಕೆಲಸ ಮಾಡುತ್ತದೆ.

ಪ್ರಯೋಜನಗಳು:

• ಕಾರ್ಯಕ್ಷಮತೆ: ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳ ಸಂಖ್ಯೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.
• ಸರಳತೆ: ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಲಾಜಿಕ್ ಅನ್ನು ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ.
• ಹೊಂದಿಕೊಳ್ಳುವಿಕೆ: ಡೈನಾಮಿಕ್ ಆಗಿ ಸೇರಿಸಲಾದ ಎಲಿಮೆಂಟ್‌ಗಳಿಂದ ಈವೆಂಟ್‌ಗಳನ್ನು ಸುಲಭವಾಗಿ ನಿಭಾಯಿಸುತ್ತದೆ.

ಗಮನಿಸಬೇಕಾದ ಅಂಶಗಳು:

• ನಿರ್ದಿಷ್ಟತೆ: `event.target` ಬಳಸಿ ಈವೆಂಟ್ ಮೂಲಗಳನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ಟಾರ್ಗೆಟ್ ಮಾಡುವುದು ಮತ್ತು `event.target.closest()` ಬಳಸಿ DOM ಟ್ರೀ ಮೇಲೆ ಸಂಚರಿಸುವುದು ಅಗತ್ಯವಾಗಬಹುದು.
• ಈವೆಂಟ್ ಪ್ರಕಾರ: ಬಬಲ್ ಆಗುವ ಈವೆಂಟ್‌ಗಳಿಗೆ ಉತ್ತಮವಾಗಿ ಸೂಕ್ತವಾಗಿದೆ.

2. ಕಸ್ಟಮ್ ಈವೆಂಟ್ ಡಿಸ್ಪ್ಯಾಚಿಂಗ್

ಕಸ್ಟಮ್ ಈವೆಂಟ್‌ಗಳು ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ ಆಗಿ ಈವೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಮತ್ತು ಡಿಸ್ಪ್ಯಾಚ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತವೆ. ರಿಯಾಕ್ಟ್ ಟ್ರೀನಲ್ಲಿ ನೇರವಾಗಿ ಸಂಪರ್ಕ ಹೊಂದಿಲ್ಲದ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ನಡುವೆ ಸಂವಹನ ನಡೆಸಬೇಕಾದಾಗ ಅಥವಾ ಕಸ್ಟಮ್ ಲಾಜಿಕ್ ಆಧರಿಸಿ ಈವೆಂಟ್‌ಗಳನ್ನು ಪ್ರಚೋದಿಸಬೇಕಾದಾಗ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ:

1. `Event` ಕನ್‌ಸ್ಟ್ರಕ್ಟರ್ ಬಳಸಿ ಹೊಸ `Event` ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ರಚಿಸಿ.
2. DOM ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿ `dispatchEvent` ವಿಧಾನವನ್ನು ಬಳಸಿ ಈವೆಂಟ್ ಅನ್ನು ಡಿಸ್ಪ್ಯಾಚ್ ಮಾಡಿ.
3. `addEventListener` ಬಳಸಿ ಕಸ್ಟಮ್ ಈವೆಂಟ್‌ಗಾಗಿ ಆಲಿಸಿ.

ಉದಾಹರಣೆ:

            import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';

const PortalContent = () => {
  const handleClick = () => {
    const customEvent = new CustomEvent('portalButtonClick', {
      detail: { message: 'Button clicked inside portal!' },
    });
    document.dispatchEvent(customEvent);
  };

  return (
    <button className="portal-button" onClick={handleClick}>
      Click me (inside portal)
    </button>
  );
};

const PortalAwareComponent = () => {
  useEffect(() => {
    const handlePortalButtonClick = (event) => {
      console.log(event.detail.message);
    };

    document.addEventListener('portalButtonClick', handlePortalButtonClick);

    return () => {
      document.removeEventListener('portalButtonClick', handlePortalButtonClick);
    };
  }, []);

  const modalRoot = document.getElementById('modal-root');

    return (
    <>
      <div>
        <p>This is a component outside the portal.</p>
      </div>
        {modalRoot && ReactDOM.createPortal(<PortalContent/>, modalRoot)}
    </
    >

  );
};

export default PortalAwareComponent;
            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಪೋರ್ಟಲ್ ಒಳಗೆ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, `portalButtonClick` ಹೆಸರಿನ ಕಸ್ಟಮ್ ಈವೆಂಟ್ `document` ಮೇಲೆ ಡಿಸ್ಪ್ಯಾಚ್ ಆಗುತ್ತದೆ. `PortalAwareComponent` ಈ ಈವೆಂಟ್‌ಗಾಗಿ ಆಲಿಸುತ್ತದೆ ಮತ್ತು ಕನ್ಸೋಲ್‌ಗೆ ಸಂದೇಶವನ್ನು ಲಾಗ್ ಮಾಡುತ್ತದೆ.

ಪ್ರಯೋಜನಗಳು:

• ಹೊಂದಿಕೊಳ್ಳುವಿಕೆ: ಕಾಂಪೊನೆಂಟ್‌ಗಳ ನಡುವೆ ಅವುಗಳ ರಿಯಾಕ್ಟ್ ಟ್ರೀನಲ್ಲಿನ ಸ್ಥಾನವನ್ನು ಲೆಕ್ಕಿಸದೆ ಸಂವಹನಕ್ಕೆ ಅನುಮತಿಸುತ್ತದೆ.
• ಕಸ್ಟಮೈಸಬಿಲಿಟಿ: ಈವೆಂಟ್‌ನ `detail` ಪ್ರಾಪರ್ಟಿಯಲ್ಲಿ ನೀವು ಕಸ್ಟಮ್ ಡೇಟಾವನ್ನು ಸೇರಿಸಬಹುದು.
• ಡಿಕಪ್ಲಿಂಗ್: ಕಾಂಪೊನೆಂಟ್‌ಗಳ ನಡುವಿನ ಅವಲಂಬನೆಗಳನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.

ಗಮನಿಸಬೇಕಾದ ಅಂಶಗಳು:

• ಈವೆಂಟ್ ನೇಮಿಂಗ್: ಸಂಘರ್ಷಗಳನ್ನು ತಪ್ಪಿಸಲು ವಿಶಿಷ್ಟ ಮತ್ತು ವಿವರಣಾತ್ಮಕ ಈವೆಂಟ್ ಹೆಸರುಗಳನ್ನು ಆಯ್ಕೆಮಾಡಿ.
• ಡೇಟಾ ಸೀರಿಯಲೈಸೇಶನ್: `detail` ಪ್ರಾಪರ್ಟಿಯಲ್ಲಿ ಸೇರಿಸಲಾದ ಯಾವುದೇ ಡೇಟಾ ಸೀರಿಯಲೈಸ್ ಮಾಡಬಹುದಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• ಗ್ಲೋಬಲ್ ಸ್ಕೋಪ್: `document` ಮೇಲೆ ಡಿಸ್ಪ್ಯಾಚ್ ಮಾಡಿದ ಈವೆಂಟ್‌ಗಳು ಜಾಗತಿಕವಾಗಿ ಪ್ರವೇಶಿಸಬಹುದು, ಇದು ಒಂದು ಪ್ರಯೋಜನ ಮತ್ತು ಸಂಭಾವ್ಯ ಅನಾನುಕೂಲತೆ ಎರಡೂ ಆಗಿರಬಹುದು.

3. ರೆಫ್ಸ್ ಮತ್ತು ಡೈರೆಕ್ಟ್ DOM ಮ್ಯಾನಿಪ್ಯುಲೇಷನ್ ಬಳಸುವುದು (ಎಚ್ಚರಿಕೆಯಿಂದ ಬಳಸಿ)

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

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ:

1. `React.createRef()` ಅಥವಾ `useRef()` ಬಳಸಿ ರೆಫ್ ಅನ್ನು ರಚಿಸಿ.
2. ಪೋರ್ಟಲ್ ಒಳಗೆ DOM ಎಲಿಮೆಂಟ್‌ಗೆ ರೆಫ್ ಅನ್ನು ಲಗತ್ತಿಸಿ.
3. `ref.current` ಬಳಸಿ DOM ಎಲಿಮೆಂಟ್ ಅನ್ನು ಪ್ರವೇಶಿಸಿ.
4. ನೇರವಾಗಿ DOM ಎಲಿಮೆಂಟ್‌ಗೆ ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳನ್ನು ಲಗತ್ತಿಸಿ.

ಉದಾಹರಣೆ:

            import React, { useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

const PortalContent = () => {
  const buttonRef = useRef(null);

  useEffect(() => {
    const handleClick = () => {
      console.log('Button clicked (direct DOM manipulation)');
    };

    if (buttonRef.current) {
      buttonRef.current.addEventListener('click', handleClick);
    }

    return () => {
      if (buttonRef.current) {
        buttonRef.current.removeEventListener('click', handleClick);
      }
    };
  }, []);

  return (
    <button className="portal-button" ref={buttonRef}>
      Click me (inside portal)
    </button>
  );
};

const PortalAwareComponent = () => {
  const modalRoot = document.getElementById('modal-root');
  return (
    <>
      <div>
        <p>This is a component outside the portal.</p>
      </div>
      {modalRoot && ReactDOM.createPortal(<PortalContent/>, modalRoot)}
    </
    >
  );
};

export default PortalAwareComponent;

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಪೋರ್ಟಲ್ ಒಳಗೆ ಬಟನ್‌ಗೆ ರೆಫ್ ಅನ್ನು ಲಗತ್ತಿಸಲಾಗಿದೆ. ನಂತರ `buttonRef.current.addEventListener()` ಬಳಸಿ ಬಟನ್‌ನ DOM ಎಲಿಮೆಂಟ್‌ಗೆ ಈವೆಂಟ್ ಲಿಸನರ್ ಅನ್ನು ನೇರವಾಗಿ ಲಗತ್ತಿಸಲಾಗಿದೆ. ಈ ವಿಧಾನವು ರಿಯಾಕ್ಟ್‌ನ ಈವೆಂಟ್ ಸಿಸ್ಟಮ್ ಅನ್ನು ಬೈಪಾಸ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಮೇಲೆ ನೇರ ನಿಯಂತ್ರಣವನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಪ್ರಯೋಜನಗಳು:

• ನೇರ ನಿಯಂತ್ರಣ: ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಮೇಲೆ ಸೂಕ್ಷ್ಮ ನಿಯಂತ್ರಣವನ್ನು ಒದಗಿಸುತ್ತದೆ.
• ರಿಯಾಕ್ಟ್‌ನ ಈವೆಂಟ್ ಸಿಸ್ಟಮ್ ಅನ್ನು ಬೈಪಾಸ್ ಮಾಡುವುದು: ರಿಯಾಕ್ಟ್‌ನ ಈವೆಂಟ್ ಸಿಸ್ಟಮ್ ಸಾಕಷ್ಟಿಲ್ಲದ ನಿರ್ದಿಷ್ಟ ಸಂದರ್ಭಗಳಲ್ಲಿ ಉಪಯುಕ್ತವಾಗಬಹುದು.

ಗಮನಿಸಬೇಕಾದ ಅಂಶಗಳು:

• ಸಂಘರ್ಷಗಳ ಸಾಧ್ಯತೆ: ಎಚ್ಚರಿಕೆಯಿಂದ ಬಳಸದಿದ್ದರೆ ರಿಯಾಕ್ಟ್‌ನ ಈವೆಂಟ್ ಸಿಸ್ಟಮ್‌ನೊಂದಿಗೆ ಸಂಘರ್ಷಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು.
• ನಿರ್ವಹಣೆಯ ಸಂಕೀರ್ಣತೆ: ಕೋಡ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಮತ್ತು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಕಷ್ಟಕರವಾಗಿಸುತ್ತದೆ.
• ಆಂಟಿ-ಪ್ಯಾಟರ್ನ್: ರಿಯಾಕ್ಟ್ ಡೆವಲಪ್‌ಮೆಂಟ್‌ನಲ್ಲಿ ಇದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಆಂಟಿ-ಪ್ಯಾಟರ್ನ್ ಎಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ. ಅಗತ್ಯವಿದ್ದಾಗ ಮಾತ್ರ ಮಿತವಾಗಿ ಬಳಸಿ.

4. ಶೇರ್ಡ್ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ ಪರಿಹಾರವನ್ನು ಬಳಸುವುದು (ಉದಾ., Redux, Zustand, Context API)

ಪೋರ್ಟಲ್‌ನ ಒಳಗೆ ಮತ್ತು ಹೊರಗಿನ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಸ್ಟೇಟ್ ಅನ್ನು ಹಂಚಿಕೊಳ್ಳಬೇಕಾದರೆ ಮತ್ತು ಒಂದೇ ಈವೆಂಟ್‌ಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸಬೇಕಾದರೆ, ಶೇರ್ಡ್ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ ಪರಿಹಾರವು ಸ್ವಚ್ಛ ಮತ್ತು ಪರಿಣಾಮಕಾರಿ ವಿಧಾನವಾಗಬಹುದು.

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ:

1. Redux, Zustand, ಅಥವಾ React's Context API ಬಳಸಿ ಶೇರ್ಡ್ ಸ್ಟೇಟ್ ಅನ್ನು ರಚಿಸಿ.
2. ಪೋರ್ಟಲ್ ಒಳಗೆ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಆಕ್ಷನ್‌ಗಳನ್ನು ಡಿಸ್ಪ್ಯಾಚ್ ಮಾಡಬಹುದು ಅಥವಾ ಶೇರ್ಡ್ ಸ್ಟೇಟ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಬಹುದು.
3. ಪೋರ್ಟಲ್ ಹೊರಗೆ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಶೇರ್ಡ್ ಸ್ಟೇಟ್‌ಗೆ ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಮಾಡಬಹುದು ಮತ್ತು ಬದಲಾವಣೆಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸಬಹುದು.

ಉದಾಹರಣೆ (React Context API ಬಳಸಿ):

            import React, { createContext, useContext, useState } from 'react';
import ReactDOM from 'react-dom';

const EventContext = createContext(null);

const EventProvider = ({ children }) => {
  const [buttonClicked, setButtonClicked] = useState(false);

  const handleButtonClick = () => {
    setButtonClicked(true);
  };

  return (
    <EventContext.Provider value={{ buttonClicked, handleButtonClick }}>
      {children}
    </EventContext.Provider>
  );
};

const useEventContext = () => {
  const context = useContext(EventContext);
  if (!context) {
    throw new Error('useEventContext must be used within an EventProvider');
  }
  return context;
};

const PortalContent = () => {
  const { handleButtonClick } = useEventContext();

  return (
    <button className="portal-button" onClick={handleButtonClick}>
      Click me (inside portal)
    </button>
  );
};

const PortalAwareComponent = () => {
  const { buttonClicked } = useEventContext();
  const modalRoot = document.getElementById('modal-root');

  return (
    <>
      <div>
        <p>This is a component outside the portal. Button clicked: {buttonClicked ? 'Yes' : 'No'}</p>
      </div>
      {modalRoot && ReactDOM.createPortal(<PortalContent/>, modalRoot)}
    </
    >
  );
};

const App = () => (
  <EventProvider>
    <PortalAwareComponent />
  </EventProvider>
);

export default App;
            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, `EventContext` ಶೇರ್ಡ್ ಸ್ಟೇಟ್ (`buttonClicked`) ಮತ್ತು ಹ್ಯಾಂಡ್ಲರ್ (`handleButtonClick`) ಅನ್ನು ಒದಗಿಸುತ್ತದೆ. `PortalContent` ಕಾಂಪೊನೆಂಟ್ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ `handleButtonClick` ಅನ್ನು ಕರೆಯುತ್ತದೆ, ಮತ್ತು `PortalAwareComponent` ಕಾಂಪೊನೆಂಟ್ `buttonClicked` ಸ್ಟೇಟ್‌ಗೆ ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಅದು ಬದಲಾದಾಗ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ.

ಪ್ರಯೋಜನಗಳು:

• ಕೇಂದ್ರೀಕೃತ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್: ಕಾಂಪೊನೆಂಟ್‌ಗಳ ನಡುವೆ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ ಮತ್ತು ಸಂವಹನವನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ.
• ಊಹಿಸಬಹುದಾದ ಡೇಟಾ ಫ್ಲೋ: ಸ್ಪಷ್ಟ ಮತ್ತು ಊಹಿಸಬಹುದಾದ ಡೇಟಾ ಫ್ಲೋ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ.
• ಪರೀಕ್ಷಾ ಸಾಮರ್ಥ್ಯ: ಕೋಡ್ ಅನ್ನು ಪರೀಕ್ಷಿಸಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ.

ಗಮನಿಸಬೇಕಾದ ಅಂಶಗಳು:

• ಓವರ್‌ಹೆಡ್: ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ ಪರಿಹಾರವನ್ನು ಸೇರಿಸುವುದರಿಂದ ಓವರ್‌ಹೆಡ್ ಉಂಟಾಗಬಹುದು, ವಿಶೇಷವಾಗಿ ಸರಳ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ.
• ಕಲಿಕೆಯ ರೇಖೆ: ಆಯ್ಕೆ ಮಾಡಿದ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ ಲೈಬ್ರರಿ ಅಥವಾ API ಅನ್ನು ಕಲಿಯುವುದು ಮತ್ತು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಅಗತ್ಯ.

ಕ್ರಾಸ್-ಪೋರ್ಟಲ್ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್‌ಗಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಕ್ರಾಸ್-ಪೋರ್ಟಲ್ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್‌ನೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ, ಈ ಕೆಳಗಿನ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಪರಿಗಣಿಸಿ:

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

ತೀರ್ಮಾನ

ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳು ತಮ್ಮ ಪೇರೆಂಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಗಡಿಗಳಿಂದ ಹೊರಬರಬೇಕಾದ ಯುಐ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಪ್ರಬಲವಾದ ಮಾರ್ಗವನ್ನು ನೀಡುತ್ತವೆ. ಆದಾಗ್ಯೂ, ಪೋರ್ಟಲ್‌ಗಳಾದ್ಯಂತ ಈವೆಂಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಎಚ್ಚರಿಕೆಯ ಪರಿಗಣನೆ ಮತ್ತು ಸೂಕ್ತ ತಂತ್ರಗಳ ಅನ್ವಯದ ಅಗತ್ಯವಿದೆ. ಈವೆಂಟ್ ಡೆಲಿಗೇಶನ್, ಕಸ್ಟಮ್ ಈವೆಂಟ್‌ಗಳು, ಮತ್ತು ಶೇರ್ಡ್ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್‌ನಂತಹ ಕಾರ್ಯತಂತ್ರಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಂಡು ಮತ್ತು ಬಳಸಿಕೊಂಡು, ನೀವು ಪೋರ್ಟಲ್‌ಗಳೊಳಗೆ ಹುಟ್ಟುವ ಈವೆಂಟ್‌ಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ತಡೆಹಿಡಿಯಬಹುದು ಮತ್ತು ಸೆರೆಹಿಡಿಯಬಹುದು ಮತ್ತು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ನಿರೀಕ್ಷೆಯಂತೆ ವರ್ತಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು. ಸ್ವಚ್ಛ, ನಿರ್ವಹಿಸಬಲ್ಲ, ಮತ್ತು ಪರೀಕ್ಷಿಸಬಲ್ಲ ಕೋಡ್‌ಬೇಸ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ರಿಯಾಕ್ಟ್‌ನ ಡಿಕ್ಲರೇಟಿವ್ ವಿಧಾನಕ್ಕೆ ಆದ್ಯತೆ ನೀಡುವುದನ್ನು ಮತ್ತು ನೇರ DOM ಮ್ಯಾನಿಪ್ಯುಲೇಷನ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡುವುದನ್ನು ನೆನಪಿಡಿ.