如何在使用react挂钩的组件中避免额外的呈现

import React from 'react';

const MyComponent = React.memo((props) => {
  // 组件的渲染逻辑
});

export default MyComponent;

import React, { useCallback } from 'react';

const MyComponent = (props) => {
  const handleClick = useCallback(() => {
    // 处理点击事件的逻辑
  }, [/* 依赖项 */]);

  return (
    <button onClick={handleClick}>Click me</button>
  );
};

export default MyComponent;

import React, { useMemo } from 'react';

const MyComponent = (props) => {
  const expensiveResult = useMemo(() => {
    // 计算昂贵的结果的逻辑
    return /* 结果 */;
  }, [/* 依赖项 */]);

  return (
    <div>{expensiveResult}</div>
  );
};

export default MyComponent;