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

Question

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

useEffect第二个参数是一个数组, 判断其中的值变化才执行内部方法, 但是有没有什么好的办法让他判断多个值都变了才执行内部方法? (就比如判断a和b都变了才去todo, 不要那种在数组里判断a再在里面判断b的方法...)

useEffect(() => {
   // todo....
}, [a, b]);

Answer 1

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;

Answer 2

function App () {
    const [a, setA] = useState(0)
    const [b, setB] = useState(0)
    const changes= useRef(0)
    
    useEffect(() => {
        if (changeNum.current === 3) {
            // do something...
            changeNum.current = 0
        }
    }, [a, b])
    
    const onAChange = (value) => {
        setA(value)
        changeNum.current |= 1
    }

    const onBChange = (value) => {
        setB(value)
        changeNum.current |= 2
    }
    
    return <div>
        <A onChange={onAChange} />
        <B onChange={onBChange} />
    </div>
}

Answer 3

还是老老实实写两个 useEffect 函数吧

useEffect(() => {
   // todo....
}, [a]);

useEffect(() => {
   // todo....
}, [b]);

Answer 4

没有想到需要这种逻辑的场景