当前位置:网站首页>Detailed explanation of usememo, memo, useref and other relevant hooks
Detailed explanation of usememo, memo, useref and other relevant hooks
2022-07-05 14:36:00 【Forgive me for not being free and easy enough】
useMemo
It is mainly used for data calculation , With cache, it will not double calculate ,
amount to vue Of computed
import React,{
useRef, useState, useEffect, useMemo, memo } from 'react'
export default function text() {
const [height, setHeight] = useState(66)
const memoizedCallback = useMemo(
() => {
return height + ' test Callback'
},
[height],
)
return (
<div>{
memoizedCallback}</div>
)
}
memo
memo: Prevent useless updates of subcomponents ( When the whole situation content It will be updated when changes occur ,memo The second parameter can prevent , But the official advice is to use less )
import React,{
useRef, useState, useEffect, useMemo, memo } from 'react'
const Son = function () {
return (
<div className='child-box'>
</div>
)
}
function areEqual(prevProps, nextProps) {
return prevProps === nextProps // You don't want it to update, just go back true
}
const HooksChild = memo(Son, areEqual) // The second parameter may not be passed
export default function text() {
const [height, setHeight] = useState(66)
const memoizedCallback = useMemo(
() => {
return height + ' test Callback'
},
[height],
)
return (
<div>
<HooksChild/>
</div>
)
}
useRef
Provide you with a closed space to store variables , Component re rendering has nothing to do with him , Unless you change it yourself
import {
useRef, useState } from 'react';
const useTimer = (step = 1) => {
const timer = useRef(null)
const [ num, setNum ] = useState(0)
const start = () => {
// const timeout = setInterval(() => {
// setNum((num)=>num + 1)
// }, step * 1000)
timer.current = null
}
const clear = () => {
setNum(0)
clearInterval(timer.current)
}
return {
num,
start,
clear
}
}
export default useTimer
Complete example Customize hooks Encapsulate timers that will not be created repeatedly
useContext,useReducer
useContext Global variables ,useReducer Use and useState The way to use it is similar
Complete example useContext+useReducer Realize global state sharing
边栏推荐
- LeetCode_ 69 (square root of x)
- Google eventbus usage details
- 实现一个博客系统----使用模板引擎技术
- PHP - fatal error: allowed memory size of 314572800 bytes exhausted
- 选择排序和冒泡排序
- R language ggplot2 visualization: gganimate package is based on Transition_ The time function creates dynamic scatter animation (GIF) and uses shadow_ Mark function adds static scatter diagram as anim
- 详解Vue适时清理keepalive缓存方案
- 【C 题集】of Ⅷ
- [detailed explanation of Huawei machine test] character statistics and rearrangement
- Disjoint Set
猜你喜欢
PyTorch二分类时BCELoss,CrossEntropyLoss,Sigmoid等的选择和使用
【leetcode周赛总结】LeetCode第 81 场双周赛(6.25)
一键更改多个文件名字
LeetCode_ 2 (add two numbers)
非技术部门,如何参与 DevOps?
浅谈Dataset和Dataloader在加载数据时如何调用到__getitem__()函数
Introduction, installation, introduction and detailed introduction to postman!
Intelligent supply chain collaboration system solution for daily chemical products industry: digital intelligent SCM supply chain, which is the "acceleration" of enterprise transformation
729. 我的日程安排表 I :「模拟」&「线段树(动态开点)」&「分块 + 位运算(分桶)」
How can non-technical departments participate in Devops?
随机推荐
01. Solr7.3.1 deployment and configuration of jetty under win10 platform
Sharing the 12 most commonly used regular expressions can solve most of your problems
矩阵链乘 - 动态规划实例
Differences between IPv6 and IPv4 three departments including the office of network information technology promote IPv6 scale deployment
LeetCode_ 69 (square root of x)
leetcode:881. lifeboat
Thymeleaf th:classappend attribute append th:styleappend style append th:data- custom attribute
Isn't it right to put money into the external market? How can we ensure safety?
在Pytorch中使用Tensorboard可视化训练过程
浅谈Dataset和Dataloader在加载数据时如何调用到__getitem__()函数
【C 题集】of Ⅷ
APR protocol and defense
PyTorch二分类时BCELoss,CrossEntropyLoss,Sigmoid等的选择和使用
CPU设计实战-第四章实践任务三用前递技术解决相关引发的冲突
Disjoint Set
安装配置Jenkins
[learning notes] stage test 1
网上电子元器件采购商城:打破采购环节信息不对称难题,赋能企业高效协同管理
FR练习题目---简单题
CYCA少儿形体礼仪 宁波市培训成果考核圆满落幕