useEffect useLayoutEffect

useEffect

1. useEffect 接收两个参数：一个函数和一个依赖数组。
   2 .useEffect(callback)：font color=red>这个参数表示只要组件发生更新，就会执行回调函数 callback，包括组件挂载时的初始化和后续状态或属性的更新。如果不需要依赖任何状态或属性，相当于类组件中的
   componentDidMount 和 componentDidUpdate 的合并。
   3 useEffect(callback, [])：这个参数表示只在组件挂载时执行一次回调函数 callback，不会在组件更新时执行。这个参数当中传入的空数组 [] 表示没有任何依赖，因此只有在组件挂载时才会执行。
   4 useEffect(callback, [state1, state2, ...])： 这个参数表示在组件挂载时执行一次回调函数 callback，之后只有 state1、state2 等指定的依赖状态发生改变时才会执行回调函数。如果多个状态都需要依赖，可以在数组中传入多个状态名称。

. useLayoutEffect 和 useEffect 的区别

1.useLayoutEffect 与 useEffect 在实现上是类似的，不同之处在于 useLayoutEffect 的回调函数会在 DOM 更新之后，浏览器执行绘制之前被调用，而 useEffect 的回调函数则是在浏览器执行绘制之后被调用。
useLayoutEffect 在执行回调函数时会产生阻塞效果，可能会导致页面感觉卡顿，而 useEffect 则不会产生这种阻塞效果。因此，如果回调函数需要操作 DOM 或者进行某些与界面交互相关的操作，可以考虑使用 useLayoutEffect；如果不需要进行交互，或者交互操作可以忍受一定的延迟，可以使用 useEffect。

原文链接：https://blog.csdn.net/qq_52563729/article/details/131155613