React笔记：类似生命周期函数componentDidMount、componentWillUnmount、componentDidUpdate在useEffect中的使用

---

前言

本文为React中useEffect的使用笔记

---

一、类似于componentDidMount的useEffect

1.对应代码

import {
    useEffect } from 'react'

const Demo = () => {
   
  useEffcet(() => {
   
	console.log('类似于componentDidMount，通常在此处调用api获取数据')
  }, [])
}

export default Demo

2.使用示例

• 当useEffect中的load函数不需要在其他地方使用

import * as api from '../../services/api'

const Cart = () => {
   
  const [cart, setCart] = useState<ICart[]>([])		// 初始化一个ICart类型的数组
  
  useEffect(() => {
   
  	const load = async () => {
   
  	  const resp = await api.listCart()		// api中使用axios封装请求
  	  if (resp.statusText === 'OK') {
   
  	  	// 请求成功
  	  	setCart(resp.data)
  	  }
  	}
  	load()		// 初次挂载组件时，请求数据进行渲染
  }, []