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