Question

要限制useEffect在第一个渲染器上运行，我们可以这样做：

  const isFirstRun = useRef(true);
  useEffect (() => {
    if (isFirstRun.current) {
      isFirstRun.current = false;
      return;
    }

    console.log("Effect was run");
  });

根据此处的示例：https://stackoverflow.com/a/53351556/3102993

但是，如果我的组件具有多个useEffects，而每个useEffects处理不同的useState变化，该怎么办？我已经尝试在另一个useEffect中使用isFirstRun.current逻辑，但是由于一个返回，所以另一个仍然在初始渲染上运行。

某些上下文：

const Comp = () => {
const [ amount, setAmount ] = useState(props.Item ? Item.Val : 0);
const [ type, setType ] = useState(props.Item ? Item.Type : "Type1");

useEffect(() => {
    props.OnAmountChange(amount);
}, [amount]);

useEffect(() => {
    props.OnTypeChange(type);
}, [type]);

return {
    <>
        // Radio button group for selecting Type
        // Input field for setting Amount
    </>
}
}

我为每一个使用单独的useEffects的原因是因为如果我执行以下操作，它不会更新金额。

useEffect(() => {
    if (amount) {
        props.OnAmountChange(amount);
    } else if (type) {
        props.OnTypeChange(type)
    }
}, [amount, type]);

Answer 1

据我了解，您需要控制首次挂载和连续重新渲染时useEffect逻辑的执行。您要跳过第一个useEffect。效果在渲染组件之后运行。

因此，如果您正在使用此解决方案：

const isFirstRun = useRef(true);
  useEffect (() => {
    if (isFirstRun.current) {
      isFirstRun.current = false;
      return;
    }

    console.log("Effect was run");
  });
   useEffect (() => {
    // second useEffect
    if(!isFirstRun) {
        console.log("Effect was run");
     }

  });

因此，在这种情况下，一旦将isFirstRun ref设置为false，对于所有连续的作用，isFirstRun的值将变为false，因此所有这些都将运行。

您可以做的是在useMount自定义钩子行中使用它，它可以告诉您是第一次渲染还是连续重新渲染。这是示例代码：

const {useState} = React

function useMounted() {
  const [isMounted, setIsMounted] = useState(false)


  React.useEffect(() => {
    setIsMounted(true)
  }, [])
  return isMounted
}

function App() {


  const [valueFirst, setValueFirst] = useState(0)
  const [valueSecond, setValueSecond] = useState(0)

  const isMounted = useMounted()

  //1st effect which should run whenever valueFirst change except
  //first time
  React.useEffect(() => {
    if (isMounted) {
      console.log("valueFirst ran")
    }

  }, [valueFirst])


  //2nd effect which should run whenever valueFirst change except
  //first time
  React.useEffect(() => {
    if (isMounted) {
      console.log("valueSecond ran")
    }

  }, [valueSecond])

  return ( <
    div >
    <
    span > {
      valueFirst
    } < /span> <
    button onClick = {
      () => {
        setValueFirst((c) => c + 1)
      }
    } >
    Trigger valueFirstEffect < /button> <
    span > {
      valueSecond
    } < /span> <
    button onClick = {
      () => {
        setValueSecond((c) => c + 1)
      }
    } >
    Trigger valueSecondEffect < /button>

    <
    /div>
  )
}

ReactDOM.render( < App / > , document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

我希望它能帮到您！

Answer 2

您可以使用单个useEffect来实现这两种效果，而您只是错误地实现了逻辑。

您的原始尝试：

useEffect(() => {
  if (amount) {
      props.OnAmountChange(amount);
  } else if (type) {
      props.OnTypeChange(type)
  }
}, [amount, type]);

这里的问题是if/elseif，请将其视为独立的效果：

useEffect(() => {
  if (amount !== 0) props.onAmountChange(amount);
  if (type !== "Type1") props.onTypeChange(type);
}, [amount, type])

在此方法中，如果该值与原始值不同，则将调用on change。但是，这存在一个错误，即如果用户曾经将值切换回默认值，将无法使用。所以我建议改为像这样实现全部代码：

const Comp = () => {
  const [ amount, setAmount ] = useState(null);
  const [ type, setType ] = useState(null);

  useEffect(() => {
    if (amount !== null) {
      props.onAmountChange(amount);
    } else {
      props.onAmountChange(0);
    }
  }, [amount]);

  useEffect(() => {
    if (type !== null) {
      props.onTypeChange(type);
    } else {
      props.onTypeChange("Type1");
    }
  }, [type]);

  return (
    <>
        // Radio button group for selecting Type
        // Input field for setting Amount
    </>
  )
}

通过使用null作为初始状态，可以延迟调用props方法，直到用户在Radio中设置一个更改状态的值为止。

有多个useEffects时跳过第一个useEffect

2 个答案: