Réagir de la composante de fonction de montagne du routeur

Question

J'utilise React routeur et avoir deux itinéraires qui rendent le même composant:

<Switch>
    <Route path="/aaa" component={Cmp} />
    <Route path="/bbb" component={Cmp} />
</Switch>

Ceci est la mise en œuvre du CMP:

class Cmp extends Component {
    componentWillUnmount() {
        console.log('******************* UNMOUNTED');
    }

    render() {
        return null;
    }
}

Comme je m'attends, naviguer entre /aaa et /bbb ne démonte pas CMP.

Je passe à des crochets pour que je puisse réécrire le composant:

function Cmp() {
    useEffect(() => {
        return () => {
            console.log('******************* UNMOUNTED');
        };
    });

    return null;
}

Et très surprenant, lors de la conduite de l'application, naviguez entre /aaa et /bbb console.log que CMP a été démonté.
[.____] Toute idée de l'empêchement de la monture non nécessaire à l'aide de la composante de fonction et des crochets?

Answer 1

Combinant à la fois composentDidDmount et composantwillunmount

Cela signifie que vous pouvez utiliser le composantDidMount et le composantWillunMount dans le même appel de la fonction UseEffect. Réduire considérablement la quantité de code nécessaire pour gérer les deux événements de cycle de vie. Cela signifie que vous pouvez facilement utiliser le composantDidMount et le composantWillunMount dans des composants fonctionnels. Comme: Plus de mises à jour s'il vous plaît réagit: usefeffect

import React, { useEffect } from 'react';
    const ComponentExample => () => {
        useEffect(() => {
            // Anything in here is fired on component mount.
            return () => {
                // Anything in here is fired on component unmount.
            }
        }, [])
    }