九、【react】useEffect

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

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

useEffect 的基础使用

需求：在组件渲染完毕之后，立刻从服务端获取频道列表数据并显示到页面中语法：

参数1是一个函数，可以把它叫做副作用函数，在函数内部可以放置要执行的操作

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

接口地址：http://geek.itheima.net/v1_0/channels

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;

useEffect 依赖项参数说明

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>
            <ul>
                {list.map(item => <li key={item.id}>{item.name}</li>)}
            </ul>
        </div>
    )
}
export default App;

为空，初始执行一次，count更新导致组件更新，更新一次执行一次

import { useEffect, useState } from "react";

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

    useEffect(() => {
        async function getList(){
            console.log('useEffect')
        }
        getList()
    })
    return (
        <div>
            <button onClick={() => setCount(count + 1)}>{count}</button>
        </div>
    )
}
export default App2;

特定依赖，初始化渲染执行一次，num改变会执行一次，count改变则不会执行

import { useEffect, useState } from "react";

function App3(){

    const [count ,setCount] = useState(0)
    const [num ,setNum] = useState(0)

    useEffect(() => {
        async function getList(){
            console.log('useEffect')
        }
        getList()

    },[num])
    return (
        <div>
            <h1>count</h1>
            <button onClick={() => setCount(count + 1)}>{count}</button>
            <h1>num</h1>
            <button onClick={() => setNum(num + 1)}>{num}</button>
        </div>
    )
}

export default App3;

useEffect — 清除副作用

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

说明：清除副作用的函数最常见的执行时机是在组件卸载时自动执行需求：在Son组件渲染时开启一个定制器，卸载时清除这个定时器

import { useEffect, useState } from "react";

  

function Son(){

    useEffect(()=>{
        const timer = setInterval(()=>{
            console.log("定时器执行中...");
        },1000)

        return () => {
            console.log("useEffect清除定时器...");
            clearInterval(timer);
        }

    },[])

    return (
        <div>
            {"Son"}
        </div>
    )  
}

  

function App4(){
    const [show, setShow] = useState(true);
    return (

        <div>
            {show && <Son/>}
            <button onClick={() => setShow(!show)}>{show? "显示" : "隐藏"}</button>
        </div>
    )
}

export default App4;