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(
    

      n:{n}
      +1
    
  )
}

ReactDOM.render(,document.getElementById('root'));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

依赖项不写的话，则每次渲染的时候都会执行一次

useEffect(()=>{
      console.log('这是第一次渲染执行这句话');
    });
1
2
3

依赖项的数组里面有值，依赖项的数据每发生一次变化，则会执行一次，依赖项是基本数据，只要基本数据发生变化就可以，依赖项是数组或者对象，进行的是浅比较，需要数组或者对象的引用地址发生变化才可以执行

useEffect(()=>{
      console.log('n变化了');
    },[n])
1
2
3

useEffect 和useLayoutEffect的区别

1. 触发时机
   useEffect:是在组件渲染完成之后（首次渲染和更新渲染）异步触发的，也不会阻塞组件的渲染过程
   useLayoutEffect:是在组件完成渲染之后，浏览器执行绘制之前同步触发的。它会在DOM更新之前被调用，可以阻塞组件的渲染过程。
2. 执行时间点
   useEffect:是在组件渲染完成之后的“提交阶段”执行的，这意味着它会在浏览器绘制之后执行，对用户可见性没有直接影响
   useLayoutEffect:是在组件完成后的“布局阶段”执行的，这意味着它会在浏览器执行绘制之前执行，对DOM的计算和布局有直接影响。因此，useLayoutEffect中的副作用操作会在浏览器更新屏幕之前同步触发。
   需要注意的是，由于useLayoutEffect的同步特性，如果在使用useLayoutEffect时进行大量计算或阻塞操作，可能会导致用户界面的卡顿和不响应。一般情况下，推荐使用useEffect,只有在需要在DOM更新之前立即执行某些操作时，采用useLayoutEffect.