React-Hooks之useEffect()

1. 什么是useEffect Hook?

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

2. useEffect Hook特点?

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

    const [nameState, setNameState] = useState('ccnu');
    const [ageState, setAgeState] = useState(0);
    useEffect(()=>{
        // componentDidMount
        // componentDidUpdate
        console.log('组件被挂载或者组件更新完成');
        return ()=>{
            // componentWillUnmount
            console.log('组件即将被卸载');
        }
    });
    return (
        <div>
            <p>{nameState}</p>
            <button onClick={()=>{setNameState('it666')}}>修改</button>
            <p>{ageState}</p>
            <button onClick={()=>{setAgeState(ageState + 1)}}>增加</button>
            <button onClick={()=>{setAgeState(ageState - 1)}}>减少</button>
            <hr/>
        </div>
    )
}
function App() {
    const [isShowState, setIsShowState] = useState(true);
    return (
        <div>
            {isShowState && <Home/>}
            <button onClick={()=>{setIsShowState(!isShowState)}}>切换</button>
        </div>
        )
}
export default App;

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

有分而治之的思想，易于拆分，可以将某一数据的处理全部放在一个effect中

function Home() {
    const [nameState, setNameState] = useState('lnj');
    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('it666')}}>修改</button>
            <p>{ageState}</p>
            <button onClick={()=>{setAgeState(ageState + 1)}}>增加</button>
            <button onClick={()=>{setAgeState(ageState - 1)}}>减少</button>
            <hr/>
        </div>
    )
}
function App() {
    const [isShowState, setIsShowState] = useState(true);
    return (
        <div>
            {isShowState && <Home/>}
            <button onClick={()=>{setIsShowState(!isShowState)}}>切换</button>
        </div>
        )
}
export default App;