reactjs - 当依赖项是一个对象时，如何使用 useCallback、useMemo 和 React.memo？

Question

我有useMemo当它的一个依赖项是Object我从服务器获得的，所以即使对象的内容是相同的 -useMemo因为对象本身每次都不同，所以在每次从服务器同步中一遍又一遍地调用它，当然 和 也是一样useCallback的React.memo。

我该如何解决这个问题？

我正在考虑手动检查新结果是否与以前的结果具有相同的内容，如果确实如此 - 保留以前的对象引用。

Answer 1

真的有两个选择：

• 按照您的计划执行，即如果对象与您收到的对象 深度相等（例如deep-equal在 npm 上），则不要更改对象：

  const [obj, setObj] = React.useState();
  // ...
  const newObj = await getObjectFromServer();
  // Using the function form of setState to avoid races and an extra
  // dependency on `obj`:
  setObj(oldObj => equal(newObj, oldObj) ? oldObj : newObj);
  

• 取决于使用的字段memo，而不是完整的对象：
  • 不是这个：

    React.useMemo(() => obj.foo + 8, [obj]);
    

  • 但是这个：

    React.useMemo(() => obj.foo + 8, [obj.foo]);
    

  obj.foo但是，这可能很容易变得麻烦，并且如果它本身不是原始的 ，那将无济于事。