useEffect 和useLayoutEffect 的区别
useEffect 可以接收两个参数，第一个参数是回调函数，回调函数的返回值是销毁时调用，第二个参数是依赖项,
依赖项是[],useEffect只执行一次
//使用useEffect之前要先引入
import React, { useEffect,useState } from 'react'
import ReactDOM from 'react-dom'
function App(){
const [n,setN] = useState(0);
const add=()=>{
setN(i=>i+1);
};
// 第一次渲染，只执行这一次，[]要在第二个参数
useEffect(()=>{
console.log('这是第一次渲染执行这句话');
},[]);
return(
<div>
n:{n}
<button onClick={add}>+1</button>
</div>
)
}
ReactDOM.render(<App />,document.getElementById('root'));
依赖项不写的话，则每次渲染的时候都会执行一次
useEffect(()=>{
console.log('这是第一次渲染执行这句话');
});
依赖项的数组里面有值，依赖项的数据每发生一次变化，则会执行一次，依赖项是基本数据，只要基本数据发生变化就可以，依赖项是数组或者对象，进行的是浅比较，需要数组或者对象的引用地址发生变化才可以执行
useEffect(()=>{
console.log('n变化了');
},[n])
useEffect 和useLayoutEffect的区别
- 触发时机
useEffect:是在组件渲染完成之后（首次渲染和更新渲染）异步触发的，也不会阻塞组件的渲染过程
useLayoutEffect:是在组件完成渲染之后，浏览器执行绘制之前同步触发的。它会在DOM更新之前被调用，可以阻塞组件的渲染过程。 - 执行时间点
useEffect:是在组件渲染完成之后的“提交阶段”执行的，这意味着它会在浏览器绘制之后执行，对用户可见性没有直接影响
useLayoutEffect:是在组件完成后的“布局阶段”执行的，这意味着它会在浏览器执行绘制之前执行，对DOM的计算和布局有直接影响。因此，useLayoutEffect中的副作用操作会在浏览器更新屏幕之前同步触发。
需要注意的是，由于useLayoutEffect的同步特性，如果在使用useLayoutEffect时进行大量计算或阻塞操作，可能会导致用户界面的卡顿和不响应。一般情况下，推荐使用useEffect,只有在需要在DOM更新之前立即执行某些操作时，采用useLayoutEffect.