React Hooks - useEffect

• useEffect() 让我们在 function component 内也可以实现 class function 中的生命周期componentDidMount()、componentDidUpdate() 和 componentWillUnmount()。
• 专门处理 side effect，包括 Dom 操作、数据请求、萤幕刷新、计时器、设定 subscription ...等。
• 让 component 在 render 後做一些事情，React 会记住我们在 useEffect() 里传递的 function，并在 render 後呼叫它。
• 在任何情况下，只要第一次 render 都会触发 useEffect()。

用法：

useEffect(() => {
    // effect 

    return () => {
        // Cleanup function
    }
}, [// Updating])

第一个参数为 function，告诉 React 渲染完毕要执行什麽内容，而 useEffect 回传的是一个清除的函式（类似 class component 的 componentWillUnmount()），在 component 将要被卸载时触发，若不需要清除，就可以将回传值省略为空。

需要清除的函式通常为：取消订阅、取消网路请求、取消计时器等。

第二个参数是更新状态的地方，如果不需更新，第二个参数可省略。

• 如果第二个参数是一个 dependacy array，此时 useEffect() 会在渲染的第一次执行之外，也会在第二个参数的值被改变时执行（类似 class component 的 componentDidUpdate()）。

useEffect(() => {
    // 要做的事
},[dependacy array])

• 如果没有第二个参数，代表监测所有的东西，只要 state 或 props 有发生任何改变就会触发 useEffect()，state 或 props 的值被更新几次就执行几次

useEffect(() => {
    // 要做的事
})

• 如果第二个参数是空阵列，代表谁也不监测，只会在 component 渲染的第一次执行（类似 class component 的 componentDidMount()）

useEffect(() => {
    // 要做的事
},[])

• 只要重新渲染，就会执行所有 useEffect

例如：

import React,{ useState, useEffect } from 'react'
const HookUseEffect = () => {
    const [count, setCount] = useState(0);
    const [test, setTest] = useState("test");
    
    // 1. 没有第二个参数，每次都执行
    useEffect(()=>{
        console.log('我每次都会执行');
    })
    
    // 2. 第二个参数是空阵列，只会执行第一次
    useEffect(()=>{
        console.log('我只会执行第一次');
    },[])
    
    // 3. 第二个参数不是空阵列，这个参数的状态有被改变时就会执行
    useEffect(() => {
        console.log('test 被改变我就执行');
    }, [test])
    
    return (
        <div>
            <h3>Hook UseEffect</h3>
            <p>{count}</p>
            <button onClick={() => { setCount(count + 1) }}>Click</button>
            <br />
            <p>{test}</p>
            <button onClick={() => { setTest(test.toUpperCase())} }>Test</button>
        </div>
    )
}
export default HookUseEffect

执行上面的程序码後，可以看到在网页一被打开时，console 就会显示三个讯息，是因为在第一次渲染时会执行所有的 useEffect。

点击 click 时，因为 count 被改变，在 console 可以看到每次点击 click 时都会触发第一个 useEffect() 执行，下图是点击 click 2 下的结果，useEffect() 被执行两次。

接着点击 test ，在 console 可以看到第三个 useEffect() 被执行，第三个 useEffect 会因为 test 的状态被改变就执行。
但这时也可以看到第一个 useEffect() 被执行了，是因为第一个 useEffect() 没有第二个参数，所以只要在 component 中有任何一个状态被改变都会执行。