react中useMemo的使用场景和作用

一个简单的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>
};