react--useEffect 的使用

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

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

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

语法： 参数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(list);
   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副作用函数的执行时机存在多种情况，根据传入依赖项的不同，会有不同的执行表现

没有依赖项 组件初始渲染 + 组件更新时执行

import { useEffect,useState} from "react"

function App () {
//没有依赖项---初始＋组件更新u
//组件初始时会执行一次，组件更新时会执行一次
const [count,setCount] = useState(0)
useEffect(()=>{
  //初始
  console.log('副作用函数执行');
})
 
  return (
    <div>
      this is App
      {/* 更新： */}
      <button onClick={()=>setCount(count+1)}>+{count}</button>
    </div>

  )
}

export default App

空数组依赖 只在初始渲染时执行一次

import { useEffect,useState} from "react"

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

//传入一个空数组依赖
// 空数组依赖 只在初始渲染时执行一次,更新时不执行
useEffect(()=>{
  console.log('副作用被执行');
},[])
 
  return (
    <div>
      this is App
      {/* 更新： */}
      <button onClick={()=>setCount(count+1)}>+{count}</button>
    </div>

  )
}

export default App

添加特定依赖项 组件初始渲染 + 特性依赖项变化时执行 

import { useEffect,useState} from "react"

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

// 添加特定依赖项 组件初始渲染 + 特性依赖项变化时执行
//因为count在不断变化所以count变化而变化，重新执行
 useEffect(()=>{
console.log('副作用函数被执行');
 },[count])
  return (
    <div>
      this is App
      {/* 更新： */}
      <button onClick={()=>setCount(count+1)}>+{count}</button>
    </div>

  )
}

export default App

useEffect — 清除副作用

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

说明：清除副作用的函数最常见的执行时机是在组件卸载时自动执行

需求：在Son组件渲染时开启一个定制器，卸载时清除这个定时器

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