Hooks的useEffect基础使用

useEffect的作用：为react函数组件提供副作用处理

1.不添加依赖项

useEffect组件初始化会执行一次，然后每次组件更新都会调用一次

import { useEffect, useState } from 'react'

function App () {
  const [num, setNum] = useState(0)
    //默认状态，不添加依赖项
  useEffect(()=>{
    console.log(num+'副作用执行')
  })
  return (
    <div>
      <button onClick={() => { setNum(num + 1) }}>{num}</button>
    </div>

  )
}

2.添加空数组依赖项

useEffect只在组件首次渲染时执行一次

import { useEffect, useState } from 'react'

function App () {
  const [num, setNum] = useState(0)
    //添加空数组依赖项
  useEffect(()=>{
    console.log('副作用执行')
  },[])
  return (
    <div>
      <button onClick={() => { setNum(num + 1) }}>{num}</button>
    </div>

  )
}

3. 添加特定依赖项

useEffect在组件首次渲染时执行，在依赖项发生变化时执行