使用useEffect模擬組件生命周期

更新時間：2022年09月14日 16:55:34 作者：景塵

這篇文章主要介紹了使用useEffect模擬組件生命周期，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

useEffect模擬組件生命周期

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

默認(rèn)函數(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)要取消掉，避免下次進(jìn)入信息出錯。

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

useEffect 解綁副作用

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

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

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

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

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

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

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

有了這兩個組件后，接下來可以編寫路由配置，在以前的計數(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()函數(shù):

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

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

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

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

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

這到底是怎么回事那？

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

在這里插入圖片描述

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 <h2>willem</h2>;
}
function List() {
    useEffect(()=>{
        console.log('useEffect=>我是 List頁面')
    })
    return <h2>List-Page</h2>;
}
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)的變量，意思是當(dāng)狀態(tài)值發(fā)生變化時，我們才進(jìn)行解綁。

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

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

為了更加深入了解第二個參數(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ā)生變化，我們都進(jìn)行解綁，只需要在第二個參數(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ù)，瀏覽器的控制臺也就打印出了一串=================。

在這里插入圖片描述

總結(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 <h2>willem</h2>;
}
function List() {
    useEffect(()=>{
        console.log('useEffect=>我是 List頁面')
    })
    return <h2>List-Page</h2>;
}
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;

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: