Jak React wie, że komponent został usunięty z DOM?

Question

Pod Adding Lifecycle Methods to a Class w oficjalnych docs Facebook dla React, to wymienić:

5) Jeśli składnik Zegar jest zawsze usuwane z DOM, React połączeń componentWillUnmount() hak cyklu więc stoper jest zatrzymany.

Próbujesz zrozumieć, jak? Rozumiem, że React wie, kiedy ma zamiar wstawić komponent do DOM, więc może wtedy wywołać hak cyklu życia componentDidMount.

Ale componentWillUnmount to po prostu mówi "kiedykolwiek usunięty z DOM". Wydaje się sugerować, że to prawdziwy DOM, a nie React DOM. Równie dobrze można usunąć komponent za pomocą javaScript/jQuery i powinien wystrzelić componentWillUnmount.

Jak dokładnie React wie, że komponent został usunięty z rzeczywistego DOM? Czy może być obserwator?

Dzięki

Answer 1

Brak obserwatora dla rzeczywistego DOM. Za każdym razem, gdy wywoływana jest funkcja renderowania komponentu, Virtual DOM jest ponownie budowany. Jeśli komponent nie jest już potrzebny, zostaje usunięty z wirtualnego DOM.

Algorytm różnicowania identyfikuje te części rzeczywistego DOM, które wymagają zmiany, aby rzeczywisty DOM był odbiciem wirtualnego DOM: niektóre komponenty będą musiały zostać dodane do rzeczywistego DOM (= nazwany montaż), inne składniki będą musiały zostać usunięte (= odmontowanie). Cały ten proces nazywa się reconciliation.

To właśnie z powodu tego procesu uzgadniania, React wie, które komponenty mają zostać usunięte z rzeczywistego DOM. Tuż przed usunięciem komponentu React wywołuje hook elementu componentWillUnmount().

Jeśli inny skrypt (Javascript lub jQuery) powoduje usunięcie określonego komponentu z rzeczywistego DOM, React nigdy go nie zauważy i dlatego nie wywoła hookowania cyklu componentWillUnmount().

Answer 2

To nie jest prawda. Jeśli nie ręcznie usunąć element z DOM to nie zadziała componentWillUnmount .. Zdarza się wyłącznie za pośrednictwem Wirtualnej DOM poziom jeśli składnik nie jest obecny już:

// 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 następnie zadzwoni pod numer componentWillUnmount.

Ręcznie przetestowałem componentWillUnmount, otwierając devtools i usuwając niektóre komponenty, które miały metodę cyklu życia componentWillUnmount.