React-Hooks-useEffect

useEffect Hook 概述

• 可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个生命周期函数的组合

useEffect Hook 特点

• 可以设置依赖, 只有依赖发生变化的时候才执行可以设置依赖, 只有依赖发生变化的时候才执行

示例演示代码如下：

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

function Home() {
    const [nameState, setNameState] = useState('Jonathan_Lee');
    const [ageState, setAgeState] = useState(0);

    useEffect(() => {
        // componentDidMount
        // componentDidUpdate
        console.log('组件被挂载或者组件更新完成');

        return () => {
            // componentWillUnmount
            console.log('组件即将被卸载');
        }
    });
    return (
        <div>
            <p>{nameState}</p>
            <button onClick={() => {
                setNameState('BNTang')
            }}>修改
            </button>
            <p>{ageState}</p>
            <button onClick={() => {
                setAgeState(ageState + 1)
            }}>增加
            </button>
            <button onClick={() => {
                setAgeState(ageState - 1)
            }}>减少
            </button>
            <hr/>
        </div>
    )
}

export default function App() {
    const [isShowState, setIsShowState] = useState(true);
    return (
        <div>
            {isShowState && <Home/>}
            <button onClick={() => {
                setIsShowState(!isShowState)
            }}>切换Home组件
            </button>
        </div>
    )
}

定义了一个 App 组件，然后在当中用一个按钮来控制 Home 的显示与隐藏，然后呢，点击 Home 组件不同的按钮观察一下生命周期输出到控制台的信息即可。

useEffect Hook 对比类组件生命周期方法的优势：

• 易于拆分

例如在之前的类组件的生命周期方法，在组件被挂载的时候要做一些其它的事情，就需要全部写在一个方法当中但是用了 useEffect Hook 就可以完美的解决该问题示例如下：

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

function Home() {
    const [nameState, setNameState] = useState('Jonathan_Lee');
    const [ageState, setAgeState] = useState(0);

    useEffect(() => {
        // 组件被挂载
        console.log('修改DOM');
    });

    useEffect(() => {
        // 组件被挂载
        console.log('注册监听');
        return () => {
            console.log('移出监听');
        }
    });

    useEffect(() => {
        console.log('发送网络请求');
    });
    return (
        <div>
            <p>{nameState}</p>
            <button onClick={() => {
                setNameState('BNTang')
            }}>修改
            </button>
            <p>{ageState}</p>
            <button onClick={() => {
                setAgeState(ageState + 1)
            }}>增加
            </button>
            <button onClick={() => {
                setAgeState(ageState - 1)
            }}>减少
            </button>
            <hr/>
        </div>
    )
}

export default function App() {
    const [isShowState, setIsShowState] = useState(true);
    return (
        <div>
            {isShowState && <Home/>}
            <button onClick={() => {
                setIsShowState(!isShowState)
            }}>切换Home组件
            </button>
        </div>
    )
}