2017-07-09 25 views
5

प्रतिक्रिया के लिए आधिकारिक फेसबुक डॉक्स में Adding Lifecycle Methods to a Class के तहत, यह उल्लेख किया गया है:प्रतिक्रिया कैसे पता है कि घटक को डीओएम से हटा दिया गया है?

5) घड़ी घटक कभी डोम से निकाल दिया जाता है, तो कॉल componentWillUnmount() जीवन चक्र हुक तो घड़ी बंद कर दिया है प्रतिक्रिया।

बस समझने की कोशिश कैसे करें? मुझे लगता है कि जब यह डोम में घटक डालने वाला है, तो प्रतिक्रिया प्राप्त होती है, इसलिए यह componentDidMount जीवन चक्र हुक को कॉल कर सकता है।

लेकिन componentWillUnmount के लिए यह सिर्फ कहते हैं, "कभीडोम से हटा दिया"। ऐसा लगता है कि यह वास्तविक डोम प्रतिक्रिया नहीं है। कोई जावास्क्रिप्ट/jQuery और componentWillUnmount के साथ घटक को भी हटा सकता है।

वास्तविक डीओएम से घटक को वास्तव में कैसे पता चला है कि वास्तव में कैसे पता चला है? क्या एक दर्शक हो सकता है?

धन्यवाद

उत्तर

3

वास्तविक डोम पर कोई दर्शक नहीं है। हर बार किसी घटक के रेंडर फ़ंक्शन को कॉल किया जाता है, वर्चुअल डोम फिर से निर्माण हो जाता है। यदि कोई घटक अब आवश्यक नहीं है, तो यह वर्चुअल डॉम से हटा दिया जाता है।

एक diffing एल्गोरिदम वास्तविक डोम के उन हिस्सों की पहचान करता है जिन्हें वास्तविक डोम के लिए वर्चुअल डॉम का प्रतिबिंब होने के लिए बदला जाना आवश्यक है: कुछ घटकों को वास्तविक DOM (= आरोही कहा जाता है) में जोड़ा जाना होगा, अन्य घटकों को हटा देना होगा (= अनमाउंटिंग)। इस पूरी प्रक्रिया को reconciliation कहा जाता है।

यह सुलझाने की प्रक्रिया के कारण है, कि जानता है कि कौन से घटक वास्तविक डोम से हटाए जाएंगे। घटक हटा दिए जाने से ठीक पहले, प्रतिक्रिया घटक WillUnmount() लाइफसाइकिल हुक को कॉल करता है।

यदि कोई अन्य स्क्रिप्ट (जावास्क्रिप्ट या jQuery) वास्तविक डीओएम से किसी निश्चित घटक को हटाने का कारण बनती है, तो प्रतिक्रिया इसे कभी नहीं देखेगी और इसलिए घटक WillUnmount() लाइफसाइक्ल हुक को कॉल नहीं करेगा।

2

यह सच नहीं है। यदि आप मैन्युअल रूप से डोम से एक घटक निकालूँ यह सक्रिय नहीं होगा componentWillUnmount .. यह केवल आभासी डोम के माध्यम से होता है, के स्तर का है, तो घटक अब मौजूद नहीं है:

// Unmount children that are no longer present. 
for (name in prevChildren) { 
    if (
    prevChildren.hasOwnProperty(name) && 
    !(nextChildren && nextChildren.hasOwnProperty(name)) 
) { 
    prevChild = prevChildren[name]; 
    removedNodes[name] = ReactReconciler.getHostNode(prevChild); 
    ReactReconciler.unmountComponent(
     prevChild, 
     false /* safely */, 
     false /* skipLifecycle */, 
    ); 
    } 
} 

https://github.com/facebook/react/blob/5c6a496d98b80d19d851c2ec3a56d760b7118a50/src/renderers/shared/stack/reconciler/ReactChildReconciler.js

unmountComponent फिर componentWillUnmount पर कॉल करेगा।

मैंने मैन्युअल रूप से componentWillUnmount का परीक्षण devtools खोलकर और componentWillUnmount लाइफसाइकिल विधि वाले कुछ घटकों को हटाकर मैन्युअल रूप से किया।

संबंधित मुद्दे