文章目录
useMemo和useCallback——用于优化性能的Hook函数
useMemo缓存数据——类似vue的计算属性
在前端开发的过程中,我们需要缓存一些内容,以避免在需渲染过程中因大量不必要的耗时计算而导致的性能问题。为此 React 提供了一些方法可以帮助我们去实现数据的缓存,useMemo 就是其中之一,只能应用在函数组件中,在某些情况下能大大提高函数的运行效率
如果函数组件中有消耗性能和时间的计算操作,则尽可能用useMemo缓存起来,设置对应的依赖,这样可以保证,当非以来的状态发生改变时,不会去处理一些没有必要的操作,从而提高组件更新和渲染的速度
let xxx = useMemo(callback,[dependencies])
+ 第一次渲染组件的时候,callback会执行
+ 后期只有依赖的状态值发生改变,callback才会再执行
+ 每一次会把callback执行的返回结果赋值给xxx
+ useMemo具备“计算缓存”,在依赖的状态值没有发生改变,callback没有触发执行的时候,xxx获取的是上一次计算出来的结果
和Vue中的计算属性非常的类似!!
import React, { useState, useMemo } from "react";
import { Button } from 'antd';
import './Demo.less';
const Demo = function Demo() {
let [supNum, setSupNum] = useState(10),
[oppNum, setOppNum] = useState(5),
[x, setX] = useState(0);
let ratio = useMemo(() => {
let total = supNum + oppNum,
ratio = '--';
if (total > 0) ratio = (supNum / total * 100).toFixed(2) + '%';
return ratio;
}, [supNum, oppNum]);
return <div className="vote-box">
<div className="main">
<p>支持人数:{supNum}人</p>
<p>反对人数:{oppNum}人</p>
<p>支持比率:{ratio}</p>
<p>x:{x}</p>
</div>
<div className="footer">
<Button type="primary" onClick={() => setSupNum(supNum + 1)}>支持</Button>
<Button type="primary" danger onClick={() => setOppNum(oppNum + 1)}>反对</Button>
<Button onClick={() => setX(x + 1)}>干点别的事</Button>
</div>
</div>;
};
export default Demo;
import React, { useState, useMemo } from "react";
export default function Demo() {
let [x, setX] = useState(10),
[y, setY] = useState(20);
/* const computed = () => {
// 大量的计算...
return x;
}; */
const cacheVal = useMemo(() => {
// 大量的计算...
return x;
}, [x]);
return <div>
{/* <span>{computed()}</span> */}
<span>{cacheVal}</span>
<button onClick={() => setX(x + 1)}>处理</button>
<br />
<span>y</span>
<button onClick={() => setY(y + 1)}>处理</button>
</div>;
};
useCallback缓存函数引用
useCallback 用于得到一个固定引用值的函数,通常用它进行性能优化!
const xxx = useCallback(callback,[dependencies])
+ 组件第一次渲染,useCallback执行,创建一个函数“callback”,赋值给xxx
+ 组件后续每一次更新,判断依赖的状态值是否改变。如果改变,则重新创建新的函数堆,赋值给xxx;但是如果,依赖的状态没有更新「或者没有设置依赖“[]”」则xxx获取的一直是第一次创建的函数堆,不会创建新的函数出来
+ 或者说,基于useCallback,可以始终获取第一次创建函数的堆内存地址(或者说函数的引用)
推荐useMemo,useCallback不要乱用
因为并不是所有组件内部的函数都拿起包起来处理回归
虽然减少了堆内存的开辟,但是useCallback本身也有自己的处理逻辑和缓存的机制,这个也消耗时间
而useMemo对性能的提升很明显
所以useMemo能用则用,useCallback能不用则不用,就算用了也不一定有好的效果
useCallback的使用场景
父组件嵌套子组件父组件要把一个内部的函数,基于属性传递给子组件,此时传递的这个方法,基于useCallback处理会更好
诉求:当父组件更新的时候,因为传递给子组件的属性仅仅是一个函数「特点:基本应该算是不变的」,所以不想再让子组件也跟着更新了!
- 传递给子组件的属性(函数),每一次需要是相同的堆内存地址(是一致的) . 基于useCallback处理
- 在子组件内部也要做一个处理,验证父组件传递的属性是否发生改变,如果没有变化,则让子组件不能更新,有变化才需要更新。类组件:继承React.PureComponent即可「在shouldComponentUpdate中对新老属性做了浅比较」函数组件:基于 React.memo 函数,对新老传递的属性做比较,如果不一致,才会把函数组件执行,如果一致,则不让子组件更新
// 父组件
const Demo = function Demo() {
let [x, setX] = useState(0);
// const handle = () => { }; //第一次:0x001 第二次:0x101 第三次:0x201 ...
const handle = useCallback(() => { }, []); //第一次:0x001 第二次:0x001 第三次:0x001 ... 严重浪费性能,每次渲染都要在新的闭包中开辟新的内存地址存放同一个函数
return <div className="vote-box">
<Child handle={handle} />
<div className="main">
<p>{x}</p>
</div>
<div className="footer">
<Button type="primary" onClick={() => setX(x + 1)}>累加</Button>
</div>
</div>;
};
/* 子组件——类组件,通过PureComponent或Component里面的shouldComponentUpdate浅比较 */
class Child extends React.PureComponent {
render() {
console.log('Child Render');
return <div>
我是子组件
</div>;
}
}
/* 子组件——函数组件,通过memo执行浅比较 */
const Child = React.memo(function Child(props) {
console.log('Child Render');
return <div>
我是子组件
</div>;
});
import React, { useState, useCallback, memo } from "react";
class Child1 extends React.PureComponent {
render() {
console.log('child1 render');
return <div>
<button onClick={this.props.handler}>处理1</button>
</div>;
}
}
/* class Child2 extends React.PureComponent {
render() {
console.log('child2 render');
return <div>
<button onClick={this.props.handler}>处理2</button>
</div>;
}
} */
// 如果子组件是函数组件,则需要useCallback和memo配合使用「函数组件的属性浅比较是在memo中处理的,类组件是在shouldComponentUpdate中」
const Child2 = memo(function Child2({ handler }) {
console.log('child2 render');
return <div>
<button onClick={handler}>处理2</button>
</div>;
});
export default function Demo() {
let [val, setVal] = useState('');
const handler1 = () => {
setVal('哈哈哈');
};
const handler2 = useCallback(() => {
setVal('呵呵呵');
}, []);
return <div>
<input type="text" value={val}
onChange={ev => {
setVal(ev.target.value);
}} />
<Child1 handler={handler1} />
<Child2 handler={handler2} />
</div>;
};