一、常见性能优化API
-
shouldComponentUpdate：通过重写该函数实现组件的条件渲染，即只有在组件的 props 或 state 发生变化时才重新渲染组件。
-
PureComponent：React 自带的一个纯组件，其 shouldComponentUpdate 函数已经被自动实现，只有在 props 或 state 发生变化时才会重新渲染组件。
-
memo：类似于 PureComponent，但是用于函数式组件，可以使其只在 props 发生变化时重新渲染。
-
React.memo：类似于 memo，但是用于包裹组件，可以使其只在 props 发生变化时重新渲染。
-
useCallback 和 useMemo：两个 hooks 函数，用于缓存函数和计算结果，避免重复计算或渲染。
二、使用案例
- shouldComponentUpdate
通过对比当前组件的state、props与下次渲染的做比较，确认是否re-render
class MyComponent extends Component {
shouldComponentUpdate(nextProps, nextState) {
return nextState.count !== this.state.count;// true 更新、false 不更新
}
}
- PureComponent
在组件内部自行实现了shouldComponentUpdate方法，但要注意仅会做浅层比较，复杂的state、props需要自己进行对比
import React, { PureComponent } from 'react';
class MyComponent extends PureComponent {
}
- React.memo(memo)
在高版本或hooks中的纯组件的优化方案，可以理解是PureComponent的高版本实现，仅对比prop
import React from 'react';
function MyComponent(props) {
}
export default React.memo(MyComponent);
- useCallback、useMemo
缓存计算结果、与回调函数，避免重复计算与定义
useMemo类似Vue中的watch
useCallback等于useMemo对方法的返回
import React, { useState, useCallback, useMemo } from 'react';
function MyComponent(props) {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
setCount(count + 1);
}, [count]);
const doubledCount = useMemo(() => {
console.log('doubledCount called');
return count * 2;
}, [count]);
console.log('render called');
return (
<div>
<p>The count is: {count}</p>
<p>The doubled count is: {doubledCount}</p>
<button onClick={handleClick}>Click me</button>
</div>
);
}
export default MyComponent;
三、差异对比
- class组件、函数组件
- memo、useMemo、useCallBack
| memo | useMemo | useCallback | |
|---|---|---|---|
| 作用 | 函数式组件优化 | 计算函数式组件值 | 缓存回调函数 |
| 参数 | 组件 | 计算函数、依赖项数组 | 回调函数、依赖项数组 |
| 返回值 | 优化后的组件 | 计算结果 | 缓存后的回调函数 |
| 使用方式 | export default memo(MyComponent) | const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]) | const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]) |
Tips:useMemo(()=> fn) 等价于 useCallback(fn)
