在线Demo

在线Demo：戳这里

    const [count, setCount] = useState(0);

    // // 执行时机：挂载 + 更新 
    // useEffect(() => {
    //     console.log("effect ->", count)
    // })

    // // 执行时机：挂载 + count更新 
    // useEffect(() => {
    //     console.log("effect ->", count)
    // },[count])

    // // 执行时机：挂载 
    // useEffect(() => {
    //     console.log("effect ->", count)
    // },[])

    // // 执行时机: ① 挂载 + 更新， ② 更新 + 卸载   在更新时，会在①之前执行
    // useEffect(() => {
    //     console.log("effect ->", count) ; // ①
    //     return () => { 
    //         console.log("clear effect ->", count); // ②  作用：清除上一次useEffect
    //     }
    // })

    // // 执行时机: ① 挂载 ， ② 卸载 
    // useEffect(() => {
    //     console.log("effect ->", count) ; // ①
    //     return () => { 
    //         console.log("clear effect ->", count); // ②  
    //     }
    // },[])

    // 执行时机: ① 挂载 + count更新 ， ② count更新 + 卸载 ，在更新时，会在①之前执行
    useEffect(() => {
        console.log("effect ->", count) ; // ①
        return () => { 
            console.log("clear effect ->", count); // ②   作用：清除上一次useEffect
        }
    },[count])

总结：

• 想在挂载阶段只执行一次，useEffect(()=>{},[])
• 想在每次挂载和依赖项更新执行：useEffect(()=>{},[count])
• 想在卸载阶段每次都执行：useEffect(()=>{ return ()=>{} }) 可以每次清除上一次effect
• 想在卸载阶段执行一次：useEffect(()=>{ return ()=>{} }，[])