React学习———useEffect和useLayoutEffect

useEffect

useEffect是React的一个Hook，用于在函数组件中处理副作用。副作用包括数据获取、订阅、手动DOM操作以及其他需要再渲染后执行的操作

基本用法

useEffect(() => {// 副作用逻辑return () => {// 可选的清理函数}
}, [依赖数组])

1. 第一个参数：一个回调函数，包含副作用逻辑
   1-1. 回调函数会在组件渲染后执行
   1-2. 如果返回一个函数，这个函数会在组件卸载或依赖项更新时执行，用于清理副作用
2. 第二个参数：依赖数组（可选）
   2-1. 如果不传依赖数组，useEffect会在每次渲染后执行
   2-2. 如果传空数组[]，useEffect只会在组件挂载和卸载时执行一次
   2-3. 如果传特定的依赖项（如prop1，state1），useEffect只会在这些依赖项发生变化时执行

总结：

• 无依赖数组：每次渲染后都会执行
• 空依赖数组：只在组件挂载和卸载时执行
• 带依赖数组：依赖项发生变化时执行
• 清理函数：在组件卸载或依赖项更新时清理副作用

useLayoutEffect

useLayoutEffect是React的一个Hook，与useEffect类似，主要用于在DOM更新后同步执行的操作

基本用法

useLayoutEffect(() => {// 副作用逻辑return () => {// 可选的清理函数}
}, [依赖数组])

useEffect和useLayoutEffect的区别

• useEffect在浏览器完成布局和绘制后异步执行（非阻塞渲染）；useLayoutEffect在DOM更新后、浏览器绘制之前同步执行（阻塞渲染）
• useEffect适用于不需要阻塞渲染的副作用，例如数据获取、事件监听等；useLayoutEffect适用于在DOM更新后立即执行的副作用，例如测量DOM元素尺寸、同步DOM操作等