javascript - 我想知道将 `useEffect()` 与空依赖数组一起使用与不使用 `useEffect()` 本身之间的区别

Question

我知道没有数组的 useEffect() 只在第一次渲染时运行回调。

那么useEffect(()=>{},[])和没有useEffect()的区别是什么。

我的意思是:

function myComponent() {
  // some states, variables

  useEffect(() => {
    // do something on mount <= this is my current concern.
  }, [/* empty */]);

  // return Element ...
}

还有这个:

function myComponent() {
  // some states, variables

  // do something on mount <= this is my current concern.
  
  // return Element ...
}

Answer 1

在 React 中，只要组件的状态或其中一个 props 发生变化，组件就会重新渲染。
它这样做的原因是它可以对所提到的数据的变化做出“ react ”，并相应地反射(reflect) UI 变化。

每次组件重新渲染时，其中未缓存的任何逻辑(函数、变量等)也会重新渲染

useEffect 帮助我们对依赖数组中声明的状态或 Prop 的变化使用react。
它为我们提供了在此类事件中自动运行回调函数的选项。

useEffect 具有一个空的依赖项数组，将在安装组件时仅运行一次。

所以在这个例子中——

function myComponent() {
  // some states, variables

  useEffect(() => {
    // do something on mount <= this is my current concern.
  }, [/* empty */]);

  // return Element ...
}

useEffect 中的回调函数只会运行一次，即组件首次“激活”时。
后续渲染将不会调用它。

虽然在此示例中 -

function myComponent() {
  // some states, variables

  // do something on mount <= this is my current concern.
  
  // return Element ...
}

每次组件重新渲染时，无论你放在那里什么都会运行。
这是否可行取决于您的用例以及您尝试运行什么功能，运行是否“便宜”等。