小编Mic*_*dis的帖子

当 props 改变时更新状态时，常用 的 方法useEffect()是将 props 作为依赖项使用：

const Component = ({prop}) => {
  const [state, setState] = useState(prop);

  useEffect(() => {
    setState(prop);
  }, [prop]);

  return <div>{state}</div>;
}

我想知道，与直接在组件本身中进行比较相比，这是否有优势，如下所示：

const Component = ({prop}) => {
  const [state, setState] = useState(prop);

  if (prop !== state) {
    setState(prop);
  }

  return <div>{state}</div>;
}

看起来这两种方法都会导致组件执行两次——一次 prop 和状态不同步，一次同步——但第二种方法看起来避免了向堆栈添加钩子。它看起来也可以在 DOM 协调之外进行优化，因为它不必像 useEffect() 那样等待 DOM 生成。我什至不确定它是否比“The Hooks Way”更容易阅读。

有谁知道为什么 useEffect() 路线比内联检查更好？