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使用方法差不多