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

最新推荐文章于 2025-04-17 09:56:26 发布

派大星_study

最新推荐文章于 2025-04-17 09:56:26 发布

阅读量1.3w

点赞数 2

本文链接：https://blog.youkuaiyun.com/qq_39721418/article/details/104098810

版权

React 专栏收录该内容

12 篇文章

订阅专栏

本文深入探讨了React中使用React Router进行导航时组件的挂载与销毁过程，通过实例展示了useEffect Hook如何在组件挂载和卸载时执行特定操作，以及在不同路由间切换时组件生命周期的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

销毁组件：

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;