React Hooks 全解:零基础入门

Hooks 的由来

你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗? ——拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function。

你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗? ——拥有了Hooks,生命周期钩子函数可以先丢一边了。

你在还在为组件中的this指向而晕头转向吗? ——既然Class都丢掉了,哪里还有this?你的人生第一次不再需要面对this。

什么是 Hooks

Hooks are functions that let you “hook into” React state and lifecycle features from function components

上面是官方解释。从中可以看出 Hooks 是函数,有多个种类,每个 Hook 都为Function Component提供使用 React 状态和生命周期特性的通道。Hooks 不能在Class Component中使用。

React 提供了一些预定义好的 Hooks 供我们使用,下面我们来详细了解一下。

 常用hooks

image.png

useState(重点掌握)

1.参数:

  • 常量:组件初始化的时候就会定义
import React, { useState } from 'react';function Example() {// 声明一个叫 "count" 的 state 变量,初始值为0,后续通过setCount改变它能让视图重新渲染const [count, setCount] = useState(0);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

  • 函数:只有开始渲染的时候函数才会执行
// initialState 参数只会在组件的初始渲染中起作用,后续渲染时会被忽略。
// 如果初始 state 需要通过复杂计算获得,则可以传入一个函数,在函数中计算并返回初始的 state,
// 此函数只在初始渲染时被调用:
const [count, setCount] = useState(() => {const initialCount = someExpensiveComputation(props);return initialState;
})

复制

2.返回值

useState返回值时一个长度为2的数组,数组第一项为为定义的变量(名称自己定),第二项时改变第一项的函数(名称自己定),具体示例可看上述代码。

useEffect(重点掌握)

该 Hook 有两个参数,第一个参数是一个包含命令式、且可能有副作用代码的函数,第二个参数是一个数组,此参数来控制该Effect包裹的函数执不执行,如果第二个参数不传递,则该Effect每次组件刷新都会执行,相当于class组件中的componentDidMount和componentDidupdate生命周期的融合

1.基本使用方法

import React, { useState, useEffect } from 'react';function Example() {const [count, setCount] = useState(0);// Similar to componentDidMount and componentDidUpdate:useEffect(() => {// Update the document title using the browser APIdocument.title = `You clicked ${count} times`;});return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

复制

2.控制函数的执行

和上述代码类似,我们给useEffect传递第二个参数[count],这样只有count改变的时候才会执行

import React, { useState, useEffect } from 'react';function Example() {const [count, setCount] = useState(0);// 只有count改变时才会执行useEffect(() => {// Update the document title using the browser APIdocument.title = `You clicked ${count} times`;},[count]);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

复制

import React, { useEffect } from 'react';function Example() {// 组件挂载时只执行一次useEffect(() => {console.log("只执行一次,类似componentDidMount")},[]);return (<div>只执行一次的Effect</div>);
}

复制

3.需要清除的副作用

有一些副作用是需要清除的。例如订阅外部数据源。这种情况下,清除工作是非常重要的,可以防止引起内存泄露!

useCallback(重点掌握)

把内联回调函数及依赖项数组作为参数传入 useCallback,它将返回该回调函数的 memoized 版本,该回调函数仅在某个依赖项改变时才会更新

  • 常见应用场景:父组件向子组件传递会回调函数(但是react官方不推荐这种方式,官方推荐使用useReducer hook,通过传递dispatch来避免这种形式,具体原因参考官方解释)
  • 示例:
import React, { useEffect, useState, useCallback } from 'react';
// 子组件
function Son({callback}) {renturn (<a onClick={()=>callback("小红")}>点击切换姓名</a>)
}
// 父组件
function Parent() {const [name,setName] = useState("")useEffect(() => {console.log("获取数据并更新state")setName("小明")},[]);const callback = useCallback(name => {setName(name);}, []);return (<><Son callback={callback} />;name:{name}<>)
}

复制

useMemo(重点掌握)

useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。

把“创建”函数和依赖项数组作为参数传入 useMemo,它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算

如果没有提供依赖项数组,useMemo 在每次渲染时都会计算新的值。

你可以把 useMemo 作为性能优化的手段,但不要把它当成语义上的保证!

应用场景:

  • 存储一次昂贵的计算
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

复制

  • 跳过一次子节点的昂贵的重新渲染
function Parent({ a, b }) {// Only re-rendered if `a` changes:const child1 = useMemo(() => <Child1 a={a} />, [a]);// Only re-rendered if `b` changes:const child2 = useMemo(() => <Child2 b={b} />, [b]);return (<>{child1}{child2}</>)
}

复制

 

React Hooks 全解:零基础入门 - 掘金

React Hooks教程之基础篇-腾讯云开发者社区-腾讯云

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

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

相关文章

Linux: 使用 ssh 连接其他服务器

通过ifconfig 查看要连接的服务器地址&#xff1a; ubuntuubuntu1804-0172:/media/sangfor/vdc$ ssh ubuntu192.168.11.49 输入要连接的服务器密码: ubuntua192.168.1149 s password: 连接服务器成功&#xff1a;

投递技术类简历的注意事项

简历修改的背景 作为程序员&#xff0c;随着工作年限的增加&#xff0c;要定期的去修改自己的简历中的工作项目&#xff0c;一方面可以促进自己复盘一下工作成果和个人成长&#xff0c;另外也能给自己换工作提供一个前置的便捷性。 注意事项 修改简历的时候有哪些需要注意的…

MySQL 视图

目录 一、视图概述 二、视图的作用和优点 三、视图的使用规则 四、视图操作 1、创建视图 2、查看视图 1&#xff09;查看视图基本信息 2&#xff09;查看视图详细信息 3、修改视图 4、更新视图 5、删除视图 一、视图概述 视图是数据库中的一个虚拟表&#xff0c;同真…

HRS--人力资源系统(Springboot+vue)--打基础升级--(六)分页查询 + 重置按钮

一&#xff1a;先弄个简单的重置按钮 1.界面设计就放在搜索框同一列的位置 2. 在点击重置按钮时&#xff0c;清空搜索框内的内容&#xff0c;同时触发一次无条件查询(这个写法有bug&#xff0c;下面会有说明) 二&#xff1a;做分页 在MyBatis中&#xff0c;有多种方法可以实现分…

【LeetCode】416.分割等和子集

题目 给你一个 只包含正整数 的 非空 数组 nums 。请你判断是否可以将这个数组分割成两个子集&#xff0c;使得两个子集的元素和相等。 示例 1&#xff1a; 输入&#xff1a;nums [1,5,11,5] 输出&#xff1a;true 解释&#xff1a;数组可以分割成 [1, 5, 5] 和 [11] 。 示…

Vue2-快速搭建pc端后台管理系统

一.推荐二次开发框架 vue-element-admin Star(84k)vue-antd-admin Star(3.5k) 二.vue-element-admin 官网链接:https://panjiachen.github.io/vue-element-admin-site/zh/ 我这里搭建的是基础模版vue-admin-template(推荐) # 克隆项目 git clone https://github.com/PanJi…

VBJSON报错:缺少:语句结束

项目中使用JSON库VBJSON时报错&#xff1a; 编译错误&#xff1a;缺少&#xff1a;语句结束 cJSONScript和cStringBuilder报相同的错误&#xff0c;都在第一行: VERSION 1.0 CLASS 研究了半天没啥结果&#xff0c;之前使用这个库的时候没有什么问题&#xff0c;所以判定是当前…

MySQL 游标

文章目录 1.游标是什么2.MySQL 游标3.定义游标4.打开游标5.提取数据6.关闭游标参考文献 1.游标是什么 游标&#xff08;Cursor&#xff09;是一种用于处理查询结果集的数据库对象&#xff0c;它允许开发者按照特定的顺序逐行遍历查询结果集中的数据。游标通常用于在数据库中执…

mysql 字符集、比较规则, 比较规则底层逻辑

字符集的级别 show variables like ‘%charecter%’&#xff1b; character_set_server 服务器级别 一般在 5.7&#xff1a; C:\ProgramData\MySQL\MySQL Server 5.7\my.ini 8.0&#xff1a; C:\ProgramData\MySQL\MySQL Server 5.7\my.ini Linux 系列 vim /etc/my.cnf chara…

基于Spark框架的新闻推荐系统的设计与实现

1.摘要 离线ALS算法,以及基于内容的推荐算法进行结合.实时计算部分,使用Spark平台上的Spark Streaming流处理技术,处理日志收集框架Flume收集的日志信息. 2.需要的技术 jieba分词工具 LDA分词处理技术 LDA(Latent Dirichlet Allocatio

Debezium系列之:深入理解Debezium Server Operator和实际应用Debezium Server Operator案例详解

Debezium系列之:深入理解Debezium Server Operator和实际应用Debezium Server Operator案例详解 一、认识Debezium Server Operator二、深入理解Debezium Server和Debezium Server实际应用案例详解三、Debezium Server Operator安装步骤四、Debezium Operator使用案例五、post…

P5739 【深基7.例7】计算阶乘

题目描述 求 n ! n! n!&#xff0c;也就是 1 2 3 ⋯ n 1\times2\times3\dots\times n 123⋯n。 挑战&#xff1a;尝试不使用循环语句&#xff08;for、while&#xff09;完成这个任务。 输入格式 第一行输入一个正整数 n n n。 输出格式 输出一个正整数&#xff0c…

解决:Docker Desktop Unexpected WSL error

1、Windows中WSL2&#xff08;子系统&#xff09;安装前提条件 版本&#xff1a;win10专业版 对于 x64 系统&#xff1a;版本 1903 或更高版本&#xff0c;采用 内部版本 18362 或更高版本。 低于 18362 的版本不支持 WSL 2。 使用 Windows Update 助手更新 Windows 版本 2…

【广州华锐互动】VR高校虚拟实验教学平台提供丰富的资源支持,提高教学效果

随着科技的不断进步&#xff0c;虚拟现实(VR)技术已经逐渐渗透到各个领域&#xff0c;其中包括教育。 广州华锐互动利用VR虚拟现实技术打造的VR高校虚拟实验教学平台&#xff0c;是一种新型的教学工具&#xff0c;它提供了一个在线的教学资源管理平台&#xff0c;包含教学平台、…

电阻器件的分类

电阻器的种类碳膜电阻膜式电阻器中的一种。气态碳氢化合物在高温和真空中分解&#xff0c;碳沉积在瓷棒或者瓷管上&#xff0c;形成一层结晶碳膜。改变碳膜厚度和用刻槽的方式变更碳膜的长度可以得到不同的阻值。碳膜电阻成本较低&#xff0c;电性能和稳定性较差&#xff0c;一…

java从头记-public、protected、default、private

当定义一个类及其成员时&#xff0c;可以使用不同的访问修饰符来控制类成员的可见性&#xff0c;从而限定它们的作用域。以下是详细解释每个访问修饰符的作用&#xff1a; public 访问修饰符: public 成员可以被任何其他类访问&#xff0c;无论是否在同一个包内。在不同的包内&…

【力扣】209. 长度最小的子数组 <滑动窗口>

【力扣】209. 长度最小的子数组 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其和 ≥ target 的长度最小的连续子数组 [numsl, numsl1, …, numsr-1, numsr] &#xff0c;并返回其长度。如果不存在符合条件的子数组&#xff0c;返回 0 。 示例 1&a…

3种CSS实现背景图片全屏铺满自适应的方式

01 margin:0px; background: url(images/bg.png) no-repeat; background-size:100% 100%; background-attachment:fixed; url(images/beijing.png)——图片路径的位置&#xff1b; no-repeat—— 图片不重复&#xff1b; center 0px——center是距离页面左边的定位&#xf…

【【萌新的STM32学习-18 中断的基本概念3】】

萌新的STM32学习-18 中断的基本概念3 EXTI和IO映射的关系 AFIO简介&#xff08;F1&#xff09; Alternate Function IO 复用功能IO 主要用于重映射和外部中断映射配置 1.调试IO配置 来自AFIO_MAPR[26:24] , 配置JTAG/SWD的开关状态 &#xff08;这个我们并不用太过深刻的关注&…