使用apiOptions的状态值

我不确定您是如何使用自定义钩子的，但是apiOptions通过使用创建状态值useState应该可以正常工作。通过这种方式，您可以将其作为状态值提供给您的自定义钩子，如下所示：

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按照此处的描述编写一个深度比较：

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.

我刚刚找到了一个对我有用的解决方案。

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

例子 ：

const useExample = (apiOptions) => {

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

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

您可以从官方 React Hook 文档 中找到它。

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

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

如果输入足够浅，您认为深度相等仍然很快，请考虑使用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
    };
};

请注意，它不会比较功能。

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

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