关于javascript:Day-44100-React-Hook之useMemo基本用法

38次阅读

共计 1060 个字符，预计需要花费 3 分钟才能阅读完成。

最近在学习 React，学到了 React Hook 做了 useMemo Demo。

应用 useMemo 是为了进而保留变量初始的值，并且依赖其余变量的扭转后才更新的操作。

/*
 * @Author: ArdenZhao
 * @Date: 2022-04-20 11:18:24
 * @LastEditTime: 2022-04-20 11:36:50
 * @FilePath: /react-ts/src/components/react/12-Hook-useMemo.js
 * @Description: file information
 */
import {useState, useMemo} from 'react';
import {Button} from 'antd';
import "antd/dist/antd.css";


function HookUseMemo(props) {let [count, setCount] = useState(10);
  let [num, setNum] = useState(0);

  function changeCount() {setCount(count + 1);
  }

  function changeNum() {setNum(num + 1);
  }

  const memorized = useMemo(() => {return count;}, [num]);
  console.log('[ memorized] >', memorized) //12-Hook-useMemo.js:31 [memorized] > 10
  // memorized 中的 count 的值没有随着 count 变动而，更新，作用是保留了初始 count 的值
  // 当点击按钮时，num 的值会发生变化，memorized 的值也会发生变化，然而 count 的值不会发生变化
  return (
    <div>
      <h1>Learn, {props.name}</h1>
      <p>Count:{count}</p>
      <Button onClick={changeCount}>Count 加一 </Button>
      <p>Num:{num}</p>
      <Button onClick={changeNum}>Num 加一 </Button>
    </div>
  );
}
export default HookUseMemo

学习路上，经常会懈怠。

《有想学技术须要监督的同学嘛~》
https://mp.weixin.qq.com/s/Fy…