React Hooks 完全指南:无类组件革命

目录

​编辑

前言

Hooks的前世

函数组件

类组件

状态和生命周期的管理

Hooks用途以及相应代码

状态管理

用于生命周期管理和副作用操作的 Hooks

用于上下文管理的 Hooks

其他用途的 Hooks


 

前言

React Hooks 是在 React 16.8 版本中引入的一个非常强大的新特性,它允许在不编写 class 组件的情况下使用 state 和其他 React 特性。Hooks 提供了一种更直接的方式来使用 React 的特性和生命周期功能,让函数组件的能力大大增强。

有关state状态的详细解释可以在这篇文章找到解释,粗糙理解就是app的数据flutter向 一文就够了 以声明式编程的角度理清到处都用的“状态state”是什么-CSDN博客

Hooks的前世

既然说到hooks在16.8才引入,那之前是怎么处理代码的呢

React 16.8 引入 Hooks 之前,React 的组件主要通过两种方式编写:函数组件和类组件

函数组件

在 React 16.8 之前,函数组件被称为无状态组件,主要用于展示,不能使用状态(state)和生命周期方法。函数组件的主要优点是简洁易懂。它接收 props 作为输入,返回需要渲染的 JSX。

function Welcome(props) { return <h1>Hello, {props.name}</h1>; }

类组件

类组件允许使用更多的特性,如内部状态(state)和生命周期方法。通过这些特性,可以控制组件的创建、更新和销毁过程。

class Welcome extends Component {constructor(props) {super(props);this.state = { counter: 0 };}componentDidMount() {// 组件挂载后执行}componentDidUpdate() {// 组件更新后执行}componentWillUnmount() {// 组件卸载前执行}render() {return <h1>Hello, {this.props.name}</h1>;}
}

状态和生命周期的管理

在 Hooks 出现之前,要在函数组件中使用状态和生命周期,开发者需要将其重构为类组件。这一点限制了函数组件的使用场景,也增加了组件代码的复杂性。

所以不难理解,这样会有如下麻烦

  1. 在组件之间复用状态逻辑很难: 在 Hooks 出现之前,复用状态逻辑需要高阶组件或渲染属性模式,这些模式使得代码难以理解。
  2. 复杂组件变得难以理解: 类组件经常需要理解 JavaScript 中的 this 关键字,且代码往往分散在多个生命周期方法中。
  3. 难以理解的类: 对于初学者和非 JavaScript 背景的开发者来说,类是一个比较难以理解和使用的概念。

Hooks用途以及相应代码

状态管理

  • useState:这是最基本的 Hook,允许在函数组件中添加局部状态。状态通常是指组件中的数据,如用户输入、列表项等。
function Example() {const [count, setCount] = useState(0);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

用于生命周期管理和副作用操作的 Hooks

  • useEffect:允许在函数组件中执行副作用操作(如数据获取、订阅或手动修改 DOM 等),它可以被看作是 componentDidMountcomponentDidUpdatecomponentWillUnmount 这些生命周期方法的组合。
function Example() {const [count, setCount] = useState(0);// 类似于 componentDidMount 和 componentDidUpdate:useEffect(() => {// 使用浏览器的 API 更新页面标题document.title = `You clicked ${count} times`;});return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

用于上下文管理的 Hooks

  • useContext:允许在函数组件中访问 React 的 Context 特性,使得跨组件层级的数据传递变得简单。
function Example() {const theme = useContext(ThemeContext);return <div style={{ background: theme.background, color: theme.color }}>我是使用了 ThemeContext 的文本</div>;
}

其他用途的 Hooks

  • useReducer:为状态管理提供了更复杂的替代方案,类似于 Redux 中的 reducer,适用于组件有复杂状态逻辑时使用。
  • useCallback:返回一个记忆化的回调函数,只有在一个依赖项改变时才会更新,适用于传递给子组件的回调优化。
  • useMemo:返回一个记忆化的值,只有在依赖项改变时才重新计算,用于性能优化。
  • useRef:返回一个可变的 ref 对象,其 .current 属性被初始化为传入的参数(initialValue),用于访问 DOM 节点或存储任何可变值。

更多hook查看react官网

React 内置 Hook – React 中文文档

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

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

相关文章

建筑外窗遮阳系数测试的太阳光模拟器

太阳光模拟器是一种用于测试建筑外窗遮阳系数的高科技设备。它能够模拟太阳光照射房屋的情景&#xff0c;帮助建筑师和设计师更好地了解建筑外窗的遮阳性能&#xff0c;从而提高建筑的能源效率和舒适度。 这种模拟器的工作原理非常简单&#xff0c;它通过使用高亮度的光源和精…

scrapy 爬虫:多线程爬取去微博热搜排行榜数据信息,进入详情页面拿取第一条微博信息,保存到本地text文件、保存到excel

如果想要保存到excel中可以看我的这个爬虫 使用Scrapy 框架开启多进程爬取贝壳网数据保存到excel文件中&#xff0c;包括分页数据、详情页数据&#xff0c;新手保护期快来看&#xff01;&#xff01;仅供学习参考&#xff0c;别乱搞_爬取贝壳成交数据c端用户登录-CSDN博客 最终…

Bee Mobile组件库重磅升级

Bee Mobile组件库重磅升级&#xff01; 丰富强大的组件移动预览快速上手create-bee-mobile Bee Mobile组件库重磅升级&#xff01; Bee Mobile组件库最新 v1.0.0 版本&#xff0c;支持最新的 React v18。 主页&#xff1a;Bee Mobile 丰富强大的组件 一共拥有50多个组件&…

Linux 常用命令汇总(一):查询帮助 文件压缩及解压缩 搜索文件

一、线上查询及帮助命令 1.1 man 1.1.1 介绍 man 命令用于显示命令手册页面&#xff08;manual pages&#xff09;&#xff0c;提供了关于命令、函数、系统调用等的详细文档和使用说明 1.1.2 使用方法 man [选项] [命令或函数或系统调用]1.1.3 参数详解 -f&#xff1a;显…

Java面向对象总结 ( 知识点 | 代码详解 )

类和对象 什么是类&#xff1f; ● 概念&#xff1a;具有相同特征&#xff08;同一类&#xff09;事物的抽象描述&#xff0c;如人类&#xff0c;车类&#xff0c;学生类等。 类的结构&#xff1a; ● 变量: 事物属性的描述(名词) ● 方法: 事物的行为&#xff08;可以做…

基于Flask的宠物领养系统的设计与实现

基于Flask的宠物领养系统的设计与实现 涉及技术&#xff1a;python3.10flaskmysql8.0 系统分为普通用户和管理员两种角色&#xff0c;普通用户可以浏览搜索宠物&#xff0c;申请领养宠物&#xff1b;管理员可以分布宠物信息&#xff0c;管理系统等。 采用ORM模型创建数据&am…

QT----云服务器部署Mysql,Navicat连接1698 -Access denied for user ‘root‘@‘‘

阿里云有活动&#xff0c;白嫖了一年的新加坡轻量级服务器&#xff0c;有点卡&#xff0c;有时候要开梯子 白嫖300元优惠券 目录 1 安装启动Mysql服务2 更改连接权限2.1 Navicat连接报错1698 -Access denied for user root 3 qt连接云服务器数据库 1 安装启动Mysql服务 我使用…

f5——>字符串三角

暴力破解&#xff0c;双层循环&#xff0c;注意复制到新列表用append&#xff0c;这样更不容易出错 格式还是“”.join(str)

eNSP(Enterprise Network Simulation Platform)详细介绍

一、引言 随着网络技术的快速发展&#xff0c;网络设备的种类和功能日益增多&#xff0c;网络拓扑结构也变得越来越复杂。这对于学习网络技术、设计网络方案以及进行网络设备的测试都提出了更高的要求。为了满足这些需求&#xff0c;华为推出了eNSP&#xff08;Enterprise Net…

Grid网格布局的基本使用

文章目录 什么是网格布局属性display 属性grid-row-gap 属性&#xff0c; grid-column-gap 属性&#xff0c; grid-gap 属性grid-template-areas 属性grid-auto-flow 属性justify-items 属性 &#xff0c; align-items 属性&#xff0c; place-items 属性justify-content 属性 …

Java高频面试之集合篇

Java 中常用的容器有哪些&#xff1f; ArrayList 和 LinkedList 的区别&#xff1f; ArrayList 是基于数组实现的,LinkedList 是基于链表实现的. ArrayList实现了RandomAccess接口,可基于下标访问. LinkedList 实现了Deque /dek/,可以当做双端队列使用. 插入效率对比 如果从头部…

Unity的滑动控制相机跟随和第三人称视角三

Unity的相机跟随和第三人称视角三 第三人称相机优化介绍讲解拖动事件相机逻辑人物移动逻辑总结 第三人称相机优化 Unity第三人称相机视角一 Unity第三人称相机视角二 介绍 之前相机视角讲过了两篇文章了&#xff0c;但是都是自动旋转视角&#xff0c;今天来了新需求&#xf…

支部管理系统微信小程序(管理端+用户端)flask+vue+mysql+微信小程序

系统架构如图所示 高校D支部管理系统 由web端和微信小程序端组成&#xff0c;由web端负责管理&#xff0c;能够收缴费用、发布信息、发布问卷、发布通知等功能 部分功能页面如图所示 微信小程序端 包含所有源码和远程部署&#xff0c;可作为毕设课设

网络中UDP编程

网络 1.recvfrom ssize_t recvfrom(int sockfd, void *buf, size_t len, int flags, struct sockaddr *src_addr, socklen_t *addrlen); 功能: 从套接字中接收数据 参数: sockfd:套接字文件描述符 buf:存放数据空间首…

Java 数据结构之链表

public ListNode getIntersectionNode(ListNode headA, ListNode headB) {if (headA null || headB null) return null;ListNode pA headA, pB headB;while (pA ! pB) {pA pA null ? headB : pA.next;pB pB null ? headA : pB.next;}return pA;} public ListNode rev…

Pytorch将数据(张量)写入视频

Pytorch将数据写入视频 1. 安装与报错解决2. torch.io程序3. cv2 img文件转视频参考资料 1. 安装与报错解决 安装 pip install PyAV报错问题1的解决 报错信息如下&#xff1a; ...tf2_py38\lib\site-packages\torchvision\io\video.py", line 41, in _check_av_availab…

解决Git中fatal: refusing to merge unrelated histories

我们在git新建项目的时候一般是先建一个远程仓库&#xff0c;然后本地与之关联&#xff0c;再将本地代码推到远程仓库就可以了&#xff0c;不过有可能返回以下错误&#xff1a; fatal: refusing to merge unrelated histories 这时需要在命令后增加以下命令即可 --allow-unr…

【Unity】【VR开发】如何避免按键冲突

【背景】 VR开发过程中,控制器按键冲突是常有的问题。比如握住手枪时发射子弹用的Trigger,瞬移用的也是Trigger,如何解决这种冲突呢? 【分析】 为了让同一个Trigger按键在不同场景下分别触发合适的动作,需增加判断逻辑来区分场景。具体到当前的问题,需要追加判断逻辑区…

数据库系列之:什么是 SAP HANA?

数据库系列之&#xff1a;什么是 SAP HANA&#xff1f; 一、什么是 SAP HANA&#xff1f;二、什么是内存数据库&#xff1f;三、SAP HANA 有多快&#xff1f;四、SAP HANA 的十大优势五、SAP HANA 架构六、数据库设计七、数据库管理八、应用开发九、高级分析十、数据虚拟化 一、…

通信(四)gRPC

gRPC 1. 简介2. C2.1 编译.proto生成.pb.h和.pb.cc服务器示例客户端示例 3. C#3.1 导入NuGet程序包编译.proto生成.cs和Grpc.cs示例 1. 简介 2. C 2.1 编译.proto生成.pb.h和.pb.cc grpc_cpp_plugin.exe生成编译时.proto自动生成 服务器示例 客户端示例 3. C# 3.1 导入N…