React-3-useEffect-自定义Hook

一.useEffect

1.1 概念理解

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

 useEffect(() => { }, [])

useEffect副作用函数的执行时机存在多种情况,根据传入依赖项的不同,会有不同的执行表现
在这里插入图片描述

1.2 useEffect — 清除副作用

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

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>
  )
}

在Son组件渲染时开启一个定制器,卸载时清除这个定时器

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

二. 自定义Hook实现

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

// 封装自定义Hook
// 问题: 布尔切换的逻辑 当前组件耦合在一起的 不方便复用
// 解决思路: 自定义hook
import { useState } from "react"
function useToggle () {
  // 可复用的逻辑代码
  const [value, setValue] = useState(true)
  const toggle = () => setValue(!value)
  // 哪些状态和回调函数需要在其他组件中使用 return
  return {
    value,
    toggle
  }
}

// 封装自定义hook通用思路
// 1. 声明一个以use打头的函数
// 2. 在函数体内封装可复用的逻辑(只要是可复用的逻辑)
// 3. 把组件中用到的状态或者回调return出去(以对象或者数组)
// 4. 在哪个组件中要用到这个逻辑,就执行这个函数,解构出来状态和回调进行使用
function App () {
  const { value, toggle } = useToggle()
  return (
    <div>
      {value && <div>this is div</div>}
      <button onClick={toggle}>toggle</button>
    </div>
  )
}
export default App

相关推荐

  1. react hook:useeffect

    2024-04-03 10:06:02       14 阅读
  2. React定义Hook之useModel hook

    2024-04-03 10:06:02       29 阅读
  3. # 14 React 定义Hook详解

    2024-04-03 10:06:02       7 阅读
  4. React Hooks、useState、useEffectreact函数状态

    2024-04-03 10:06:02       9 阅读
  5. vue3定义hooks

    2024-04-03 10:06:02       20 阅读

最近更新

  1. 类和对象(下)

    2024-04-03 10:06:02       0 阅读
  2. C++静态变量

    2024-04-03 10:06:02       0 阅读
  3. 【python】一文读懂python函数

    2024-04-03 10:06:02       0 阅读
  4. ADC通道检测功能-单片机通用模板

    2024-04-03 10:06:02       0 阅读
  5. AI原生技术分享活动:引领智能科技新浪潮

    2024-04-03 10:06:02       0 阅读
  6. JVM中都有哪些引用类型

    2024-04-03 10:06:02       0 阅读
  7. 用爬虫玩转石墨文档

    2024-04-03 10:06:02       0 阅读

热门阅读

  1. ARP地址解析协议 详解

    2024-04-03 10:06:02       5 阅读
  2. Redis实战

    2024-04-03 10:06:02       6 阅读
  3. Pathlib库的有哪些神奇功能在Python中

    2024-04-03 10:06:02       5 阅读
  4. 速盾:cdn加速https额外收费吗?

    2024-04-03 10:06:02       6 阅读
  5. pytorch | yolov5 Can not get arrribute SiLU

    2024-04-03 10:06:02       5 阅读
  6. 常见哈希算法及其应用场景

    2024-04-03 10:06:02       5 阅读
  7. 设计模式(14):命令模式

    2024-04-03 10:06:02       5 阅读
  8. 1344: 【递推】【入门】流感传染

    2024-04-03 10:06:02       6 阅读
  9. WebKit内核架构深度解析:核心技术与工作机制

    2024-04-03 10:06:02       6 阅读
  10. web有哪些方式可以实时更新数据

    2024-04-03 10:06:02       7 阅读
  11. vue 基础回顾

    2024-04-03 10:06:02       5 阅读
  12. 【2024最新】vue3的基本使用(超详细)

    2024-04-03 10:06:02       6 阅读
  13. freertosday3

    2024-04-03 10:06:02       4 阅读