二、useEffect() 的点点滴滴

1 如何判断多个值都改变了才执行 useEffect 内部方法?

import React, { useState, useEffect, useRef } from "react"

const One = () => {
    const [a, setA] = useState(0)
    const [b, setB] = useState(0)
    const ref = useRef({ a, b })

    useEffect(() => {
        let { a: prevA, b: prevB } = ref.current
        console.log("更新前:", prevA, prevB)
        console.log("更新后:", a, b)

        if (prevA !== a && prevB !== b) {
            console.log("update!")
            ref.current = { a, b }
        }
    }, [a, b])

    return (
        <>
            <h1>{a + b}</h1>
            <button onClick={(_) => setA((d) => d + 1)}>Chang A</button>
            <button onClick={(_) => setB((d) => d + 1)}>Chang B</button>
        </>
    )
}

export default One