我想知道将 `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

如果直接放在函数中re-render，每次都会在组件re-render执行

Answer 2

在 React 中，组件 re-renders 每当它的状态或其中一个 props 发生变化时。
它这样做的原因是可以对上述数据的变化做出“反应”，并相应地反映 UI 变化。

每次组件 re-renders，其中任何未缓存的逻辑（函数、变量等）也会缓存

useEffect 帮助我们对依赖数组中声明的状态或道具的变化做出反应。
它为我们提供了在这样的 event/s.

中自动运行回调函数的选项

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 ...
}

无论你放在那里什么都会运行每次组件 re-renders.
这是否可以取决于您的 use-case 以及您尝试运行的功能，如果它对运行是否“便宜”，等等。

Answer 3

正如你提到的，当你有一个空的依赖项（如下所示）时，里面的代码只会运行挂载。

  useEffect(() => {
    something() // only runs on mount
  }, []);

如果您根本没有 useEffect，则每次组件重新呈现时代码都将是运行。

function myComponent() {
  // some states, variables

  something() // runs on every rerender
  
  // return ...
}

现在的问题是，“什么时候重新渲染？”。通常，只要父组件渲染，React 就会重新渲染该组件的所有子组件。所以重新渲染会经常发生。

查看 this article，其中有一些关于组件何时重新渲染的非常有用的可视化示例。

Answer 4

function myComponent() {
   useEffect(() => {
   }, []);

}

这里 useEffect(()=>{},[]) 的工作方式类似于 componentDidMount

和

function myComponent() {
}

这是普通的js函数

Answer 5

如果依赖项数组为空，您只会运行 useEffect on mount。在不使用 useEffect 的情况下，每次重新呈现 page/component.

时，组件内的代码都会运行

function myComponent(){
   console.log('render') // will run everytime you render
   return ()
}


function myComponent(){
  useEffect(() => {
    console.log('on mount'); // run on mount
  }, [])
  return ()
}

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

I wonder about differences between using `useEffect()` with empty dependency array and not using `useEffect()` itself

javascript

reactjs

react-native