React Hooks学习之旅二：useEffect替代生命周期函数

useEffect可以替代生命周期函数componentDidMount、componentDidUpdate和componentWillUnmount。

useEffect替代componentDidMount和componentDidUpdate

修改Example.js：

import React, { useState,useEffect } from 'react';

/**useState可以设置和改变状态 */
function Example(){
    const [count,setCount] = useState(0);//数组解构
    /**useEffect替代生命周期函数componentDidMount和componentDidUpdate */
    useEffect(()=>{
        console.log('useEffect => You clicked '+count+' times');
    })
    return(
        <div>
            <p>You clicked {count} times</p>
            <button 
                onClick={()=>{setCount(count+1)}}
            >
                Click me
            </button>
        </div>
    )
}

export default Example;

点击打印。

页面加载完毕时执行一次。

页面更新一次自动执行一次。

useEffect替代componentWillUnmount

组件销毁前执行componentWillUnmount。我们使用路由来实现销毁动作。

安装路由：

npm install --save react-router-dom

在Example.js中引入Router、Link、Route：

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

配置两个组件的路由：

function Index(){
    useEffect(()=>{
        console.log("useEffect=>老弟，你来了！Index页面");
    })
    return <h2>Juan.com</h2>
}

function List(){
    console.log("useEffect=>老弟，你来了！List页面");
    return <h2>List.com</h2>
}


/**useState可以设置和改变状态 */
function Example(){
    const [count,setCount] = useState(0);//数组解构
    /**useEffect替代生命周期函数componentDidMount和componentDidUpdate */
    useEffect(()=>{
        console.log('useEffect => You clicked '+count+' times');
    })
    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=>老弟，你来了！List页面”；

进入列表页显示“useEffect=>老弟，你来了！List页面”。

修改Example.js，在useEffect中添加return实现解绑：

function Index(){
    useEffect(()=>{
        console.log("useEffect=>老弟，你来了！Index页面");
        //销毁
        return ()=>{
            console.log('老弟！你走了！Index');
        }
    },[]) /**空数组表示只有当该组件销毁时才执行return，如果数组中有值则表示只有当这个值变化时才执行 */
    return <h2>Juan.com</h2>
}

实现效果：