React性能优化API

一、常见性能优化API

1. shouldComponentUpdate：通过重写该函数实现组件的条件渲染，即只有在组件的 props 或 state 发生变化时才重新渲染组件。

2. PureComponent：React 自带的一个纯组件，其 shouldComponentUpdate 函数已经被自动实现，只有在 props 或 state 发生变化时才会重新渲染组件。

3. memo：类似于 PureComponent，但是用于函数式组件，可以使其只在 props 发生变化时重新渲染。

4. React.memo：类似于 memo，但是用于包裹组件，可以使其只在 props 发生变化时重新渲染。

5. 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 (
    

      
The count is: {count}
      
The doubled count is: {doubledCount}
      Click me
    
  );
}

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)