React 基础 useEffectt

useEffect 不要对依赖项撒谎

• useEffect 回调函数中用到的数据 （count） 就是依赖数据，就应该出现在依赖项数组中
• 如果 useEffect 回调函数中用到了某个数据，但是没有出现在依赖项数组中，就会导致一些 BUG 出现 （例如不会更新）
• 所以 不要对 useEffect 的依赖项撒谎

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

const App = () => {
    const [count, setCount] = useState(0)
    useEffect(() => {
        // React Hook useEffect has a missing dependency: 'count'. Either include it or remove the dependency array
        document.title = count
    }, [])
    return (
        <div>
            <p>count: {count}</p>
            <button onClick={() => setCount(count + 1)}>update count</button>
        </div>
    )
}

export default App

触发时机：第一次渲染会执行，任何数据变化导致组件更新时执行，相当与 componentDidMount + componentDidUpdate

useEffect (()=>{})

触发时机：只在组件第一次渲染时执行，相当于 componentDidMount 

useEffect(() => {}, [])

触发时机：第一次渲染会执行，当 count 变化时会再次执行，相当于 componentDidMount + componentDidUpdate

useEffect(() => {}, [count])

 useEffect 清理副作用

• useEffcet 可以返回一个函数 这个函数被称为清理函数 ，在此函数内用来执行清理相关的操作（例如事件解绑，清除定时器等）
• 清理函数的执行时机
  • a，useEffect 的第二个参数可以不写，清理函数会在下一次副作用回调函数时以及组件卸载时执行，用于清除上一次或卸载前的副作用
  • b，useEffect 的第二个参数为空数组，那么会在组件卸载时执行，相当于组件的 componentWillUnmont
• 一般一个useEffect 只用来处理一个功能，有多个功能时，建议使用useEffect