一個(gè)簡(jiǎn)單的 useEffect 示例如下，它會(huì)在每次 render 之后執(zhí)行，包括首次的 render 以及每次更新后的 render

useEffect(() => {
    console.log('useEffect with no dependency')
})

useEffect 規(guī)則

• 在每次 render 之后執(zhí)行
• 接受第二個(gè)參數(shù)來(lái)控制跳過(guò)執(zhí)行，下次 render 后如果指定的值沒(méi)有變化就不會(huì)執(zhí)行
• useEffect 是在 render 之后瀏覽器已經(jīng)渲染結(jié)束才執(zhí)行

參數(shù)的規(guī)則

• 它是可選的
• 類(lèi)型是一個(gè)數(shù)組
• 它的值應(yīng)該是 props 或 state

不同值的參數(shù)

• 不傳參數(shù)
• 空數(shù)組
• 一個(gè)值的數(shù)組
• 多個(gè)值的數(shù)組

不傳參數(shù)

useEffect(() => {
    console.log('useEffect with no dependency')
})

如上所示，默認(rèn)的行為，會(huì)每次 render 后都執(zhí)行

空數(shù)組

useEffect(() => {
    console.log('useEffect with empty dependency')
}, [])

傳入第二個(gè)參數(shù)，每次 render 后比較數(shù)組的值沒(méi)變化，不會(huì)在執(zhí)行，等同于類(lèi)組件中的 componentDidMount

一個(gè)值的數(shù)組

useEffect(() => {
    console.log('useEffect widh specify dependency')
}, [id])

傳入第二個(gè)參數(shù)，只有一個(gè)值，比較該值有變化就執(zhí)行

多個(gè)值的數(shù)組

useEffect(() => {
    console.log('useEffect widh specify dependency')
}, [id, name])

傳入第二個(gè)參數(shù)，有2個(gè)值的數(shù)組，會(huì)比較每一個(gè)值，有一個(gè)不相等就執(zhí)行

一個(gè)例子

function Detail () {
    const [ name, setName ] = useState()

    useEffect(() => {
        function onLoad(data) {
            setName(data.name)
        }
        EventCenter.on('load', onLoad)
        
        return (() => {
            EventCenter.off('load', onLoad)
        })
    }, [])

    return(
        <div>{name}</div>
    )
}

// 示例二
function Goods ({ id }) {
    const [ name, setName ] = useState()

    useEffect(() => {
        fetchApi(id).then(data => setName(data.name))
    }, [])

    return(
        <div>{name}</div>
    )
}

比較上面兩個(gè)例子都使用空數(shù)組的參數(shù)，對(duì)應(yīng)的 effect 只執(zhí)行一次，在某些情況下是沒(méi)問(wèn)題的，但對(duì)于示例二，如果 porps.id 變化了就會(huì)遇到問(wèn)題，一直請(qǐng)求的是上一次的 id 數(shù)據(jù)，所以 useEffect 應(yīng)該傳入?yún)?shù) [id]。

一般要盡可能的指定 useEffect 的參數(shù)，且要包含當(dāng)前 effect 使用的所有變量，除非明確知道當(dāng)前 effect 只執(zhí)行一次。