React组件渲染等触发函数useEffect

React组件渲染等触发函数useEffect

React中的useEffect与Vue中的onMounted有相似性，但useEffect功能要多于onMounted

函数语法：useEffect(() => {},[])

说明：第一个参数是触发后处理函数，第二个参数为要监视数据的数组

一、不传递监视数组

不传递第二个参数时：

​ ① 处理函数触发时机为：初次渲染、组件更新

​ ② 处理函数的返回函数执行时机：初次渲染、组件更新、组件卸载

​ ③ useEffect函数默认监视当前组件的所有状态数据（响应式数据）

使用如下：

function Counter() {
    const [count, setCount] = useState(1)
    useEffect(
        /*    处理函数触发时机：初次渲染、组件更新   */
        () => {
            console.log(`count=${count}`)
            /*
                返回的函数执行时机：
                    初次渲染执行、组件更新执行、组件卸载执行
             */
            return () => {
                console.log('计数器Counter被卸载...')
            }
        }
    )
    return (
        <div>
            <div>{count}</div>
            <button onClick={() => setCount(count + 1)}>count++</button>
        </div>
    )
}
export default function App() {
    const [showCounterStatus, setShowCounterStatus] = useState(true)
    return (
        <div>
            {
                showCounterStatus &&
                <Counter></Counter>
            }
            <button onClick={() => setShowCounterStatus(!showCounterStatus)}>{showCounterStatus?'卸载':'安装'}计数器</button>
        </div>
    )
}

二、传递监视的数据为空数组

将第二个参数传递为空数组时：

​ ① 处理函数触发时机为：初次渲染

​ ② 处理函数的返回函数执行时机：组件卸载

​ ③ useEffect函数不监视任何状态数据

使用如下：

function Counter() {
    const [count, setCount] = useState(1)
    useEffect(
        /*    处理函数触发时机：初次渲染   */
        () => {
            console.log(`count=${count}`)
            /* 返回的函数执行时机：组件卸载执行 */
            return () => {
                console.log('计数器Counter被卸载...')
            }
        },
        []
    )
    return (
        <div>
            <div>{count}</div>
            <button onClick={() => setCount(count + 1)}>count++</button>
        </div>
    )
}
export default function App() {
    const [showCounterStatus, setShowCounterStatus] = useState(true)
    return (
        <div>
            {
                showCounterStatus &&
                <Counter></Counter>
            }
            <button onClick={() => setShowCounterStatus(!showCounterStatus)}>{showCounterStatus?'卸载':'安装'}计数器</button>
        </div>
    )
}

三、传递需要监视的数据

将第二个参数传递为需要被监视数据的数组时：

​ ① 处理函数触发时机为：初次渲染、监视数据变化

​ ② 处理函数的返回函数执行时机：初次渲染、监视数据变化、组件卸载

​ ③ useEffect函数监视的数据为第二个参数传递的数组

使用如下：

function Counter() {
    const [count, setCount] = useState(1)
    useEffect(
        /*    处理函数触发时机：初次渲染、监视数据变化   */
        () => {
            console.log(`count=${count}`)
            /*
                返回的函数执行时机：
                    初次渲染、监视数据变化、组件卸载
             */
            return () => {
                console.log('计数器Counter被卸载...')
            }
        },
        [count]
    )
    return (
        <div>
            <div>{count}</div>
            <button onClick={() => setCount(count + 1)}>count++</button>
        </div>
    )
}
export default function App() {
    const [showCounterStatus, setShowCounterStatus] = useState(true)
    return (
        <div>
            {
                showCounterStatus &&
                <Counter></Counter>
            }
            <button onClick={() => setShowCounterStatus(!showCounterStatus)}>{showCounterStatus?'卸载':'安装'}计数器</button>
        </div>
    )
}

总结

​ Vue中的onMounted只会在组件初次挂载完毕之后执行一次，

​ React中的useEffect可以在初次挂载完毕、组件更新、组件卸载等时刻执行

😄😄😄