溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么使用useEffect模擬組件生命周期

發(fā)布時間：2022-09-15 10:27:32 來源：億速云 閱讀：136 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹“怎么使用useEffect模擬組件生命周期”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“怎么使用useEffect模擬組件生命周期”文章能幫助大家解決問題。

useEffect模擬組件生命周期

讓函數(shù)組件模擬生命周期

  • 默認函數(shù)組件沒有生命周期

  • 函數(shù)組件是一個純函數(shù)，執(zhí)行完即銷毀，自己無法實現(xiàn)生命周期

  • 通過Effect hook把生命周期“鉤”到純函數(shù)中

    // 模擬 class 組件的 DidMount 和 DidUpdate
    useEffect(() => {
      console.log('在此發(fā)送一個 ajax 請求')
    })
 
    // // 模擬 class 組件的 DidMount
     useEffect(() => {
        console.log('加載完了')
     }, []) // 第二個參數(shù)是 [] （不依賴于任何 state）
 
     // 模擬 class 組件的 DidUpdate
     useEffect(() => {
         console.log('更新了')
     }, [count, name]) // 第二個參數(shù)就是依賴的 state
 
    // 模擬 class 組件的 DidMount
    useEffect(() => {
        let timerId = window.setInterval(() => {
            console.log(Date.now())
        }, 1000)
 
        // 返回一個函數(shù)
        // 模擬 WillUnMount 組件銷毀的時候 停止計時器
        return () => {
            window.clearInterval(timerId)
        }
    }, [])

總結(jié)：

  • 模擬componentDidMount  -  useEffect 依賴 [ ]

  • 模擬compenentDidUpdate - useEffect 無依賴 ，或者 依賴 [a,b,c]

  • 模擬componentWillUnMount - useEffect 中返回一個函數(shù)

react在16.8之后有了新特性 react hooks

之前的主要的生命周期為：

初始化

在組件初始化階段會執(zhí)行

  • constructor

  • componentWillMount() 

  • render()

  • componentDidMount()

更新階段

props或state的改變可能會引起組件的更新，組件重新渲染的過程中會調(diào)用以下方法：

  • componentWillReceiveProps()

  • shouldComponentUpdate()

  • componentWillUpdate() 

  • render()

  • componentDidUpdate()

卸載階段

  • componentWillUnmount()

useEffect實現(xiàn)componentWillUnmount生命周期函數(shù)

闡述

在寫React應(yīng)用的時候，在組件中經(jīng)常用到 componentWillUnmount 生命周期函數(shù)（組件將要被卸載時執(zhí)行）。比如我們的定時器要清空，避免發(fā)生內(nèi)存泄漏;比如登錄狀態(tài)要取消掉，避免下次進入信息出錯。

所以這個生命周期函數(shù)也是必不可少的，本文就用 useEffect 來實現(xiàn)這個生命周期函數(shù)，并講解一下 useEffect 容易踩的坑。

useEffect 解綁副作用

學(xué)習(xí)React Hooks 時，我們要改掉生命周期函數(shù)的概念，因為Hooks叫它副作用，所以componentWillUnmount也可以理解成解綁副作用。

這里為了演示用useEffect來實現(xiàn)類似componentWillUnmount效果，先安裝React-Router路由,進入項目根本錄，使用npm進行安裝。

npm install --save react-router-dom@5.2.0

然后打開 Example.js 文件，進行改寫代碼，先引入對應(yīng)的React-Router組件。

import { BrowserRouter as Router, Route, Link } from "react-router-dom"

在文件中編寫兩個新組件，因為這兩個組件都非常的簡單，所以就不單獨建立一個新的文件來寫了。

function Index() {
    return <h3>willem</h3>;
}
function List() {
    return <h3>List-Page</h3>;
}

有了這兩個組件后，接下來可以編寫路由配置，在以前的計數(shù)器代碼中直接增加就可以了。

function Example(){
    const [count, setCount] = useState(0);
    return ( 
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count + 1)}}>Chlick me</button>
            <Router>
                <ul>
                    <li><Link to="/">首頁</Link> </li>
                    <li><Link to="/list/">列表</Link> </li>
                </ul>
                <Route path="/" exact component={Index} />
                <Route path="/list/" component={List} />
            </Router>
        </div>
    );
}

然后到瀏覽器中查看一下，看看組件和路由是否可用。

如果可用，我們現(xiàn)在可以調(diào)整useEffect了。

怎么使用useEffect模擬組件生命周期

在兩個新組件中分別加入useEffect()函數(shù):

function Index() {
    useEffect(()=>{
        console.log('useEffect=>我是 Index頁面')
    })
    return <h3>willem</h3>;
}
function List() {
    useEffect(()=>{
        console.log('useEffect=>我是 List頁面')
    })
    return <h3>List-Page</h3>;
}

這時候我們點擊Link進入任何一個組件，在瀏覽器中都會打印出對應(yīng)的一段話。這時候可以用返回一個函數(shù)的形式進行解綁，代碼如下：

function Index() {
    useEffect(()=>{
        console.log('useEffect=>我是Index頁面')
        return ()=>{
            console.log('你走了 Index頁面')
        }
    })
    return <h3>willem</h3>;
}

這時候你在瀏覽器中預(yù)覽，我們仿佛實現(xiàn)了 componentWillUnmount方法。

但這只是好像實現(xiàn)了，當點擊計數(shù)器按鈕時，你會發(fā)現(xiàn)你走了Index頁面，也出現(xiàn)了。

這到底是怎么回事那？

其實每次狀態(tài)發(fā)生變化，useEffect都進行了解綁。

怎么使用useEffect模擬組件生命周期

ReactHooksDemo\demo01\src\Example.js

import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom"
function Index() {
    useEffect(()=>{
        console.log('useEffect=>我是Index頁面')
        return ()=>{
            console.log('你走了 Index頁面')
        }
    },[])
    return <h3>willem</h3>;
}
function List() {
    useEffect(()=>{
        console.log('useEffect=>我是 List頁面')
    })
    return <h3>List-Page</h3>;
}
function Example(){
    const [count, setCount] = useState(0);
    return ( 
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count + 1)}}>Chlick me</button>
            <Router>
                <ul>
                    <li><Link to="/">首頁</Link> </li>
                    <li><Link to="/list/">列表</Link> </li>
                </ul>
                <Route path="/" exact component={Index} />
                <Route path="/list/" component={List} />
            </Router>
        </div>
    );
}
export default Example;

useEffect的第二個參數(shù)

那到底要如何實現(xiàn)類似 componentWillUnmount的效果那?

這就需要請出useEffect的第二個參數(shù)，它是一個數(shù)組，數(shù)組中可以寫入很多狀態(tài)對應(yīng)的變量，意思是當狀態(tài)值發(fā)生變化時，我們才進行解綁。

但是當傳空數(shù)組 [] 時，就是當組件將被銷毀時才進行解綁，這也就實現(xiàn)了componentWillUnmount的生命周期函數(shù)。

function Index() {
    useEffect(()=>{
        console.log('useEffect=>我是Index頁面')
        return ()=>{
            console.log('你走了 Index頁面')
        }
    },[])
    return <h3>willem</h3>;
}

為了更加深入了解第二個參數(shù)的作用，把計數(shù)器的代碼也加上 useEffect 和解綁方法，并加入第二個參數(shù)為空數(shù)組。

代碼如下：

ReactHooksDemo\demo01\src\Example.js

function Example(){
    const [count, setCount] = useState(0);
    useEffect(()=>{
        console.log(`useEffect=>You clicked ${count} times`)
        return ()=>{
            console.log('====================')
        }
    },[])
    return ( 
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count + 1)}}>Chlick me</button>
            <Router>
                <ul>
                    <li><Link to="/">首頁</Link> </li>
                    <li><Link to="/list/">列表</Link> </li>
                </ul>
                <Route path="/" exact component={Index} />
                <Route path="/list/" component={List} />
            </Router>
        </div>
    );
}

這時候的代碼是不能執(zhí)行解綁副作用函數(shù)的。

但是如果我們想每次count發(fā)生變化，我們都進行解綁，只需要在第二個參數(shù)的數(shù)組里加入count變量就可以了。

代碼如下：

function Example(){
    const [count, setCount] = useState(0);
    useEffect(()=>{
        console.log(`useEffect=>You clicked ${count} times`)
        return ()=>{
            console.log('====================')
        }
    },[count])
    return ( 
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count + 1)}}>Chlick me</button>
            <Router>
                <ul>
                    <li><Link to="/">首頁</Link> </li>
                    <li><Link to="/list/">列表</Link> </li>
                </ul>
                <Route path="/" exact component={Index} />
                <Route path="/list/" component={List} />
            </Router>
        </div>
    );
}

這時候只要count狀態(tài)發(fā)生變化，都會執(zhí)行解綁副作用函數(shù)，瀏覽器的控制臺也就打印出了一串=================。

怎么使用useEffect模擬組件生命周期

總結(jié)

通過對本文的學(xué)習(xí)，讓我們對useEffect函數(shù)有了一個比較深入的了解，并且可以通過useEffect實現(xiàn)生命周期函數(shù)了，現(xiàn)在用React Hooks這種函數(shù)的方法編寫組件，對比以前用Class編寫組件幾乎一樣了。

ReactHooksDemo\demo01\src\index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Example from './Example';
ReactDOM.render(<Example />, document.getElementById('root'));

ReactHooksDemo\demo01\src\Example.js

import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom"
function Index() {
    useEffect(()=>{
        console.log('useEffect=>我是Index頁面')
        return ()=>{
            console.log('你走了 Index頁面')
        }
    },[])
    return <h3>willem</h3>;
}
function List() {
    useEffect(()=>{
        console.log('useEffect=>我是 List頁面')
    })
    return <h3>List-Page</h3>;
}
function Example(){
    const [count, setCount] = useState(0);
    useEffect(()=>{
        console.log(`useEffect=>You clicked ${count} times`)
        return ()=>{
            console.log('====================')
        }
    },[count])
    return ( 
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count + 1)}}>Chlick me</button>
            <Router>
                <ul>
                    <li><Link to="/">首頁</Link> </li>
                    <li><Link to="/list/">列表</Link> </li>
                </ul>
                <Route path="/" exact component={Index} />
                <Route path="/list/" component={List} />
            </Router>
        </div>
    );
}
export default Example;

關(guān)于“怎么使用useEffect模擬組件生命周期”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手