反应 useEffect 比较对象

Question

我正在使用 react useEffect 钩子并检查对象是否已更改，然后才再次运行钩子。

我的代码如下所示。

const useExample = (apiOptions) => {
    const [data, updateData] = useState([]);
    useEffect(() => {
       const [data, updateData] = useState<any>([]);
        doSomethingCool(apiOptions).then(res => {               
           updateData(response.data);
       })
    }, [apiOptions]);

    return {
        data
    };
};

不幸的是，由于对象未被识别为相同，它一直在运行。

我相信下面是一个例子。

const objA = {
   method: 'GET'
}

const objB = {
   method: 'GET'
}

console.log(objA === objB)

也许运行JSON.stringify(apiOptions) 有效？

Answer 1

使用apiOptions 作为状态值

我不确定您是如何使用自定义挂钩的，但使用 useState 将 apiOptions 设为状态值应该可以正常工作。这样您就可以将其作为状态值提供给您的自定义钩子，如下所示：

const [apiOptions, setApiOptions] = useState({ a: 1 })
const { data } = useExample(apiOptions)

这种方式只有在你使用setApiOptions时才会改变。

示例 #1

import { useState, useEffect } from 'react';

const useExample = (apiOptions) => {
  const [data, updateData] = useState([]);
  
  useEffect(() => {
    console.log('effect triggered')
  }, [apiOptions]);

  return {
    data
  };
}
export default function App() {
  const [apiOptions, setApiOptions] = useState({ a: 1 })
  const { data } = useExample(apiOptions);
  const [somethingElse, setSomethingElse] = useState('default state')

  return <div>
    <button onClick={() => { setApiOptions({ a: 1 }) }}>change apiOptions</button>
    <button onClick={() => { setSomethingElse('state') }}>
      change something else to force rerender
    </button>
  </div>;
}

或者

您可以编写一个深度可比较的useEffect，如here 所述：

function deepCompareEquals(a, b){
  // TODO: implement deep comparison here
  // something like lodash
  // return _.isEqual(a, b);
}

function useDeepCompareMemoize(value) {
  const ref = useRef() 
  // it can be done by using useMemo as well
  // but useRef is rather cleaner and easier

  if (!deepCompareEquals(value, ref.current)) {
    ref.current = value
  }

  return ref.current
}

function useDeepCompareEffect(callback, dependencies) {
  useEffect(
    callback,
    dependencies.map(useDeepCompareMemoize)
  )
}

您可以像使用 useEffect 一样使用它。

Answer 2

我刚刚找到了一个适合我的解决方案。

您必须使用来自 Lodash 的 usePrevious() 和 _.isEqual()。 在useEffect() 中，如果previous apiOptions 等于current apiOptions，则放置一个条件。如果为真，什么都不做。如果为假 updateData().

例子：

const useExample = (apiOptions) => {

     const myPreviousState = usePrevious(apiOptions);
     const [data, updateData] = useState([]);
     useEffect(() => {
        if (myPreviousState && !_.isEqual(myPreviousState, apiOptions)) {
          updateData(apiOptions);
        }
     }, [apiOptions])
}

usePrevious(value) 是一个自定义钩子，它使用useRef() 创建一个ref。

你可以从Official React Hook documentation找到它。

const usePrevious = value => {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
};

Answer 3

如果输入足够浅，以至于您认为深度相等仍然很快，请考虑使用JSON.stringify：

const useExample = (apiOptions) => {
    const [data, updateData] = useState([]);
    const apiOptionsJsonString = JSON.stringify(apiOptions);

    useEffect(() => {
       const apiOptionsObject = JSON.parse(apiOptionsJsonString);
       doSomethingCool(apiOptionsObject).then(response => {               
           updateData(response.data);
       })
    }, [apiOptionsJsonString]);

    return {
        data
    };
};

注意它不会比较函数。

Answer 4

如果您确定无法控制apiOptions，那么只需将本机useEffect 替换为https://github.com/kentcdodds/use-deep-compare-effect。

Answer 5

您可以使用 useDeepCompareEffect、useCustomCompareEffect 或编写自己的钩子。

https://github.com/kentcdodds/use-deep-compare-effect https://github.com/sanjagh/use-custom-compare-effect

Answer 6

假设您的apiOptions 的很大一部分是静态的，并且在组件重新渲染时不会改变，我建议采用以下方法：

const useExample = (apiOptions, deps) => {

  useEffect(callback, deps);

  return { ... };
};

这个想法是只传输效果所依赖的值数组作为第二个参数