(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹）

目录

useEffect 的使用

useEffect 的概念理解

useEffect 依赖项参数说明

useEffect — 清除副作用

自定义Hook实现

React Hooks使用规则

useEffect 的使用

useEffect 的概念理解

useEffect是一个React Hook函数，用于在React组件中 创建不是由事件引起而是 由渲染本身引起的操作（副作用）, 比如发送AJAX请求，更改DOM等等 说明：上面的组件中没有发生任何的用户事件， 组件渲染完毕之后 就需要和服务器要数据，整个过程属于 “只由渲染引起的操作”

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 (this is app
    {list.map(item => 
  • {item.name}
    • )}
)}export default App

useEffect 依赖项参数说明

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 (this is app)}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 this is son}function App () {// 通过条件渲染模拟组件卸载const [show, setShow] = useState(true)return ({show && })}export default App

自定义Hook实现

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

例如：如下图所示，通过点击toggle按钮，实现this is div的显示与隐藏

// 封装自定义Hook// 问题: 布尔切换的逻辑 当前组件耦合在一起的 不方便复用// 解决思路: 自定义hookimport { useState } from "react"function useToggle () {// 可复用的逻辑代码const [value, setValue] = useState(true)const toggle = () => setValue(!value)// 哪些状态和回调函数需要在其他组件中使用 returnreturn {value,toggle}}// 封装自定义hook通用思路// 1. 声明一个以use打头的函数// 2. 在函数体内封装可复用的逻辑（只要是可复用的逻辑）// 3. 把组件中用到的状态或者回调return出去（以对象或者数组）// 4. 在哪个组件中要用到这个逻辑，就执行这个函数，解构出来状态和回调进行使用function App () {const { value, toggle } = useToggle()return ({value && this is div})}export default App

React Hooks使用规则

使用规则 1. 只能在组件中或者其他自定义Hook函数中调用 2. 只能在组件的顶层调用 ，不能嵌套在 if、for、其他函数中