一、useCallback(记忆函数)
防止因为组件重新渲染,导致方法被重新创建,起到缓存作用,只有第二个参数变化了,才重新声明一次。
新建 UseCallback.js
方法组件,写入代码:
import React, { useCallback, useState } from 'react'
export default function UseCallback() {
const [count, setCount] = useState(0)
const addHandle = useCallback(
() => {
setCount(count+1)
},
[count]
)
return (
<div>
<button onClick={addHandle}>click</button>
{count}
</div>
)
}
效果:
可以看到我们使用了useCallback
将函数给记忆起来了,为了使其他状态改变而不重新创建不该创建的函数,只有当依赖项count
发生改变时才会重新创建。从一定意义上来说提高了性能。
二、useMemo(记忆组件)
useCallback的功能完全可以由
useMemo
所取代,如果你想通过使用useMemo
返回一个记忆函数也是完全可以的。
我们将之前案例选项卡的子组件Cinema.js
类组件改成函数组件,并且使用useMemo
:
import React, { useEffect, useMemo, useState } from 'react'
import axios from 'axios'
export default function UseCallback() {
const [cinemaList, setCinemaList] = useState([])
const [text, setText] = useState('')
useEffect(() => {
axios({
url: 'https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=3085018',
method: 'get',
headers: {
'X-Client-Info':' {"a":"3000","ch":"1002","v":"5.2.0","e":"1646314068530784943341569"}',
'X-Host': 'mall.film-ticket.cinema.list'
}
}).then((res) => {
console.log(res.data)
setCinemaList(res.data.data.cinemas)
}).catch((err) => {
console.log(err)
})
},[])
const getCinemaList = useMemo(() => cinemaList.filter(item => item.name.toUpperCase().includes(text.toUpperCase()) ||
item.address.toUpperCase().includes(text.toUpperCase())), [cinemaList, text]) // useMemo会执行函数并返回执行后的结果
return (
<div>
<input value={text} onChange={(event) => {
setText(event.target.value)
}}></input>
{
getCinemaList.map((item) =>
<dl key={item.cinemaId}>
<dt>{item.name}</dt>
<dd>{item.address}</dd>
</dl>
)
}
</div>
)
}
效果:
可以看到我们使用了函数式组件的hooks
成功将之前类组件给重构出来了,并且也是相当的方便。
三、useRef(保存引用值)
新建useRef.js
组件,写入代码:
import React, { useRef, useState } from 'react'
export default function UseRef() {
// let [name, setName] = useState('')
const name = useRef()
let [list, setList] = useState(['000', '111', '222'])
let btnHandle = () => {
let newList = [...list]
setList([...newList, name.current.value])
name.current.value = ''
}
let delHandle = (key) => {
let temList = [...list]
temList.splice(key, 1)
setList(temList)
}
return (
<div>
<input ref={name}></input>
<button onClick={btnHandle}>click</button>
<ul>
{list.map((value, key) => {
return <li key={key}>{value} <button onClick={(key) => delHandle(key)}>删除</button></li>
})}
</ul>
</div>
)
}
效果:
不仅如此,useRef
还能在函数组件中保持状态:
import React, { useState, useRef } from 'react'
export default function UseRef() {
const [count, setCount] = useState(0)
let myCount = useRef(0)
const addHandle = () => {
setCount(count + 1)
myCount.current++
}
return (
<div>
<button onClick={addHandle}>click</button>
{count} - {myCount.current}
</div>
)
}
在学习React的路上,如果你觉得本文对你有所帮助的话,那就请关注点赞评论三连吧,谢谢,你的肯定是我写博的另一个支持。