【前端知识】React 基础巩固(四十二)——React Hooks的介绍

news/2024/5/9 19:37:12

React 基础巩固(四十二)——React Hooks的介绍

一、为什么需要Hook?

Hook 是 React 16.8 的新增特性,它可以让我们在不编写class的情况下使用state以及其他的React特性(比如生命周期)。

class组件 VS 函数式组件:

class的优势:

  1. class组件可以定义自己的state,用来保存组件自己内部的状态;而函数式组件不可以,因为函数每次调用都会产生新的临时变量。
  2. class组件有自己的生命周期,我们可以在对应的生命周期中完成自己的逻辑。比如在componentDidMount中发送网络请求,并且该生命周期函数只会执行一次。如果在函数中发送网络请求,意味着每次重新渲染都会重新发送一次网络请求。
  3. class组件可以在状态改变时只会重新执行render函数以及我们希望重新调用的生命周期函数componentDidUpdate等;而函数式组件在重新渲染时,整个函数都会被执行,似乎没有什么地方可以只让它们调用一次。

class的劣势:

  1. 组件变得日益复杂

    • 随着业务的增多,class组件会变得越来越复杂;
    • 比如componentDidMount中,可能就会包含大量的逻辑代码:包括网络请求、一些事件的监听(还需要在componentWillUnmount中移除);
    • 而对于这样的class实际上非常难以拆分:因为它们的逻辑往往混在一起,强行拆分反而会造成过度设计,增加代码的复杂度;
  2. 难以理解的class

    • 在class中,我们必须搞清楚this的指向到底是谁,所以需要花很多的精力去学习this,非常麻烦;
  3. 组件复用状态困难

    • 复用状态需要通过高阶组件;
    • 或者类似于Provider、Consumer来共享一些状态,但是多次使用Consumer时,我们的代码就会存在很多嵌套;

Hook的优势:

  1. 解决问题:在不编写class的情况下使用state以及其他的React特性,由此延伸出非常多的用法来解决上述的问题。
  2. 完美兼容:基本可以代替我们之前所有使用class组件的地方,它完全向下兼容,可以渐进式的来使用它。

二、类组件和结合Hook的函数组件的对比

  1. 用类组件实现一个计数器

    import React, { PureComponent } from "react";export class CounterClass extends PureComponent {constructor(props) {super(props);this.state = {counter: 0,};}increment() {this.setState({counter: this.state.counter + 1,});}decrement() {this.setState({counter: this.state.counter - 1,});}render() {const { counter } = this.state;return (<div><h2>当前计数:{counter}</h2><button onClick={(e) => this.increment()}>+1</button><button onClick={(e) => this.decrement()}>-1</button></div>);}
    }export default CounterClass;
  2. 用Hook+函数组件的方式实现一个计数器

    import { memo, useState } from "react";function CounterHook(props) {const [counter, setCounter] = useState(0);return (<div><h2>当前计数:{counter}</h2><button onClick={(e) => setCounter(counter + 1)}>+1</button><button onClick={(e) => setCounter(counter - 1)}>-1</button></div>);
    }export default memo(CounterHook);
  3. 对比结果

    两者虽然都能实现相同的计数器效果,但是从上文的代码量来看,利用Hook+函数组件的方式,代码更简洁,使用更方便,并且不用考虑this的相关问题!这就是Hook带来的历史性变革!

    image-20230730221459131


http://www.mrgr.cn/p/41151608

相关文章

MySQL 数据库 【增删查改(二)】

目录 一、表的设计 1、一对一 2、一对多 3、多对多 二、新增 三、查询 1、聚合查询 &#xff08;1&#xff09;聚合函数&#xff1a; &#xff08;2&#xff09; group by 子句 &#xff08;3&#xff09;having 2、联合查询 (1)内连接 (2)外连接 (3)自链接 (4)…

Web3将自己写在合约中的代币添加到MetaMask中管理

上文 Web3带着大家根据ERC-20文档编写自己的第一个代币solidity智能合约 带着大家在智能合约中创建了一个自己的代币系统 我们可以在MetaMask中去导入 ganache环境下模拟出来的第一和第二个账号 我们这里 可以看到他们的 ETH 但看不到自己的代币符号 没关系 我们点击这下面的…

字节跳动后端面试,笔试部分

var code "7022f444-ded0-477c-9afe-26812ca8e7cb" 背景 笔者在刷B站的时候&#xff0c;看到了一个关于面试的实录&#xff0c;前半段是八股文&#xff0c;后半段是笔试部分&#xff0c;感觉笔试部分的题目还是挺有意思的&#xff0c;特此记录一下。 笔试部分 问…

API教程:轻松上手HTTP代理服务!

作为HTTP代理产品供应商&#xff0c;我们为您带来一份详细的教程&#xff0c;帮助您轻松上手使用API&#xff0c;并充分利用HTTP代理服务。无论您是开发人员、网络管理员还是普通用户&#xff0c;本教程将为您提供操作指南和代码模板&#xff0c;确保您能够顺利使用API并享受HT…

JS逆向之猿人学爬虫第20题-wasm

文章目录 题目地址sign参数分析python算法还原往期逆向文章推荐题目地址 https://match.yuanrenxue.cn/match/20第20题被置顶到了第1页,题目难度 写的是中等 算法很简单,就一个标准的md5算法,主要是盐值不确定, 而盐值就在wasm里面,可以说难点就在于wasm分析 sign参数分…

高通死机分析-工具

为了方便高通稳定性领域分析9008以及死机问题&#xff0c;特此写此工具&#xff0c;方便大家分析死机问题&#xff0c;此工具还待完善&#xff0c;后续将发布&#xff0c;有兴趣请联系2251858097qq.com

7、单元测试--测试RestFul 接口

单元测试–测试RestFul 接口 – 测试用例类使用SpringBootTest(webEnvironment WebEnvironment.RANDOM_PORT)修饰。 – 测试用例类会接收容器依赖注入TestRestTemplate这个实例变量。 – 测试方法可通过TestRestTemplate来调用RESTful接口的方法。 测试用例应该定义在和被测…

M 芯片的 macos 系统安装虚拟机 centos7 网络配置

centos 安装之前把网络配置配好或者是把网线插好 第一步找到这个 第二步打开网络适配器 选择图中所指位置 设置好之后 开机启动 centos 第三步 开机以后 编写网卡文件保存 重启网卡就可以了&#xff0c;如果重启网卡不管用&#xff0c;则重启虚拟机即可 “ ifcfg-ens160 ” 这…

美容店预约小程序制作教程详解

现在&#xff0c;制作一个专属于美容店的预约小程序不再需要编程经验&#xff0c;通过乔拓云网提供的后台管理系统&#xff0c;你可以轻松地完成整个制作过程。下面&#xff0c;我将为你详细介绍如何DIY一个美容店预约小程序。 首先&#xff0c;登录乔拓云网的后台管理系统&…

NAS私有云存储 - 搭建Nextcloud私有云盘并公网远程访问

文章目录 摘要视频教程1. 环境搭建2. 测试局域网访问3. 内网穿透3.1 ubuntu本地安装cpolar3.2 创建隧道3.3 测试公网访问 4 配置固定http公网地址4.1 保留一个二级子域名4.1 配置固定二级子域名4.3 测试访问公网固定二级子域名 摘要 Nextcloud,它是ownCloud的一个分支,是一个文…

c++11 标准模板(STL)(std::basic_ifstream)(一)

定义于头文件 <fstream> template< class CharT, class Traits std::char_traits<CharT> > class basic_ifstream : public std::basic_istream<CharT, Traits> 类模板 basic_ifstream 实现文件流上的高层输入操作。它将 std::basic_istream…

ALLEGRO之File

本文主要讨论ALLEGRO软件中的File菜单。 &#xff08;1&#xff09;New&#xff1a;新建&#xff0c;用于新建Board/Package symbol等&#xff1b; &#xff08;2&#xff09;Open&#xff1a;打开&#xff0c;用于打开brd、dra等文件&#xff1b; &#xff08;3&#xff09;S…

Spring详解(学习总结)

目录 一、Spring概述 &#xff08;一&#xff09;、Spring是什么&#xff1f; &#xff08;二&#xff09;、Spring框架发展历程 &#xff08;三&#xff09;、Spring框架的优势 &#xff08;四&#xff09;、Spring的体系结构 二、程序耦合与解耦合 &#xff08;一&…

菜单 vue3 h函数创建组件

目录 index/.vue <template><div class"menu_table"><divclass"table_row"v-for"(item, index) in menuList"click"item.disabled ! true && itemClick(item)"><!-- :style"{border-top:item.line…

Redis常用命令

1.String类型 MSET &#xff1a;批量添加多个String类型键值对 MGET&#xff1a;批量获取多个String类型键值对 127.0.0.1:6379> MSET k1 v1 k2 v2 k3 v3 OK 127.0.0.1:6379> MGET k1 k2 k3 1) "v1" 2) "v2" 3) "v3" 127.0.0.1:6379> …

nginx mirror代码分析

实现方式 mirror逻辑的工作阶段&#xff1a; ngx在log phase之后&#xff08;在ngx_http_free_request处调用&#xff09;已完成向client端返回response&#xff0c;在log phase之后完成close connection&#xff08;短链接&#xff09;&#xff0c;在该阶段处理mirror逻辑不…

C语言中的函数(超详细)

C语言中的函数&#xff08;超详细&#xff09; 一、函数概述二、C语言中函数的分类1.库函数2.自定义函数三、函数的参数1.实际参数&#xff08;实参&#xff09;2.形式参数&#xff08;形参&#xff09;四、函数的调用1.传值调用2.传址调用五、函数的嵌套调用和链式访问1.嵌套调…

二叉树(C语言)

文章目录 1.树1.1概念1.2相关定义1.3 表示&#xff08;左孩子右兄弟&#xff09; 2.二叉树2.1概念2.2特殊的二叉树1. 满二叉树&#xff1a;2. 完全二叉树&#xff1a; 2.3二叉树的性质2.4练习 3.二叉树的存储结构1. 顺序存储2. 链式存储 4.完全二叉树的代码实现4.1堆的介绍1.堆…

Android应用开发(23)获取亮灭屏状态

Android应用开发学习笔记——目录索引 在android 应用程序获取亮灭屏状态的常用方法有&#xff1a; 使用PowerManager提供的API函数注册Broadcast监听 一、使用PowerManager提供的API函数 frameworks/base/core/java/android/os/PowerManager.java import android.os.Buil…

ChatGPT与Claude对比分析

一 简介 1、ChatGPT: 访问地址&#xff1a;https://chat.openai.com/ 由OpenAI研发,2022年11月发布。基于 transformer 结构的大规模语言模型,包含1750亿参数。训练数据集主要是网页文本,聚焦于流畅的对话交互。对话风格友好,回复通顺灵活,富有创造性。存在一定的安全性问题,可…