React-Hooks实现 componentWillUnmount使用 useEffect的第二个参数和return

销毁组件：

import React, { useState,useEffect } from 'react';
import {BrowserRouter as Router,Link,Route} from 'react-router-dom'

function Index(){
    useEffect(()=>{
        console.log('Index页面的--来了---');
        return ()=>{
            console.log('Index页面的--走了---');
        }
    },[])
    return(
        <div>
            index页面
        </div>
    )
}
function List(){
    useEffect(()=>{
        console.log('list页面----来了---')
        return ()=>{
            console.log('list页面----走了---')
        }
    },[])
    return(
        <div>
            List页面
        </div>
    )
}

function Example (){
    const [count,setCount] = useState(0);
    useEffect(() =>{
        console.log(`effect ----the count is ${count}`)
    })
    return(
        <>
            <p>the num is {count}</p>
            <button onClick={()=>{setCount(count+1)}}>click me </button>
            <Router>
            <ul>
                <li><Link to="/" >首页</Link></li>
                <li><Link to="/list" >列表页</Link></li>
                <Route path="/" exact component={Index} />
                <Route path="/list" component={List} />
            </ul>
            </Router>
        </>
    )
}
export default Example;