useEffect
useEffect是React的一个Hook，用于在函数组件中处理副作用。副作用包括数据获取、订阅、手动DOM操作以及其他需要再渲染后执行的操作
基本用法
useEffect(() => {// 副作用逻辑return () => {// 可选的清理函数}
}, [依赖数组])
- 第一个参数：一个回调函数，包含副作用逻辑
1-1. 回调函数会在组件渲染后执行
1-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操作等
)
