（七）React：useEffect的理解和使用

最新推荐文章于 2025-03-25 19:13:01 发布

二进制杯莫停

最新推荐文章于 2025-03-25 19:13:01 发布

阅读量757

点赞数 6

分类专栏： FE 文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/weixin_43999327/article/details/139886936

版权

1. useEffect的概念理解

useEffect是一个React Hook函数，用于React组件中创建不是由事件引起而是由渲染本身引起的操作，比如发送AJAX请求，更改DOM等等

在这里插入图片描述

说明：上面的组件中没有发生任何的用户事件，组件渲染完毕之后就需要和服务器要数据，整个过程属于只有渲染引起的操作。

2. useEffect的基础使用

在这里插入图片描述
接口数据：

import {
   useEffect, useState} from "react";

const URL = 'http://geek.itheima.net/v1_0/channels'

function App() {
   
    //创建一个状态数据
    const [list, setList] = useState([])
    useEffect(() => {
   
        //额外的操作 获取频道列表
        async function getList() {
   
            const res = await fetch(URL)
            const jsonRes = await res.json()