React Hooks全部总结

news2024/11/16 15:48:37

Hooks 概念理解

学习目标： 理解 Hooks 的概念及解决的问题

  1. 什么是 hooks

    hooks 的本质： 一套能够使函数组件更强大、更灵活的（钩子）

React 体系里组件分为类组件和函数组件
多年使用发现，函数组件是一个更加匹配 React 的设计理念UI = f(date),也更加有利于逻辑拆分与重用的组件表达形式，而先前组件是不可以有自己的状态的。为了让函数组件可以拥有自己的状态，所以从 react v16.8 开始，加入了 hooks
注意点：

  1. 有了 Hooks 之后，为了兼容老版本，class 类组件并没有被移除，两者都可以使用
  2. 有了 Hooks 之后，不能在把函数成为无状态组件了，因为 Hooks 为函数组件提供了状态
  3. Hooks 只能在函数组件中使用
  4. Hooks 解决了什么问题
    Hooks 的出现解决了两个问题 1.组件的逻辑复用
  5. 组件逻辑复用
    在 Hooks 出现之前，react 先后尝试了 mixin 混入、HOC 高阶组件、render-props 等模式但是都有各自的问题，比如 mixin 的数据来源不清、高阶组件的嵌套问题等
  6. class 组件自身的问题
    class 组件过于厚重，大而全，提供了很多东西，有很高的学习成本，比如繁多的生命周期、this 指向问题等，而更多时候需要轻快的使用组件
  7. Hooks 优势
  8. 告别那一理解的 class
  9. 解决业务逻辑难以拆分的问题
  10. 使状态逻辑复用变的简单
  11. 函数组件在设计思想上与 react 的理念契合

useState

  1. 基础使用
    学习目标： 能够学会 useState 的基础用法
    作用： useState 为函数组件提供状态（state）
    使用步骤：
  2. 导入useState函数
  3. 调用useState函数，并传入状态初始值
  4. 从useState函数的返回值中，拿到状态和修改状态的方法
  5. 在 JSX 中展示状态
  6. 调用修改状态的方法更新状态
    代码实现：
import { useState } from 'react'
function App() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>{count}</button>
    </div>
  )
}
export default App

状态读取和修改

const [count, setCount] = useState(0) // 解构赋值 useState 返回值是一个数组

  1. useState 传过来的参数 作为 count 的初始值
  2. [count, setCount] 名字可以自定义保持语义化顺序不可以变 第一个参数是数据状态 第二个参数是修改数据的方法
  3. setCount 函数用来修改 count 依旧保持不能直接修改原值还是生成一个新值替换原值 setCount(基于运算得到的新值)
  4. count 和 setCount 是一对 是绑在一起的 setCount 只能用来修改对应的 count 值

组件的更新过程

学习目标： 能够理解使用 Hooks 之后组件的更新状态
函数组件使用 useState hook 后的执行过程，以及状态值的变化

  • 组件第一次渲染
    1. 从头开始执行该组件中的代码逻辑
    2. 调用useState(0)将传入参数作为状态初始值，即：0
    3. 渲染组件，此时，获取到的状态 count 值为：0
  • 组件第二次渲染 1. 点击按钮，调用setCount(count +1)修改状态，因为状态发生改变，所以该组件会重新渲染 2. 组件重新渲染时，会再次执行组件中的代码逻辑 3. 再次调用setCount(0),此时 React 内部会拿到最新的状态值而非初始值 4. 再次渲染组件时获取到的状态 count 值为：1
    注意：useState 的初始值只有在组件第一次渲染时生效，以后的每一次渲染，useState 获取到的都是最新的状态值

使用规则

学习目标： 能够记住 useState 的使用规则

  1. useState函数可以执行多次，每次执行互相独立，每调用一次为函数组件提供一个状态
function List() {
  // 字符串状态值
  const [name, setName] = useState('cp')
  // 数组状态值
  const [list, setList] = useState([])
}
  1. useState 注意事项
  2. 只能出现在函数组件中
  3. 不能嵌套在 if、for、其他函数中（react 按照 hooks 的调用顺序识别每一个 hook）
let num = 1
function List() {
  num++
  if (num / 2 === 0) {
    const [name, setName] = useState('cp')
  }
  const [list, setList] = useState([])
}
// 两个hook的顺序不是固定的，这是不可以的
  1. 可以通过开发者工具查看 hooks 状态
    代码示例：
import { useState } from 'react'
function App() {
  const [count, setCount] = useState(0)
  const [show, setShow] = useState(false)
  const [list, setList] = useState([])
  function test() {
    setShow(!show)
    setList([1, 2, 3, 4])
    console.log(show, list)
  }
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>count:{count}</button>
      <button onClick={test}>
        show:{show ? 'true' : 'false'}---list:{list}
      </button>
    </div>
  )
}
export default App

useEffect 函数

基础使用
  1. 理解函数副作用
    学习目标： 能够理解函数副作用的概念
    什么是函数副作用:
    副作用是相对于主作用来说的，一个函数除了主作用，其他的作用就是副作用，对于 React 组件来说主作用是根据数据（state\props）渲染 UI，除此之外都是副作用（比如，手动修改 DOM）
    常见副作用:
  2. 数据请求 ajax
  3. 手动修改 DOM
  4. localstorage 操作

    useEffect 函数的作用就是为 React 函数组件提供副作用处理

  5. 基础使用
    学习目标： 能够学会 useEffect 的基础用法并且掌握默认的执行时机
    作用 为 React 函数组件提供副作用处理
    使用步骤：
  6. 导入useEffect函数
  7. 调用useEffect函数，并传入回调函数
  8. 在回调函数中编写副作用处理（DOM 操作）
import { useState, useEffect } from 'react'
function App() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    document.title = count
  })
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>count:{count}</button>
    </div>
  )
}
export default App
依赖项控制执行时机
  1. 默认状态(无依赖项) 组件初始化时先执行一次 等每次数据修改更新再次执行
useEffect(() => {
  console.log('副作用执行了')
})
  1. 添加空数组依赖项 组件只在首次渲染时执行一次 其余时间不执行
useEffect(() => {
  console.log('副作用执行了')
}, [])
  1. 添加特定依赖项 副作用函数在首次渲染时执行，在依赖项发生变化时再次执行
import { useState, useEffect } from 'react'
function App() {
  const [count, setCount] = useState(0)
  const [name, setName] = useState('cp')

  useEffect(() => {
    console.log('副作用执行了')
    document.title = count
  }, [count, name])
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>count:{count}</button>
      <button onClick={() => setName('hs')}>name:{name}</button>
    </div>
  )
}
export default App

注意事项: 只要在 useEffect 回调函数中用到的数据（比如，count）就是依赖数据，就应该出现在依赖项数组中，如果不添加依赖项就会有 bug 出现

useState - 回调函数的参数

学习任务： 能够理解 useState 回调函数作为参数的使用场景
使用场景：
参数只会在组建的初始值渲染中起作用，后续渲染时会被忽略，若果初始 State 需要通过计算才能获得，则可以使用一个回调函数，在函数中计算并返回 State，此函数只在初始渲染中起作用
语法

const [name,setName] = useState(()=>{    //编写组算逻辑    return "计算之后的结果"})

语法规则：

  1. 回调函数 return 出去的值将作为 name 的初始值
  2. 回调函数中的逻辑只会在组建初始化的时候执行一次
    语法选择:
  3. 如果就是初始化一个普通的数据，直接使用useState(普通数据) 即可
  4. 如果要初始化的数据无法直接得到需要通过计算才能获取到，使用useState(()=>{})
    代码实现：
import { useState } from 'react'
function getDefaultValue() {
  for (let i = 1; i < 10000; i++) {}
  return '10'
}
function Counter(props) {
  const [count, setCount] = useState(() => {
    return getDefaultValue()
  })
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}
function App() {
  return (
    <div>
      <Counter count={10} />
      <Counter count={20} />
    </div>
  )
}
export default App

useEffect - 清理副作用

学习目标： 能够掌握清理 useEffect 的方法
使用场景：
在组件被销毁时，如果有些副作用需要被清理，就可以使用此语法，比如常见的定时器
语法及规则

useEffect(() => {
  console.log('副作用函数被执行')
  //副作用函数的执行时机为：在下一次副作用函数执行之前
  return () => {
    console.log('清理副作用的函数被执行了')
    // 在这里写清理副作用的代码
  }
})

定时器案例代码实现：

import { useState, useEffect } from 'react'
function Test() {
  useEffect(() => {
    let time1 = setInterval(() => {
      console.log('定时器执行了')
    }, 1000)
    return () => {
      //清理定时器
      clearInterval(time1)
    }
  }, [])
  return <div>this is Test</div>
}
function App() {
  const [flag, setFlag] = useState(true)
  return (
    <div>
      {flag ? <Test /> : null}
      <button onClick={() => setFlag(!flag)}>switch</button>
    </div>
  )
}
export default App

useEffect - 发送网络请求

学习目标： 能够掌握使用 useEffect hook 发送网络请求
使用场景： 如何在 useEffect 中发送网络请求，并且封装同步 async await 操作
语法要求： 不可以直接在 useEffect 的回调函数外层直接包裹 await，因为异步会导致清理函数无法立即返回

useEffect(async () => {
  const res = await axios.get('http://geek.itheima.net/v1_0/channels')
  console.log(res)
}, [])

正确写法：

useEffect(()=>{
  async function fetchDate(){
    const res = await axios.get('http://geek.itheima.net/v1_0/channels)
    console.log(res)
  }
},[])

useRef

学习目标： 能够掌握 useREf 获取真实 DOM 或组件实例的方法
使用场景： 在函数组件中获取真实的 DOM 元素对象或者组件对象
使用步骤

  1. 导入useRef函数
  2. 执行useRef函数并传入 null，返回值为一个对象，内部有一个 current 属性存放拿到的 DOM 对象（组件实例）
  3. 通过 ref 绑定要获取的元素或者组件
    代码示例
import React, { useState, useEffect, useRef } from 'react'
class TestC extends React.Component {
  state = { name: 'testName' }
  getName = () => {
    return 'this is child Test'
  }
  render() {
    return <div>我是类组件</div>
  }
}
function App() {
  const TestRef = useRef(null)
  const h1Ref = useRef(null)
  useEffect(() => {
    console.log(TestRef.current)
    console.log(h1Ref.current)
  })
  return (
    <div>
      <TestC ref={TestRef}></TestC>
      <h1 ref={h1Ref}>This is h1</h1>
    </div>
  )
}
export default App

useContext

学习目标： 能够掌握hooks下的Context使用方法
在这里插入图片描述

实现步骤：

  1. 使用createContext创建Context对象
  2. 在顶层组件通过Provider提供数据
  3. 在底层组件通过useContext函数获取数据
    代码实现：
import React, { createContext, useState, useContext } from "react"
const Context = createContext()
function ComA () {
  const count = useContext(Context)
  return (
    <div>
      this is ComA
      App传过来的数据{count}
      <ComC />
    </div>
  )
}
function ComC () {
  const count = useContext(Context)
  return (
    <div>
      this is ComC
      App传过来的数据{count}
    </div>
  )
}
function App () {
  const [count, setCount] = useState(20)
  return (
    <Context.Provider value={count}>
      <div>
        <ComA />
        <button onClick={() => { setCount(count + 1) }}>+</button>
      </div>
    </Context.Provider>
  )
}
export default App

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1526717.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

解决：visio导出公式为pdf图片乱码问题

解决：visio导出公式为pdf图片乱码问题

今天需要将Visio编辑好的以后的图输出pdf&#xff0c;但是点击保存后公式部分一直乱码&#xff0c;如下图所示 保存为pdf后会变成&#xff1a; 解决方案&#xff1a;保存时点击文件下方的快速打印&#xff0c;存到桌面&#xff0c;不要直接点击保存
阅读更多...
Vue3学习日记 Day1

Vue3学习日记 Day1

一、简介 1、简介 Vue3是新的默认版本&#xff0c;拥有更快的速度&#xff0c;更好的语法 二、使用create-vue搭建Vue3项目 1、创建项目 1、介绍 create-vue是Vue官方新的脚手架工具&#xff0c;底层切换为了vite&#xff0c;为开发提供极速响应 2、使用 2.1、确定环境条件 2…
阅读更多...
关于 闰年 的小知识，为什么这样判断闰年

关于 闰年 的小知识，为什么这样判断闰年

闰年的规定&#xff1a; 知道了由来&#xff0c;我们就可以写程序来判断&#xff1a; #include <stdio.h> int main() {int year, leap;scanf("%d",&year);if((year%4 0 && year%100 ! 0) || year%400 0)leap 1;else leap 0;if(leap) printf(…
阅读更多...
Python大数据实践:selenium爬取京东评论数据

Python大数据实践:selenium爬取京东评论数据

准备工作 selenium安装 Selenium是广泛使用的模拟浏览器运行的库&#xff0c;用于Web应用程序测试。 Selenium测试直接运行在浏览器中&#xff0c;就像真正的用户在操作一样&#xff0c;并且支持大多数现代 Web 浏览器。 #终端pip安装 pip install selenium #清华镜像安装 p…
阅读更多...
创新应用2：nnmf+DBO+K-Medoids聚类，蜣螂优化算法DBO优化K-Medoids，适合学习和发paper。

创新应用2：nnmf+DBO+K-Medoids聚类，蜣螂优化算法DBO优化K-Medoids，适合学习和发paper。

创新应用2&#xff1a;nnmfDBOK-Medoids聚类&#xff0c;蜣螂优化算法DBO优化K-Medoids&#xff0c;适合学习和发paper。 一、蜣螂优化算法 摘要&#xff1a;受蜣螂滚球、跳舞、觅食、偷窃和繁殖等行为的启发&#xff0c;提出了一种新的基于种群的优化算法(Dung Beetle Optim…
阅读更多...
断言assert是什么？

断言assert是什么？

assert是什么&#xff1f; assert断言&#xff0c;是一个被定义在<assert.h>头文件中的一个宏&#xff0c;而不是一个函数。 可以用来检查数据的合法性&#xff0c;但是频繁的调用极大影响了程序的性能&#xff0c;增加了额外的开销。可以通过#define NDEBUG来禁用asse…
阅读更多...
计算机考研｜408还是自命题？看这一篇就够了

计算机考研｜408还是自命题？看这一篇就够了

计算机考研自命题都担心考不上&#xff0c;408估计更能让你头秃 不要光看着408的分数线低&#xff0c;自命题分数线高&#xff0c;408想拿到高分是很困难的...&#x1f630; 某双飞一本 身边大部分人都去考数据结构是因为考试内容相比于408来说少了很多&#xff0c;时间更好分配…
阅读更多...
MySQL基础-----多表查询之子查询

MySQL基础-----多表查询之子查询

目录 前言 子查询概述 1.概念 2.分类 一、标量子查询 二、列子查询 三、行子查询 四、表子查询 前言 上一期我们讲了内外连接查询以及自连接查询&#xff0c;那么本期我们就学习多表查询的子查询。本期会详细讲解什么是子查询&#xff0c;以及子查询的相关功能&#xf…
阅读更多...
Java项目：63 ssm网上花店设计+vue

Java项目：63 ssm网上花店设计+vue

作者主页&#xff1a;舒克日记 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 系统具备友好性且功能完善。管理员登录进入后台之后&#xff0c;主要完成花材选择管理&#xff0c;用户管理&#xff0c;鲜花管理&#xff0c;鲜花出入…
阅读更多...
18 优先级队列

18 优先级队列

priority_queue介绍 1.优先级队列是一种容器适配器&#xff0c;根据弱排序标准&#xff0c;它的第一个元素总是最大的 2.此上下文类似于堆&#xff0c;堆中可以随时插入元素&#xff0c;检索最大堆元素 3.优先队列实现为容器适配器&#xff0c;容器适配器即将特定容器类封装作…
阅读更多...
【源码阅读】evmⅠ

【源码阅读】evmⅠ

代码位置如下&#xff1a; 参考link 以太坊中有一个很重要的用途是智能合约&#xff0c;而其中evm模块是实现了执行智能合约的虚拟机。evm可以逐条解析执行智能合约的指令。 evm中的核心对象是EVM&#xff0c;代表一个以太坊虚拟机。其内部主要依赖&#xff1a;解释器Interore…
阅读更多...
水下蓝牙耳机哪个牌子好?推荐四款高人气力作游泳耳机

水下蓝牙耳机哪个牌子好?推荐四款高人气力作游泳耳机

在这个充满活力的时代&#xff0c;人们对于生活的追求早已不仅仅局限于日常的琐碎&#xff0c;更多的是对健康、对自我挑战的向往。运动&#xff0c;成为了现代人生活中不可或缺的一部分。而游泳&#xff0c;作为一项既能锻炼全身&#xff0c;又能享受水中美妙的运动&#xff0…
阅读更多...
行尾检测论文汇总

行尾检测论文汇总

文章目录 2023GNSS-Free End-of-Row Detection and Headland Maneuvering for Orchard Navigation Using a Depth Camera 2023 GNSS-Free End-of-Row Detection and Headland Maneuvering for Orchard Navigation Using a Depth Camera 摘要&#xff1a; 果园中基于GPS的导航…
阅读更多...
苍穹外卖-day08：导入地址簿功能代码（单表crud）、用户下单（业务逻辑）、订单支付（业务逻辑，cpolar软件）

苍穹外卖-day08：导入地址簿功能代码（单表crud）、用户下单（业务逻辑）、订单支付（业务逻辑，cpolar软件）

苍穹外卖-day08 课程内容 导入地址簿功能代码用户下单订单支付 功能实现&#xff1a;用户下单、订单支付 用户下单效果图&#xff1a; 订单支付效果图&#xff1a; 1. 导入地址簿功能代码&#xff08;单表crud&#xff09; 1.1 需求分析和设计 1.1.1 产品原型&#xff08…
阅读更多...
Linux——进程通信（二） 匿名管道的应用：进程池

Linux——进程通信（二） 匿名管道的应用：进程池

前言 之前我们学习了进程通过匿名管道进行通信&#xff0c;实现了两个进程的数据传输。 如果我们管理的是很多个进程&#xff0c;通过管道发送指令&#xff0c;因为如果管道中没有数据&#xff0c;读端必须等待&#xff0c;也就是被管理的进程们都在等待我发送的指令&#xf…
阅读更多...
DevExpress WinForms crack,DevExpress WinForms组件套件和库

DevExpress WinForms crack,DevExpress WinForms组件套件和库

DevExpress WinForms crack,DevExpress WinForms组件套件和库 Reporting & Analytics - Reports, Pivot Tables, PDF Viewer. The DevExpress WinForms Subscription includes royalty-free user interface components for next-gen decision support systems. Whether you…
阅读更多...
SegFormer 项目排坑记录

SegFormer 项目排坑记录

SegFormer 项目排坑记录 任务记录创建conda环境 准备数据库和预训练参数程序配置修改测试可视化训练 任务 需要复现SegFormer分割项目&#xff0c;似乎还有点麻烦&#xff0c;参考这几个进行复现&#xff0c;记录下过程&#xff1a; SegFormer mmsegmentation CSDN博客 知乎博…
阅读更多...
保姆级教学！微信小程序设计全攻略！

保姆级教学！微信小程序设计全攻略！

微信小程序开启了互联网软件的新使用模式。在各种微信小程序争相抢占流量的同时&#xff0c;如何设计微信小程序&#xff1f;让用户感到舒适是设计师在产品设计初期应该考虑的问题。那么如何做好微信小程序的设计呢&#xff1f;即时设计总结了以下设计指南&#xff0c;希望对准…
阅读更多...
车企都卷入鸿蒙开发的行了！难怪岗位需求量涨这么快！！！

车企都卷入鸿蒙开发的行了！难怪岗位需求量涨这么快！！！

近日华为鸿蒙 OS 官微宣布&#xff0c;首批汽车行业伙伴广汽传祺、岚图汽车、零跑汽车、凯翼汽车官宣加入鸿蒙生态。 这四家车企加入&#xff0c;会不会影响着其他车企想哪些手机APP厂商那种陆续的跟上呢&#xff1f; 其实在此前国内新能源扛把子比亚迪早已与华为达成了合作&a…
阅读更多...
纳米阱可提高未来光学设备的光强度

纳米阱可提高未来光学设备的光强度

一种配置光捕获器件的方法有望通过放大光和提高发光纳米材料的发射效率来获得更好的光学纳米器件&#xff0c;而无需复杂的技术升级。 强光束对于从医学到电子产品的无数应用至关重要&#xff0c;但使用日常光源生产它们具有挑战性。然而&#xff0c;它们可以由激光产生。激光…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023