当前位置:网站首页>useMemo,memo,useRef等相关hooks详解
useMemo,memo,useRef等相关hooks详解
2022-07-05 14:32:00 【原谅我不够洒脱】
useMemo
主要是用来做数据计算,并带有缓存不会重复计算,
相当于vue的computed
import React,{
useRef, useState, useEffect, useMemo, memo } from 'react'
export default function text() {
const [height, setHeight] = useState(66)
const memoizedCallback = useMemo(
() => {
return height + '测试Callback'
},
[height],
)
return (
<div>{
memoizedCallback}</div>
)
}
memo
memo:防止子组件无用更新(当全局content发生变化时还是会更新,memo第二个参数可以阻止,但是官方建议少用)
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 // 你不想它更新就返回true
}
const HooksChild = memo(Son, areEqual) // 第二个参数可以不传
export default function text() {
const [height, setHeight] = useState(66)
const memoizedCallback = useMemo(
() => {
return height + '测试Callback'
},
[height],
)
return (
<div>
<HooksChild/>
</div>
)
}
useRef
给你提供一个封闭的空间来储存变量,组件重新渲染和他无关,除非你自己去改
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
useContext,useReducer
useContext 全局变量,useReducer使用和useState使用方法差不多
边栏推荐
- dynamic programming
- Strong connection component
- Time to calculate cron expression based on cronsequencegenerator
- R language dplyr package select function, group_ By function, mutate function and cumsum function calculate the cumulative value of the specified numerical variable in the dataframe grouping data and
- Sharing the 12 most commonly used regular expressions can solve most of your problems
- CPU设计实战-第四章实践任务三用前递技术解决相关引发的冲突
- Niuke: intercepting missiles
- Total amount analysis accounting method and potential method - allocation analysis
- Thymeleaf th:with use of local variables
- Redis如何实现多可用区?
猜你喜欢
选择排序和冒泡排序
Topology visual drawing engine
周大福践行「百周年承诺」,真诚服务推动绿色环保
【NVMe2.0b 14-9】NVMe SR-IOV
Principle and performance analysis of lepton lossless compression
openGauss数据库源码解析系列文章—— 密态等值查询技术详解(下)
安装配置Jenkins
How to choose the appropriate certificate brand when applying for code signing certificate?
How can non-technical departments participate in Devops?
Introduction, installation, introduction and detailed introduction to postman!
随机推荐
CPU设计实战-第四章实践任务二用阻塞技术解决相关引发的冲突
MySQL user-defined function ID number to age (supports 15 / 18 digit ID card)
Countermeasures of enterprise supply chain management system in UCA Era
Don't be unconvinced. Mobile phone function upgrade is strong
Share 20 strange JS expressions and see how many correct answers you can get
乌卡时代下,企业供应链管理体系的应对策略
世界环境日 | 周大福用心服务推动减碳环保
R language ggplot2 visualization: use ggplot2 to visualize the scatter diagram, and use the labs parameter to customize the X axis label text (customize X axis labels)
启牛证券账户怎么开通,开户安全吗?
安装配置Jenkins
Qingda KeYue rushes to the science and Innovation Board: the annual revenue is 200million, and it is proposed to raise 750million
FR练习题目---综合题
What about SSL certificate errors? Solutions to common SSL certificate errors in browsers
[learning notes] stage test 1
直播预告|如何借助自动化工具落地DevOps(文末福利)
Thymeleaf 常用函数
leetcode:881. 救生艇
R语言ggplot2可视化条形图:通过双色渐变配色颜色主题可视化条形图、为每个条形添加标签文本(geom_text函数)
Intelligent supply chain collaboration system solution for daily chemical products industry: digital intelligent SCM supply chain, which is the "acceleration" of enterprise transformation
动态规划