Question

我要实现的目标：

我对useCallback和useMemo React Hooks还是很陌生，我仍在为每个钩子找出正确的用例。下面是我的组件，当props.orangeCountyCasesCityData发生变化时，该数组中的所有值都将减少为总计。

有人可以确认这是useCallback钩子的正确用法，也是useEffect钩子中的正确用法。

我的逻辑：

当props.orangeCountyCasesCityData更改时，将调用useEffect挂钩。
如果数组长度大于1，则在calculateTotal挂钩中调用useEffect。
calculateTotal使用useCallback钩子，以便记住减少的值。这是正确的/我错过了什么吗？

组件（当前）：

  // React Hooks: Lifecycle Methods
  useEffect(() => {
    // Check If Data
    if (props.orangeCountyCasesCityData.length >= 1) {
      // All Cases Total
      let allCasesTotal = props.orangeCountyCasesCityData.reduce((a, b) => a + b, 0);

      // Set Total
      setTotal(allCasesTotal);
    }
  }, [props.orangeCountyCasesCityData]);

组件（正确使用useCallback吗？）：

  // React Hooks: Lifecycle Methods
  useEffect(() => {
    // Calculate Total
    const calculateTotal = useCallback(() => {
      // All Cases Total
      let allCasesTotal = props.orangeCountyCasesCityData.reduce((a, b) => a + b, 0);

      // Set Total
      setTotal(allCasesTotal);
    });

    // Check If Data
    if (props.orangeCountyCasesCityData.length >= 1) {
      // Calculate Total
      calculateTotal();
    }
  }, [props.orangeCountyCasesCityData]);

组件（useMemo）：

  // Total
  const total = useMemo(() => {
    // Check If Data Exists
    if (props.orangeCountyCasesCityData.length >= 1) {
      // All Cases Total
      let allCasesTotal = props.orangeCountyCasesCityData.reduce((a, b) => a + b, 0);

      return allCasesTotal;
    }
  }, [props.orangeCountyCasesCityData]);

反应：正确使用useCallback挂钩？

0 个答案: