关于react-hook中useEffect的使用情况

useEffect第一个参数是相当于执行了钩子函数的componentdidmount和componentdidupDate

第二个参数是个数组，只有当数组中的每一项都没有发生变化才不会useEffect才不会执行
不传数组就是每一次都执行useEffect
传空数组，空数组跟空数组是相同的，所以useEffect只会执行一次

第一种情况是不传递参数的情况

useEffect不传递第二个参数会导致每次渲染都会运行useEffect。

然后，当他运行时，将会获取数据并更新状态。

然后，一旦状态更新，组件将重新呈现，这将再次触发useEffect，然后问题就出现了，程序就回陷入死循环中

    useEffect(() =>{
        console.log(props)
    }) //所有的数据更新都会执行

第二种情况，是传递空数组 在传递空数组的时候会出现什么情况呢

一般我们不需要特意监听某个值的时候，就只需要传递空数组就可以，防止程序陷入死循环中

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

第三种情况 给第二个参数传递一直监听值，这个监听值可以是任意的变量

    useEffect(() =>{
        console.log(number)
    },[number]) //监听number数据的变化，当数据状态进行更新时，就会引起该函数的变化

第四种情况 第二个参数还可以传递多个监听值

const Asynchronous : React.FC<PropsType>=({number})=>{
  const [number2,setNumber2] = useState(number);
  useEffect(()=>{
    console.log(number)
    setNumber2(number)
  },[number,setNumber2]) //监听props对象number的更改
  //setNumber2是useState返回的setter，所以不会在每次渲染时重新创建它，因此effect只会运行一次
 }

第五种情况

传递props的对象，传递的useState返回的setter

第六种情况，return方法

const timer = setInterval(() =>{
    setCount(count+1)
},500)


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

...极速更新中，请大家参考

react hook – useEffect详解

关于react-hook中useEffect的使用情况