useEffect是一個React Hook函數(shù)，用于在React組件中創(chuàng)建不是由事件引起而是由渲染本身引起的操作，比如發(fā)送AJAX請求，更改DOM等
需求：在組件渲染完畢之后，立刻從服務端獲取數(shù)據(jù)并顯示到頁面中。

function App() {
  const [list,setList]=useState([])
  useEffect(() => {
    async function getList() {
      const data = await fetch(URL).then(res=>res.json())
      setList(data.data)
    }
    getList()
  }, [])
  return (
    <div className="App">
      <ul>
        {list.map(item => (<li key={item.id}>{item.name}</li>))}
      </ul>
    </div>
  );
}

語法：

useEffect(() => { }, [])

參數(shù)1是一個函數(shù)，可以把它叫做副作用函數(shù)，在函數(shù)內(nèi)部可以放置要執(zhí)行的操作
參數(shù)2是一個數(shù)組（可選），在數(shù)組里放置依賴項，不同依賴項會影響第一個參數(shù)函數(shù)的執(zhí)行，當時一個空數(shù)組的時候，副作用函數(shù)只會在組件渲染完畢之后執(zhí)行一次。

image.png

清除副作用

在useEffect中編寫的由渲染本身引起的對接組件外部的操作，社區(qū)也經(jīng)常把它叫做副作用操作，比如在useEffect中開啟了一個定時器，我們想在組件卸載時把這個定時器清理掉，這個過程就是清除副作用。語法：

useEffect(() => {
    // 實現(xiàn)副作用
    return () => {
      // 清除副作用
      // 清除副作用的函數(shù)最常見的執(zhí)行時機是在組件卸載時自動執(zhí)行
    }
  }, [])

function Son() {
  useEffect(() => {
    const timer= setInterval(()=>{
      console.log('定時器')
    },1000)
    return () =>{
      clearInterval(timer)
    }
  },[])
  return <h2>這是一個child，Son組件</h2>
}

function App() {
  // 通過條件渲染模擬組件卸載
  const [show, setShow] = useState(true)
  return (
    <div className="App">
      {show && <Son></Son>}
      <button onClick={() => setShow(false)}>卸載Son組件</button>
    </div>
  );
}