React学习计划-react-hooks补充

React Hooks

1. 使用hooks理由

  1. 高阶组件为了复用,导致代码层级复杂
  2. 生命周期的复杂

2. useState(保存组件状态)

const [state, setstate] = useState(initialState)

3. useEffect(处理副作用)和useLayoutEffect(同步执行副作用)

  1. 使用方式:
useEffect(() => {// effectreturn () => {// cleanup};
}[依赖的状态;空数组,表示不依赖])
  1. 说明:
  • 不传入依赖:对比componentDidMount生命周期,表示初始加载完后执行
  • 传入依赖:对比componentDidMountcomponentDidUpdate生命周期,表示加载完后和更新完成后执行
  • 回调函数内return函数,对比componentWillUnmount销毁生命周期
  1. 示例:
useEffect(()=>{const timer = setInterval(()=>{console.log('这是定时器')}, 1000)return ()=>{console.log('componentWillUnmount销毁时触发')clearInterval(timer)}
},[name])
  1. useEffectuseLayoutEffect区别:

简单来说就是调用时机不同,useLayoutEffect和原来componentDidMount & componentDidUpdate一致,在react完成DOM更新后马上同步调用代码,会阻塞页面渲染。useEffect则是在整个页面渲染完才会调用代码

官方优先建议使用useEffect

在实际使用时如果想避免页面抖动(在useEffect里修改DOM很有可能出现)的话,可以把需要操作的DOM的代码放在useLayoutEffect里,在这里做DOM操作,这些DOM修改会和react做出的更改一起被一次性渲染到屏幕上,只有一次回流、重绘的代价

4. useCallBack(记忆函数)

防止因为组件重新渲染,导致方法被重新创建,起到缓存作用,只有第二个参数变化了,才重新声明一次

var handleClick = useCallback(()=>{console.log(name)
},[name])<button onClick={()=>handleClick()}>点击</button>// 只有name改变后,这个函数才会重新声明一次
// 如果传入空数组,那么就是第一次创建被缓存,如果name后期改变了,拿到的还是老name
// 如果传第二个参数,每次都会重新声明一次,拿到的就是最新的name

5. useMemo(记忆组件)(可以理解为Vue的计算属性)

useCallBack的功能完全可以由useMemo所取代,如果你想通过使用useMemo返回一个记忆函数也是完全可以的。

useCallback(fn, inputs) is equivalent to useMemo(()=> fn, inputs)

唯一的区别是:useCallback不会执行第一个参数函数,而是将它返回给你,而useMemo会执行第一个函数并将函数执行结果返回给你。所以在前面的例子中,可以返回handleClick来达到存储函数的目的。
所以useCallback常用记忆事件函数,生成记忆后的事件函数并传递给子组件使用。而useMemo更适合经过函数计算得到一个确定的值,比如记忆组件。

const getFilterList = useMemo(()=> list.filter(item => item.name.toUpperCase().includes(text.toUpperCase())),[list, text] // 如果list和text变化)

6. useRef(保存引用值)

  1. 设置ref属性值
const myRef = useRef(null)
<Child ref={myRef}/>
  1. 用于缓存一个变量值
const [name, setName] = useState('zhangsan')
var mycount = useRef(0)
<button onClick={()=>{setName('lisi')mycount.current++
}}>点击</button>
{name}-{mycount}

7. useReduceruseContext(减少组件层级)

  1. useContext用于组件通信,接收父组件传入的值
// 父组件
import React from 'react'
var GlobalContext = React.createContext()function App(){<GlobalContext.Provider value={{name: '张三',age: 20,changeAge: (value) => {setAge(value)}}}><Child /></GlobalContext.Provider>
}// 子组件内
function Child(){const text = useContext(GlobalContext)
}
  1. useReducer:实现Reduxreducer的功能,应用在组件通信中
const reducer = (prevState, action)=>{const newState = { ...prevState }switch(action.type){case 'add':newState.count ++return newStatecase 'minus':newState.count -- return newStatedefault:return prevState}
}
const initialState = {count: 0
}
// FC中const [state, dispatch] = useReducer(reducer, initialState)<button onClick={()=>{dispatch({type: 'minus'})}}>-</button>{state.count}<button onClick={()=>{dispatch({type: 'add'})}}>+</button>

8. 自定义hooks

当我们想在两个函数之间共享逻辑时,我们会把它提取到第三个函数中。
必须以use开头吗?必须如此。这个约定非常重要。不遵循的话,由于无法判断某个函数是否包含其内部Hook的调用,React将无法自动检查你的Hook是否违反了Hook的规则

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

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

相关文章

《隐私计算简易速速上手小册》第2章:关键技术介绍(2024 最新版)

文章目录 2.1 同态加密2.1.1 基础知识2.1.2 主要案例:云计算数据分析2.1.3 拓展案例 1:医疗数据分析2.1.4 拓展案例 2:金融风险评估2.2 安全多方计算(SMC)2.2.1 基础知识2.2.2 主要案例:跨机构金融数据共享2.2.3 拓展案例 1:医疗研究合作2.2.4 拓展案例 2:跨国界数据交…

【git 使用】git pull 和 git fetch 的区别

恕我直言&#xff0c;我一直都用 git pull 从来没有用过 git fetch git fetch, git pull 都可以用于获取远程仓库的内容&#xff0c;但它们有不同的作用和用法。 git fetch 用途&#xff1a;git fetch 用于从远程仓库获取最新的提交&#xff0c;但不会自动合并或更新本地分支…

C语言学习第三十天(排序)

1、冒泡排序 冒泡排序是我们学习的第一个排序&#xff0c;原理是相邻两个数比较大小&#xff0c;从而决定是否交换 void BubbleSort1(int* a, int n) {for (int j 0; j < n; j){int flag 0;for (int i 1; i < n - j; i){if (a[i - 1] > a[i]){Swap(&a[i - 1]…

Echarts —— 关系图+路径图+散点图(动态箭头)

文章目录 1 效果预览2 实现代码 1 效果预览 可将以下代码复制到Echarts示例在线预览效果 2 实现代码 const categories [{name: 数据中心,symbol:path://M936.33 732.203c-9.872-10.814-23.349-17.123-37.953-17.778-14.849-0.451-28.613 4.383-39.427 14.255-0.215 0.195-0.…

【初始RabbitMQ】发布订阅的实现

发布确认原理 生产者将信道设置成 confirm 模式&#xff0c;一旦信道进入 confirm 模式&#xff0c;所有在该信道上面发布的消息都将会被指派一个唯一的 ID(从 1 开始)&#xff0c;一旦消息被投递到所有匹配的队列之后&#xff0c;broker 就会发送一个确认给生产者(包含消息的…

Mysql 时间格式化 date_format

有没有遇到过类似这样的问题&#xff0c;将日期 ‘2023-02-23‘ 的格式转化为 202302的格式。 可能有些小伙伴&#xff0c;会直接想到字符串拼接 concat(year(2023-02-23),month(2023-02-23))得到的也是 202302。那要是要求必须是时间格式呢&#xff0c;可能有些小伙伴会说再将…

Linux之ACL权限chmod命令

一. chmod命令 chmod命令来自英文词组change mode的缩写&#xff0c;其功能是改变文件或目录权限的命令。默认只有文件的所有者和管理员可以设置文件权限&#xff0c;普通用户只能管理自己文件的权限属性。 设置权限时可以使用数字法&#xff0c;亦可使用字母表达式&#xff0…

GO-ICP的使用(一)

一、代码下载以、修改以及使用 下载&#xff1a; 链接&#xff1a;yangjiaolong/Go-ICP: Implementation of the Go-ICP algorithm for globally optimal 3D pointset registration (github.com) 解压之后 &#xff1a; 首先visual studio项目&#xff0c;配置好PCL环境&…

2024年这些半导体行业告诉我,投资迎来高光

在下行的周期内&#xff0c;砍单、裁员、破产注销等关键词贯穿了2023一年。 我们挥挥手&#xff0c;告别掉过去&#xff0c;怀着对未来的美好希望奔向2024年。未来虽然代表着未知&#xff0c;也有着各种不确定性&#xff0c;但在产业的发展的过程中&#xff0c;行业趋势我们是…

更简单地介绍 CUDA

这篇文章是对 CUDA 的超级简单介绍&#xff0c;CUDA 是 NVIDIA 流行的并行计算平台和编程模型。我之前在2013年写过一篇文章《CUDA简单介绍》&#xff0c;多年来一直很受欢迎。但 CUDA 编程变得更加容易&#xff0c;GPU 也变得更快&#xff0c;所以是时候进行更新&#xff08;甚…

【Vue实现参数传递:查询参数 vs. 动态路由】

文章目录 查询参数传递1. 什么是查询参数&#xff1f;2. 在Vue中使用查询参数步骤 1&#xff1a;在路由配置中定义查询参数步骤 2&#xff1a;在组件中使用查询参数步骤 3&#xff1a;在页面中生成链接 3. 查询参数传递的优势 动态路由传递1. 什么是动态路由&#xff1f;2. 在V…

SQL-Labs46关order by注入姿势

君衍. 四十六关 ORDER BY数字型注入1、源码分析2、rand()盲注3、if语句盲注4、时间盲注5、报错注入6、Limit注入7、盲注脚本 四十六关 ORDER BY数字型注入 请求方式注入类型拼接方式GET报错、布尔盲注、延时盲注ORDER BY $id 我们直接可以从界面中得知传参的参数为SORT&#x…

Linux内核处理并发与竞争的一种方法:信号量

一. 简介 本文来学习Linux内核处理并发与竞争的一种方法:信号量。 本文主要对Linux内核提供的信号量进行简单的介绍。 二. Linux内核处理并发与竞争的一种方法:信号量 1. 信号量简介 大家如果有学习过 FreeRTOS 或者 UCOS 的话就应该对信号量很熟悉,因为信号量是同步…

Yolo v9 “Silence”模块结构及作用!

论文链接&#xff1a;&#x1f47f; YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information 代码链接&#xff1a;&#x1f47f; https://github.com/WongKinYiu/yolov9/tree/main Silence代码 class Silence(nn.Module):def __init__(self):supe…

vue2和vue3对比(语法层面)

阅读文章你将收获&#xff1a; 1 了解不使用组件化工具时&#xff0c;vue在html是如何使用的 2 知道vue2的生命周期函数有哪些 3 知道如何在组件化开发中使用vue 4 大致了解了vue2和vue3在使用上什么不同 最后&#xff1a;vue2和vue3除了下面我列出的有差异化的地方&…

高防服务器的价格受到哪些因素的影响?

高防服务器可以帮助网站拒绝服务攻击&#xff0c;能够进行定时扫描网络节点&#xff0c;并且查找可能会存在的安全漏洞的服务器类型&#xff0c;对于经常遭受到DDOS攻击的大型游戏网络企业会选择高防服务器。 那面对价格多样的高防服务器我们应该怎样进行选择&#xff0c;高防服…

day41打卡

day41打卡 46. 携带研究材料&#xff08;第六期模拟笔试&#xff09; 状态表示 ​ 二维&#xff1a;dp[i] [j] 表示从下标为[0-i]的物品里任意取&#xff0c;放进容量为j的背包&#xff0c;价值总和最大是多少。 一维&#xff1a; ​ dp[j]表示&#xff1a;容量为j的背包&a…

模型 HBG(品牌增长)

系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_总纲目录。品牌增长法。 1 HBG(品牌增长)模型的应用 1.1 江小白使用HBG模型提高品牌知名度和销售额 选择受众市场&#xff1a;江小白的目标客户是年轻人&#xff0c;他们喜欢简单、时尚的产品。因此&#xff0c;江…

面试前端性能优化八股文十问十答第三期

面试前端性能优化八股文十问十答第三期 作者&#xff1a;程序员小白条&#xff0c;个人博客 相信看了本文后&#xff0c;对你的面试是有一定帮助的&#xff01;关注专栏后就能收到持续更新&#xff01; ⭐点赞⭐收藏⭐不迷路&#xff01;⭐ 1&#xff09;如何⽤webpack来优化…

数据结构D4作业

1.实现单向循环链表的功能 loop.c #include "loop.h" loop_p create_loop() { loop_p H(loop_p)malloc(sizeof(loop)); if(HNULL) { printf("创建失败\n"); return NULL; } H->len0; H->nextH; ret…