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

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()
            console.log(jsonRes)
            setList(jsonRes.data.channels)
        }
        getList()
    }, [])
    return (
        <div>
            this is App
            <ul>
                {list.map(item => <li key={item.id}>{item.name}</li>)}
            </ul>
        </div>
    );
}

export default App;

效果：
在这里插入图片描述

2.1 异步函数

在React中，异步函数（通常与async/await语法一起使用）的主要作用是处理那些需要等待一段时间才能完成的任务，比如从服务器获取数据、处理耗时计算或执行其他异步操作。这些操作在JavaScript中通常是通过回调函数、Promises或async/await来处理的。

Promise 是 JavaScript 中的一个对象，它代表了一个异步操作的最终完成（或失败）及其结果值的状态。简单来说，Promise 是一个用于处理异步操作的对象，它允许你更优雅地处理异步代码，尤其是当异步操作涉及到多个步骤或依赖其他异步操作时。

3. useEffect依赖项参数说明

useEffect副作用函数的执行时机存在多种情况，根据传入依赖项的不同，会用不同的执行表现。

依赖项	副作用函数执行时机
没有依赖项	组件初始渲染 + 组件更新时执行
空数组依赖	只在初始渲染时执行一次
添加特定依赖项	组件初始渲染 + 特性依赖项变化时执行

import {useEffect, useState} from "react";

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

function App() {
    const [count, setCount] = useState(0)

    //1. 没有依赖项 初始 + 组件更新
    // useEffect(() => {
    //     console.log('副作用函数被执行了')
    // })

    //2. 传入空数组 初始执行一次
    // useEffect(() => {
    //     console.log('副作用函数被执行了')
    // }, [])

    //3. 传入特定依赖项 初始 + 依赖项变化时执行
    useEffect(() => {
        console.log('副作用函数被执行了')
    }, [count])

    return (
        <div>
            this is App
            <button onClick={() => setCount(count + 1)}>+{count}</button>
        </div>
    );
}

export default App;

4. useEffect 清除副作用

在这里插入图片描述

import {useEffect, useState} from "react";

function Son() {
    //1. 渲染时开启一个定时器
    useEffect(() => {
        const timer = setInterval(() => {
            console.log('定时器执行中...')
        }, 1000)
        return () => {
            //清除副作用（组件卸载时）
            clearInterval(timer)
        }
    }, [])
    return (
        <div>this is son</div>
    )
}

function App() {
    //通过条件渲染模拟数组卸载

    const [show, setShow] = useState(true)
    return (

        <div>
            {show && <Son/>}
            <button onClick={() => setShow(false)}>卸载Son组件</button>
        </div>
    );
}

export default App;