Question

当前正在运行react和redux。在下面的简单代码中，我将[]作为依赖项，

这是否意味着useCallback在页面加载时仅被调用一次？还是在state.test['data']的redux状态得到更新时，将调用useCallback？

const mapState = useCallback(state => {
    return {
      data: state.test['data'],
    };
  }, []);

  const {
    data
  } = useMappedState(mapState);

关注问题1

如果我想听听state.test['data']的变化，该怎么办？ [state.test['data']]会抱怨state未定义。

关注问题2

那我需要听听多个状态的变化呢？

const mapState = useCallback(state => {
    return {
      data1: state.test['data1'],
      data2: state.test['data2'],
      dataN: state.test['dataN'],
    };
  }, []);

  const {
    data
  } = useMappedState(mapState);

我如何确保data1, data2, dataN已更新？

Answer 1

这意味着mapState函数将不会在任何后续渲染中重新创建。由于它没有任何依赖性，因此只能创建一次。

例如

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);
//Returns a memoized callback.

传递内联回调和一系列依赖项。 useCallback将返回回调的记忆版本，只有在其中一个依赖项发生更改时，该更改才会更改。将回调传递给依赖于引用相等性的优化子组件以防止不必要的呈现时（例如 shouldComponentUpdate ）。

Answer 2

按照docs

useCallback返回仅在其中一个依赖项已更改的情况下更改的回调的备注版本

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

因此，只要相关值a or b中的任何一个发生变化，useCallback都会再次调用。

这是否意味着useCallback仅在页面加载时被调用一次？

不能保证，它完全取决于数组中传递的依赖项。如果其值更改，则会调用useCallback。

编辑：

您的用例不需要useCallback。useSelector用于此用例。

const mapState = useSelector(function (state) {
    return {
        data: state.test['data']
    };
});

const {
    data
  } = useMappedState(mapState);

涉及redux状态和空依赖项数组时，何时调用useCallback？

2 个答案: