一个简单的demo
import React, { useState,useMemo } from "react";
import { Button } from "antd";
const demoState = function demoState() {
let [weiNum, setWeiNum] = useState(2);
let [haoNum, setHaoNum] = useState(5);
let [Y, setY] = useState(0);
let total = weiNum + haoNum;
let ratio = "";
if (total > 0) {
ratio = ((weiNum / total) * 50).toFixed(3) + "%";
}
return <div className="sup">
<div className="main">
<p>你好:{weiNum}</p>
<p>我不好:{haoNum}</p>
<p>hello:{Y}</p>
</div>
<div className="footer">
<Button type= ‘primary’ onClick = {()=>setWeiNum(weiNum+1)}>你好</Button>
<Button type= ‘primary’ onClick = {()=>setHaoNum(haoNum+2)}>我不好</Button>
<Button type= ‘primary’ onClick = {()=>setY(Y+5)}>hello</Button>
</div>
</div>
};
函数组件的每一次更新,都是把函数demoState 重新执行一次
产生一个新的闭包,内部的代码也要重新执行一遍
如果我们修改的是weiNum/haoNum。视图更新的时候。我们可以让此逻辑重新计算
但是如果我们是修改其他的状态值,视图更新了,此逻辑demoState 没必要在重新执行一次
所以我们可以把上面的代码用useMemo 来修改
useMemo(和vue 中的计算属性computed类似)
let XXX = useMemo(callback, [dependencies])
callback:回调函数
dependencies:监听的依赖
第一次渲染组件的时候,callback会执行
后期只会依赖的状态值发生改变,callback才会再执行
每一次会把callback执行的返回结果赋值给XXX
useMemo具备暖存的效果,在依赖的状态值没有发生改变,callback没有触发执行的时候
XXX获取的是上次计算出来的结果 和vue 中的计算属性很类似
useMemo就是一个优化的hook函数
如果函数组件中。有消耗性能/时间的计算操作,竟可能用useMemo暖存起来,谁知对应的依赖
这样可以保证。当非依赖的状态发生改变,不会去处理一些没必要的操作,提高组件更新的速度
// 诉求, 在函数每一次重新执行的是时候,如果y状态值没有发生变化,
// 我们此操作逻辑不应该去执行,只有依赖值发生改变,才执行
import React, { useState,useMemo } from "react";
import { Button } from "antd";
const demoState = function demoState() {
let [weiNum, setWeiNum] = useState(2);
let [haoNum, setHaoNum] = useState(5);
let [Y, setY] = useState(0);
let ratio = useMemo(()=>{
let total = weiNum + haoNum;
let ratio = "";
if (total > 0) ratio = ((weiNum / total) * 50).toFixed(3) + "%";
},[weiNum,haoNum]) // weiNum, haoNum依赖项发生变化时在执行useMemo
return <div className="sup">
<div className="main">
<p>你好:{weiNum}</p>
<p>我不好:{haoNum}</p>
<p>hello:{Y}</p>
</div>
<div className="footer">
<Button type= ‘primary’ onClick = {()=>setWeiNum(weiNum+1)}>你好</Button>
<Button type= ‘primary’ onClick = {()=>setHaoNum(haoNum+2)}>我不好</Button>
<Button type= ‘primary’ onClick = {()=>setY(Y+5)}>hello</Button>
</div>
</div>
};