【从零开始学 React | 第四章】useEffect和自定义Hook

前言：本章主要讲了useEffect的使用方法，如何自定义Hook，React Hooks使用规则以及一些杂项知识点。

【从零开始学 React | 第四章】useEffect和自定义Hook

• • 一：useEffect
  • • 1.基本使用
    • 2.依赖项说明：
    • 3.清除副作用：
  • 二：自定义Hook实现
  • [三：React Hooks使用规则](#三：React Hooks使用规则)
  • 四：杂项知识点
  • • fetch：

一：useEffect

概念：

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

1.基本使用

语法：

useEffect(() => {参数1 }, [参数2])

参数说明

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

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

案例：获取列表

import { useEffect, useState } from "react"

const URL = '...'

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.依赖项说明：

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

案例：

import { useEffect, useState } from "react"

function App () {
  // 1. 没有依赖项  初始 + 组件更新
  const [count, setCount] = useState(0)
  // 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

3.清除副作用：

概念：

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

说明：

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

语法：

useEffect(() => {
  // 实现副作用操作逻辑
  return () => {
    // 清除副作用逻辑
  }
}, [])

案例：在 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

二：自定义Hook实现

概念 ：

自定义 Hook 是以 use 打头的函数，通过自定义 Hook 函数可以用来实现逻辑的封装和复用

通用思路：

1. 声明一个以use打头的函数
2. 在函数体内封装可复用的逻辑（只要是可复用的逻辑）
3. 把组件中用到的状态或者回调return出去（以对象或者数组）
4. 在哪个组件中要用到这个逻辑，就执行这个函数，解构出来状态和回调进行使用

案例：

// 封装自定义Hook

// 问题: 布尔切换的逻辑 当前组件耦合在一起的 不方便复用

// 解决思路: 自定义hook

import { useState } from "react"

function useToggle () {
  // 可复用的逻辑代码
  const [value, setValue] = useState(true)

  const toggle = () => setValue(!value)

  // 哪些状态和回调函数需要在其他组件中使用 return
  return {
    value,
    toggle
  }
}

function App () {
  const { value, toggle } = useToggle()
  return (
    <div>
      {value && <div>this is div</div>}
      <button onClick={toggle}>toggle</button>
    </div>
  )
}

export default App

三：React Hooks使用规则

使用规则

1.只能在组件中或者其他自定义 Hook 函数中调用

2.只能在组件的顶层调用，不能嵌套在 if、for、其他函数中

四：杂项知识点

fetch：

概念：

fetch 是浏览器原生提供的、用来发送网络请求（AJAX）的 API，不需要安装任何包。

基本语法：

// 基础写法
const res = await fetch(请求地址)  //发请求，拿到响应对象

const 数据 = await res.json()  //把响应转成可用的 JSON 数据

POST 提交 JSON 数据

useEffect(() => {
  async function postData() {
    const res = await fetch('https://xxx.com/api/login', {
      // 👇 第二个配置项开始
      method: 'POST',           // 请求方法：POST / PUT / DELETE
      headers: {
        'Content-Type': 'application/json'  // 告诉后端我发的是 JSON
      },
      body: JSON.stringify({   // 要传给后端的数据，必须转字符串
        username: 'admin',
        password: '123456'
      })
      // 👆 第二个配置项结束
    })

    const jsonRes = await res.json()
    console.log(jsonRes)
  }

  postData()
}, [])

DELETE 请求

await fetch('https://xxx.com/api/articles/123', {
  method: 'DELETE'
})

PUT 修改数据

await fetch('https://xxx.com/api/articles/123', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: '新标题',
    content: '新内容'
  })
})

fetch 和 axios 的核心区别 ：

最后：

如果我的内容对你有帮助，请点赞，评论，收藏，创作不易。大家的支持就是我坚持下去的动力！