反应功能组件中使用和不使用 useEffect 的区别

Question

我有一个反应功能组件，我想在每个渲染中运行一些代码。你知道useEffect没有依赖数组的钩子每次在渲染时都会运行。

继承人的代码

function Component({a, b}){

useEffect(()=>{
  console.log('component rerenderd')
  // some code here
})

 return(
  <div>
    Some content
  </div>
  )
}

另一方面没有 useEffect 做同样的事情

function Component2({a, b}){

  console.log('component rerenderd')
  // some code here

 return(
  <div>
    Some content
  </div>
  )
}

我的问题是它们之间有什么区别？

Answer 1

useEffect渲染阶段之后执行的回调是两者之间的主要区别。

请参阅下一个示例：

// Log order:
// "executed at render phase"
// "executed after render phase"

const App = () => {
  useEffect(() => {
    console.log("executed after render phase");
  });

  console.log("executed at render phase");

  return <></>;
};

在这里阅读更多内容

Answer 2

在第二种情况下，您在返回 JSX 之前进行记录。当您使用第一个片段时，回调内的代码会useEffect在组件渲染后运行。

使用useEffect还有多种其他用途，例如在状态更改时执行某些操作等。