使用带有空依赖数组和条件的`useEffect`有什么区别？

Question

根据 React 文档中概述的文章：You Might Not Need An Effect，他们解释说只应执行一次的逻辑应包装在 init 子句中。

即

// Will run init flow only once per application lifecycle

let didInit = false;

function App() {
  useEffect(() => {
    if (!didInit) {
      didInit = true;

      loadDataFromLocalStorage();
      checkAuthToken();
    }
  }, []);
}

或者：

// Will run init flow whenever component is mounted

function App() {
  const didInit = useRef(false);

  useEffect(() => {
    if (!didInit.current) {
      didInit.current = true;

      loadDataFromLocalStorage();
      checkAuthToken();
    }
  }, []);
}

但是，如果移到效果之外，行为保持不变。因此，如果行为相同，为什么需要钩子？

Answer 1

将逻辑移到

useEffect

之外将导致不同的行为，从而导致潜在的问题和错误。您应该始终使用

useEffect

来消除副作用，以保持可预测且稳定的组件行为。