使用useEffect模擬組件生命周期

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

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

useEffect模擬組件生命周期

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

默認(rèn)函數(shù)組件沒有生命周期
函數(shù)組件是一個(gè)純函數(shù)，執(zhí)行完即銷毀，自己無法實(shí)現(xiàn)生命周期
通過Effect hook把生命周期“鉤”到純函數(shù)中

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

總結(jié)：

模擬componentDidMount - useEffect 依賴 [ ]
模擬compenentDidUpdate - useEffect 無依賴，或者依賴 [a,b,c]
模擬componentWillUnMount - useEffect 中返回一個(gè)函數(shù)

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

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

初始化

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

constructor
componentWillMount()
render()
componentDidMount()

更新階段

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

componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

卸載階段

componentWillUnmount()

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

闡述

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

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

useEffect 解綁副作用

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

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

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

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

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

在文件中編寫兩個(gè)新組件，因?yàn)檫@兩個(gè)組件都非常的簡(jiǎn)單，所以就不單獨(dú)建立一個(gè)新的文件來寫了。

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

有了這兩個(gè)組件后，接下來可以編寫路由配置，在以前的計(jì)數(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了。

在這里插入圖片描述

在兩個(gè)新組件中分別加入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>;
}

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

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

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

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

這到底是怎么回事那？

其實(shí)每次狀態(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的第二個(gè)參數(shù)

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

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

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

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

為了更加深入了解第二個(gè)參數(shù)的作用，把計(jì)數(shù)器的代碼也加上 useEffect 和解綁方法，并加入第二個(gè)參數(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>
    );
}

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

但是如果我們想每次count發(fā)生變化，我們都進(jìn)行解綁，只需要在第二個(gè)參數(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>
    );
}

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

在這里插入圖片描述

總結(jié)

通過對(duì)本文的學(xué)習(xí)，讓我們對(duì)useEffect函數(shù)有了一個(gè)比較深入的了解，并且可以通過useEffect實(shí)現(xiàn)生命周期函數(shù)了，現(xiàn)在用React Hooks這種函數(shù)的方法編寫組件，對(duì)比以前用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;

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

您可能感興趣的文章: