useEffect是一个React Hook函数，用于在React组件中创建不是由事件引起而是由渲染本身引起的操作，比如发送AJAX请求，更改DOM等
需求：在组件渲染完毕之后，立刻从服务端获取数据并显示到页面中。

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(() => { }, [])

参数1是一个函数，可以把它叫做副作用函数，在函数内部可以放置要执行的操作
参数2是一个数组（可选），在数组里放置依赖项，不同依赖项会影响第一个参数函数的执行，当时一个空数组的时候，副作用函数只会在组件渲染完毕之后执行一次。

image.png

清除副作用

在useEffect中编写的由渲染本身引起的对接组件外部的操作，社区也经常把它叫做副作用操作，比如在useEffect中开启了一个定时器，我们想在组件卸载时把这个定时器清理掉，这个过程就是清除副作用。语法：

useEffect(() => {
    // 实现副作用
    return () => {
      // 清除副作用
      // 清除副作用的函数最常见的执行时机是在组件卸载时自动执行
    }
  }, [])

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>
  );
}