0
点赞
收藏
分享

微信扫一扫

Nginx运维常用技术点总结

三维控件研究 2023-06-19 阅读 45

一、常见性能优化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 (
    <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
memouseMemouseCallback
作用函数式组件优化计算函数式组件值缓存回调函数
参数组件计算函数、依赖项数组回调函数、依赖项数组
返回值优化后的组件计算结果缓存后的回调函数
使用方式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)

举报

相关推荐

0 条评论