react hook问题

Question

如何实现a、b同时改变，才执行effect

useEffect(() => {
    // …
    
}, [a,b,c]);

Answer 1

你可以考虑实现一个自定义对比的hook

const useCustorCompareEffect = (callback, value, compare) => {
  const prev = useRef({ init: true, value })
  useEffect(() => {
    const { current } = prev
    if (current.init) {
      callback()
      current.init = false
    } else {
      if (!compare || !compare(value, current.value)) {
        callback()
        current.value = value
      }
    }
  }, [callback, value, compare])
}
const Demo = () => {
  const [state, setState] = useState({ a: 0, b: 0, c: 0 })
  const { a, b, c } = state
  const compare = ([curr], [prev]) => {
    return curr[0] !== prev[0] && curr[1] !== prev[1]
  }
  useCustorCompareEffect(() => {
    console.log(a, b, c)
  }, [a, b, c], compare)
}