(一)需要
最近在学习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...
如果有须要的搭档,能够加我微信:learningisconnecting
或者能够关注我的公众号:国星聊成长(我会分享成长的办法)