说说对React Hooks的理解?解决了什么问题?

面试官:说说对React Hooks的理解?解决了什么问题?

一、是什么

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性

至于为什么引入hook,官方给出的动机是解决长时间使用和维护react过程中常遇到的问题,例如:

  • 难以重用和共享组件中的与状态相关的逻辑
  • 逻辑复杂的组件难以开发与维护,当我们的组件需要处理多个互不相关的 local state 时,每个生命周期函数中可能会包含着各种互不相关的逻辑在里面
  • 类组件中的this增加学习成本,类组件在基于现有工具的优化上存在些许问题
  • 由于业务变动,函数组件不得不改为类组件等等

在以前,函数组件也被称为无状态的组件,只负责渲染的一些工作

因此,现在的函数组件也可以是有状态的组件,内部也可以维护自身的状态以及做一些逻辑方面的处理

二、有哪些

上面讲到,Hooks让我们的函数组件拥有了类组件的特性,例如组件内的状态、生命周期

最常见的hooks有如下:

  • useState
  • useEffect
  • 其他

useState

首先给出一个例子,如下:

import React, { useState } from 'react';function Example() {// 声明一个叫 "count" 的 state 变量const [count, setCount] = useState(0);return (<div><p>You clicked {count} times</p ><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

在函数组件中通过useState实现函数内部维护state,参数为state默认的值,返回值是一个数组,第一个值为当前的state,第二个值为更新state的函数

该函数组件等价于的类组件如下:

class Example extends React.Component {constructor(props) {super(props);this.state = {count: 0};}render() {return (<div><p>You clicked {this.state.count} times</p ><button onClick={() => this.setState({ count: this.state.count + 1 })}>Click me</button></div>);}
}

从上述两种代码分析,可以看出两者区别:

  • state声明方式:在函数组件中通过 useState 直接获取,类组件通过constructor 构造函数中设置

  • state读取方式:在函数组件中直接使用变量,类组件通过this.state.count的方式获取

  • state更新方式:在函数组件中通过 setCount 更新,类组件通过this.setState()

总的来讲,useState 使用起来更为简洁,减少了this指向不明确的情况

useEffect

useEffect可以让我们在函数组件中进行一些带有副作用的操作

同样给出一个计时器示例:

class Example extends React.Component {constructor(props) {super(props);this.state = {count: 0};}componentDidMount() {document.title = `You clicked ${this.state.count} times`;}componentDidUpdate() {document.title = `You clicked ${this.state.count} times`;}render() {return (<div><p>You clicked {this.state.count} times</p ><button onClick={() => this.setState({ count: this.state.count + 1 })}>Click me</button></div>);}
}

从上面可以看见,组件在加载和更新阶段都执行同样操作

而如果使用useEffect后,则能够将相同的逻辑抽离出来,这是类组件不具备的方法

对应的useEffect示例如下:

import React, { useState, useEffect } from 'react';
function Example() {const [count, setCount] = useState(0);useEffect(() => {    document.title = `You clicked ${count} times`;  });return (<div><p>You clicked {count} times</p ><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

useEffect第一个参数接受一个回调函数,默认情况下,useEffect会在第一次渲染和更新之后都会执行,相当于在componentDidMountcomponentDidUpdate两个生命周期函数中执行回调

如果某些特定值在两次重渲染之间没有发生变化,你可以跳过对 effect 的调用,这时候只需要传入第二个参数,如下:

useEffect(() => {document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新

上述传入第二个参数后,如果 count 的值是 5,而且我们的组件重渲染的时候 count 还是等于 5,React 将对前一次渲染的 [5] 和后一次渲染的 [5] 进行比较,如果是相等则跳过effects执行

回调函数中可以返回一个清除函数,这是effect可选的清除机制,相当于类组件中componentwillUnmount生命周期函数,可做一些清除副作用的操作,如下:

useEffect(() => {function handleStatusChange(status) {setIsOnline(status.isOnline);}ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);return () => {ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);};
});

所以, useEffect相当于componentDidMountcomponentDidUpdatecomponentWillUnmount 这三个生命周期函数的组合

其它 hooks

在组件通信过程中可以使用useContextrefs学习中我们也用到了useRef获取DOM结构…

还有很多额外的hooks,如:

  • useReducer
  • useCallback
  • useMemo
  • useRef

三、解决什么

通过对上面的初步认识,可以看到hooks能够更容易解决状态相关的重用的问题:

  • 每调用useHook一次都会生成一份独立的状态

  • 通过自定义hook能够更好的封装我们的功能

编写hooks为函数式编程,每个功能都包裹在函数中,整体风格更清爽,更优雅

hooks的出现,使函数组件的功能得到了扩充,拥有了类组件相似的功能,在我们日常使用中,使用hooks能够解决大多数问题,并且还拥有代码复用机制,因此优先考虑hooks

参考文献

  • https://whyta.cn/post/6fbce95ab10b/
  • https://zh-hans.reactjs.org/docs/hooks-state.html
  • https://zh-hans.reactjs.org/docs/hooks-effect.html
  • https://www.cnblogs.com/lalalagq/p/9898531.html

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

山景DU561—32位高性能音频处理器(DSP)芯片

音频处理可以更好地捕捉和处理声音和音乐&#xff1b;而DSP音频处理芯片是一种利用数字信号处理技术进行音频处理的专用芯片&#xff1b;可用于多种应用&#xff0c;从音乐拾音到复杂的音频信号处理&#xff0c;和声音增强。 由工采网代理的山景DU561是一款集成多种音效算法高…

08、基于LunarLander登陆器的DDQN强化学习(含PYTHON工程)

08、基于LunarLander登陆器的DDQN强化学习&#xff08;含PYTHON工程&#xff09; LunarLander复现&#xff1a; 07、基于LunarLander登陆器的DQN强化学习案例&#xff08;含PYTHON工程&#xff09; 08、基于LunarLander登陆器的DDQN强化学习&#xff08;含PYTHON工程&#xf…

DTC营销新模式,创新商业引领裂变营销新潮流的玩法!

DTC营销新模式&#xff0c;创新商业引领裂变营销新潮流的玩法&#xff01; 随着市场竞争的加剧&#xff0c;企业寻求创新的营销模式以突破困境&#xff0c;脱颖而出。其中&#xff0c;DTC&#xff08;Direct-to-Consumer&#xff0c;直接面向消费者&#xff09;营销新模式应运…

CentOS 7 制作openssh 9.6 rpm包更新修复安全漏洞 —— 筑梦之路

2023年12月18日 openssh 发布新版9.6p1&#xff0c;详细内容阅读OpenSSH: Release Notes 背景说明 之前也写过多篇制作openssh rpm包的文章&#xff0c;为何要重新来写一篇制作openssh 9.6版本的&#xff1f; openssh 9.6 rpm包制作和之前存在区别&#xff0c;对于CentOS 7来…

spring之面向切面:AOP(2)

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

【Python】函数

一、函数介绍 二、函数的定义 三、函数的参数 四、函数的返回值 五、函数说明文档 六、函数的嵌套调用 七、变量的作用域 一、函数介绍 函数的使用 函数的作用 函数 函数&#xff1a;是组织好的&#xff0c;可重复使用的&#xff0c;用来实现特定功能的代码段。 input()、p…

文件批量管理,按单值大小归类保存,提升工作效率与便捷性!

你是否曾经遇到过需要批量管理大量文件&#xff0c;但却因为文件大小不一而感到混乱&#xff1f;你是否希望有一种方法能够将这些文件按照单值大小进行归类保存&#xff0c;以便更方便地管理和查找&#xff1f;现在&#xff0c;我们有一个好消息要告诉你&#xff0c;我们推出了…

Nvm切换nodejs版本

下载地址 Releases coreybutler/nvm-windows GitHub 安装运行 双击安装运行即可 下载速度慢的&#xff0c;可以通过修改配置文件切换国内下载镜像 node_mirror: https://npm.taobao.org/mirrors/node/ npm_mirror: CNPM Binaries Mirror 打开安装目录&#xff0c;修改se…

easyExcel生成excel并导出自定义样式------添加复杂表头

easyExcel生成excel并导出自定义样式------添加复杂表头 设置合并竖行单元格&#xff0c;表头设置 OutputStream outputStream ExcelUtils.getResponseOutputStream(response, fileName);//根据数据组装需要合并的单元格Map<String, List<String>> strategyMap …

gem5 garnet l1 l2 cache的创建与相连

gem5 garnet l1 l2 cache的创建与相连 主要就是这个图&#xff1a; 细节 我们用的是gem5/configs/deprecated/example/fs.py #fs.py 引入了上两层路径&#xff0c;也就是当前可以看到 gem5/configs/路径。 addToPath("../../")#fs.py引入了gem5/configs/ruby/Ru…

MaBatis使用`ResultMap`标签手动映射详解使用

文章目录 MaBatis使用ResultMap标签手动映射详解使用1、MyBatis只能自动维护库表”列名“与”属性名“相同时的对应关系&#xff0c;二者不同时无法自动ORM&#xff0c;如下&#xff1a;2、在SQL中使用 as 为查询字段添加列别名&#xff0c;以匹配属性名&#xff1a;但是如果我…

程序员为什么不接单赚钱?绝对是损失!!!

天气渐寒&#xff0c;2024年步步紧逼。 回望旧的2023年&#xff0c;生活有日益向好吗&#xff1f;身体是否还匹配年龄呢&#xff1f; 再问一个致命的问题&#xff1a;2023年攒的钱够多了吗&#xff1f; 如果差强人意&#xff0c;建议来年再改进。若是一言难尽&#xff0c;同样…

分享一个好看的vs主题

最近发现了一个很好看的vs主题&#xff08;个人认为挺好看的&#xff09;&#xff0c;想要分享给大家。 主题的名字叫NightOwl&#xff0c;和vscode的主题颜色挺像的。操作方法也十分简单&#xff0c;首先我们先在最上面哪一行找到扩展。 然后点击管理扩展&#xff0c;再搜索栏…

ssm基于vue.js的连锁干洗店后台管理系统论文

摘 要 使用旧方法对连锁干洗店后台管理信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在连锁干洗店后台管理信息的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;数据存在错误不能及时纠正等问题。 这次…

JDBC的使用

目录 JDBC简介 JDBC的使用 JDBC简介 JDBC(Java DataBase Connectivity)是用Java操作数据库的一套API。 sun公司官方定义的一套操作所有关系型数据库的规范&#xff0c;即接口。各个数据库厂商去实现这套接口&#xff0c;提供数据库驱动jar包。我们可以使用这套接口(JDBC)来编…

Bugku- misc-插画-WP

下载得到一个zip&#xff0c;用WinRAR打开时发现有注释 注释&#xff1a; RnJlZV9GaWxlX0NhbW91ZmxhZ2UsIOmimOebruWlveWDjaYraMuumHjeimgeeahOagtWtkC4u 明显是base64&#xff0c;解码得到&#xff1a;Free_File_Camouflage, 题目好像是挺重要的样子… 百度发现这是一款隐写…

leetcode面试经典150题——38 生命游戏

题目&#xff1a;生命游戏 **描述&#xff1a;**根据 百度百科 &#xff0c; 生命游戏 &#xff0c;简称为 生命 &#xff0c;是英国数学家约翰何顿康威在 1970 年发明的细胞自动机。 给定一个包含 m n 个格子的面板&#xff0c;每一个格子都可以看成是一个细胞。每个细胞都…

【LeetCode刷题】--245.最短单词距离III

245.最短单词距离III class Solution {public int shortestWordDistance(String[] wordsDict, String word1, String word2) {int len wordsDict.length;int ans len;if(word1.equals(word2)){int prev -1;for(int i 0;i<len;i){String word wordsDict[i];if(word.equa…

Codeforces Round 916(Div.3) A~G

A.Problemsolving Log(计数) 题意&#xff1a; 有 26 26 26个问题 A ∼ Z A \sim Z A∼Z&#xff0c;分别需要尝试 1 ∼ 26 1 \sim 26 1∼26次才能通过。 给出一个字符串&#xff0c;里面包含的每个字母代表着这道题目的一次尝试&#xff0c;问&#xff1a;总共通过了多少题…