react hooks useEffect的使用

1、不传递

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

useEffect(()=>{
console.log(props.number)
setNumber(props.number)
}) //所有更新都执行
 

2、传递空数组

useEffect(()=>{
console.log(props)
},[]) //仅在挂载和卸载的时候执行
 

3、传递一个值

useEffect(()=>{
console.log(count)
},[count]) //count更新时执行
 

4、传递多个

import React, {useState,useEffect} from 'react'

export default function Ccom() {

const [count, setCount] = useState(0);

const [counts, setCounts] = useState(0);

useEffect(() => {

console.log('useEffect---')

},[count,counts]);

return (

<div>

<div>

{count}--{counts}

</div>

<button onClick={() => setCount(count + 1)}>Click me</button>

<button onClick={() => setCounts(counts + 1)}>Click me</button>

</div>

)

}

5、return 方法

const timer = setInterval(() => {undefined
setCount(count + 1)
}, 1000)
// useEffect方法的第一个参数是一个函数，函数可以return一个方法，这个方法就是在组件销毁的时候会被调用
useEffect(() => {undefined
return () => {undefined
clearInterval(timer)
}
}, [])