useEffect的第二个参数[ ] WillUnMount

function Index(){
    useEffect(()=>{
        console.log('userEffect=>来了老弟')
        return ()=>{
            //解绑副作用，但是只要状态变化，就会触发解绑
            console.log('老弟走了啊？Index')
        }
    },[])//只有数组里的参数状态改变时才执行，等于空的话，只有销毁时才执行
    return <h2>Jarsmine</h2>
}

useEffect的第二个参数相当于类组件的生命周期销毁函数

import {BrowserRouter,Route,Link} from 'react-router-dom';
import React,{useState, useEffect} from 'react';
function Index(){
    useEffect(()=>{
        console.log('userEffect=>来了老弟')
        return ()=>{
            //解绑副作用，但是只要状态变化，就会触发解绑
            console.log('老弟走了啊？Index')
        }
    },[])//只有数组里的参数状态改变时才执行，等于空的话，只有销毁时才执行
    return <h2>Jarsmine</h2>
}
function List(){
    useEffect(()=>{
        console.log('userEffect=>好嗨哦')
    })
    return <h2>List Page</h2>
}

  
 export default function RouterDome(){
    const [count,setCount]=useState(0)//数组解构
    useEffect(()=>{
        console.log(`useEffect=>You clicked ${count}times`)
        return()=>{
            console.log(`===============`)//解绑
        }
      },[count])//加空数组：销毁时才解绑,加count，count变化时解绑，
      //转页时不会出现解绑
  return (
    <div>
    <p>You clicked {count} times</p>
    <button onClick={()=>{setCount(count+1)}}>click me</button>
    <BrowserRouter>
        <ul>
            <li><Link to="/">首页</Link></li>
            <li><Link to="/list">列表 </Link></li>
        </ul>
        <Route path="/" exact component={Index}></Route>
        <Route path="/list/" exact component={List}></Route>
    </BrowserRouter>
  </div>
  )
   }