Question

useEffect(() => {
  // do something
}, [stringProp]);

stringProp默认为空字符串。

当我将stringProp更改为foobar时，效果开始运行。

但是

useEffect也在第一次安装组件时运行，这是我不希望的。

仅在道具变更时如何运行效果挂钩？

Answer 1

首次安装组件时，您无法停止useEffect运行，但是您可以执行条件检查以在其中运行代码，如下所示：

useEffect(() => {
  // Only run when stringProp has value, you might have different condition, add them there
  if(stringProp){
    // do something
  }
}, [stringProp]);

已更新：如果您可以将stringProp设置回初始值，则可以使用useRef来控制像这样的首次运行

const isFirstTimeOfUseEffect = useRef(true)
useEffect(() => {
  // Only run when stringProp has value, you might have different condition, add them there
  if(!firstUseEffectRun.current){
    // do something
  }else{
    firstUseEffectRun.current = false
  }
}, [stringProp]);

Answer 2

我已经使用ref

解决了很多问题

const firstRun = useRef(true);
...
useEffect(() => {
  // skip the first run
  if (firstRun.current) {
    firstRun.current = false;
    return;
  }

  // do stuff
}, [stringProp]);

仅在道具更改时才反应钩子？

2 个答案: