useEffect 實現 componentWillUnmount生命週期函數（四）

在寫React應用的時候，在組件中常常用到componentWillUnmount生命週期函數（組件將要被卸載時執行）。好比咱們的定時器要清空，避免發生內存泄漏;好比登陸狀態要取消掉，避免下次進入信息出錯。因此這個生命週期函數也是必不可少的，這節課就來用useEffect來實現這個生命週期函數,並講解一下useEffect容易踩的坑。

useEffect解綁反作用

學習React Hooks 時，咱們要改掉生命週期函數的概念（人每每有先入爲主的毛病，因此很難改掉），由於Hooks叫它反作用，因此componentWillUnmount也能夠理解成解綁反作用。這裏爲了演示用useEffect來實現相似componentWillUnmount效果，先安裝React-Router路由,進入項目根本錄，使用npm進行安裝。

npm install --save react-router-dom

而後打開Example.js文件，進行改寫代碼，先引入對應的React-Router組件

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

在文件中編寫兩個新組件，由於這兩個組件都很是的簡單，因此就不單獨創建一個新的文件來寫了。

function Index() {
    return <h2>JSPang.com</h2>;
}
  
function List() {
    return <h2>List-Page</h2>;
}

有了這兩個組件後，接下來能夠編寫路由配置，在之前的計數器代碼中直接增長就能夠了。

return (
    <div>
        <p>You clicked {count} times</p>
        <button onClick={()=>{setCount(count+1)}}>click 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>
)

而後到瀏覽器中查看一下，看看組件和路由是否可用。若是可用，咱們如今能夠調整useEffect了。在兩個新組件中分別加入useEffect()函數:

function Index() {
    useEffect(()=>{
        console.log('useEffect=>老弟，你來了！Index頁面')
        )
    return <h2>JSPang.com</h2>;
}
  
function List() {
    useEffect(()=>{
        console.log('useEffect=>老弟，你來了！List頁面')
    })

    return <h2>List-Page</h2>;
}

這時候咱們點擊Link進入任何一個組件，在瀏覽器中都會打印出對應的一段話。這時候能夠用返回一個函數的形式進行解綁，代碼以下：

function Index() {
    useEffect(()=>{
        console.log('useEffect=>老弟你來了！Index頁面')
        return ()=>{
            console.log('老弟，你走了!Index頁面')
        }
    })
    return <h2>JSPang.com</h2>;
  }

這時候你在瀏覽器中預覽，咱們彷彿實現了componentWillUnmount方法。但這只是好像實現了，當點擊計數器按鈕時，你會發現老弟，你走了!Index頁面，也出現了。這究竟是怎麼回事那？其實每次狀態發生變化，useEffect都進行了解綁。

useEffect的第二個參數

那到底要如何實現相似componentWillUnmount的效果那?這就須要請出useEffect的第二個參數，它是一個數組，數組中能夠寫入不少狀態對應的變量，意思是當狀態值發生變化時，咱們才進行解綁。可是當傳空數組[]時，就是當組件將被銷燬時才進行解綁，這也就實現了componentWillUnmount的生命週期函數。

function Index() {
    useEffect(()=>{
        console.log('useEffect=>老弟你來了！Index頁面')
        return ()=>{
            console.log('老弟，你走了!Index頁面')
        }
    },[])
    return <h2>JSPang.com</h2>;
}

爲了更加深刻了解第二個參數的做用，把計數器的代碼也加上useEffect和解綁方法，並加入第二個參數爲空數組。代碼以下：

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)}}>click 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發生變化，咱們都進行解綁，只須要在第二個參數的數組裏加入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)}}>click 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狀態發生變化，都會執行解綁反作用函數，瀏覽器的控制檯也就打印出了一串=================。

轉自：https://jspang.com/posts/2019/08/12/react-hooks.html