useMemo:是为了性能的优化
1.useCallback会返回一个函数的memoized(记忆的)值
2.在依赖不变的情况下,多次定义的时候,返回的值是相同的
演示两个案例
一.复杂计算的应用
import React, { useState, useMemo } from 'react'
function allTotal(count){
console.log('重新计算')
let total = 0
for(let i = 0;i<=count;i++){
total +=i
}
return total
}
export default function MemoDemo() {
const [count,setCount] = useState(10)
const [show,setShow] = useState(true)
const total = allTotal(count)
return (
<div>
<h2>计算数字的和:{total}</h2>
<button onClick={e=>setCount(count + 1)}>+1</button>
<button onClick={e=>setShow(!show)}>切换</button>
</div>
)
}
当我改变show的值的时候,for循环跟它本身没有任何关系,但是因为整个组件的刷新,所以for也会执行一次,那么怎么不让它循环呢?
将 const total = allTotal(count)改成
const total = useMemo(()=>{
return allTotal(count)
},[count])
只有当count改变的时候,它才会重新执行
二.传入子组件引用类型
import React,{useState,memo, useMemo, useCallback} from 'react'
const HYInfo = memo((props) => {
console.log('重新渲染')
return <h2>名字:{props.info.name} 年龄:{props.info.age}</h2>
})
export default function MemoDemoTwo() {
const info = {name:'lsh',age:18}
const [show,setShow] = useState(true)
return (
<div>
<HYInfo info={info}></HYInfo>
<button onClick={e=>setShow(!show)}>切换</button>
</div>
)
}
点击肯定子组件也会重新渲染,包裹一个memo,但是包裹了还是会重新渲染, 为什么呢?因为我们定义的info是一个局部变量,每次重新渲染都是重新定义一个新的info,然后子组件进行浅层比较时候,info永远是不一样的,所以就会重新渲染
怎么解决呢?
将 const info = {name:‘lsh’,age:18}换成
const info = useMemo(()=>{
return {name:'lsh',age:18}
},[])
其实useMemo和useCallback差不多作用,区别在于
useCallback:是对传过来的回调函数优化,返回值只能是一个函数
useMemo:返回值可以是任何,函数,对象等都可以
也可以用useMemo实现useCallback
const increament = useCallback(()=>{
setCount(count + 1)
},[count])
//实现了上面的useCallback
const increament = useMemo(()=>{
return ()=>{
setCount(count +1)
}
},[count])