useEffect的4种使用情况

useeffect的用法是：useEffect就是指定一个副效应函数，组件每渲染一次，该函数就自动执行一次。组件首次在网页 DOM 加载后，副效应函数也会执行。

useEffect使用时有以下4种情况

1、不传递

useEffect不传递第二个参数会导致每次渲染都会运行useEffect。然后，当它运行时，它获取数据并更新状态。然后，一旦状态更新，组件将重新呈现，这将再次触发useEffect，这就是问题所在，useEffect 不断运行。

const [num, setNum] = useState(0);

 

useEffect(()=>{

    setNum(num+1);

    console.log(num+1)

}) // 所有更新都执行

2、传递空数组

const [num, setNum] = useState(0);

 

useEffect(() => {

    setNum(num+1);

    console.log(num+1)

}, []) // 仅在挂载和卸载的时候执行

3、传递一个值

const [num, setNum] = useState(0);

 

useEffect(()=>{

        setNum(num+1);

        console.log(num+1)

},[num]) // num更新时执行，注意不要在useEffect中更新num的值，否则useEffect会一直运行

4、传递多个

含义不懂，此处仅作记录，有机会再来完善

// 监听num的更改

//setNum是useState返回的setter，所以不会在每次渲染时重新创建它，因此effect只会运行一次

const [num, setNum] = useState(0);

 

useEffect(() => {

    setNum(num + 1);

    console.log(num + 1)

}, [num, setNum])