2022.08.31 特赞面试

毕竟大厂的面试，不得不说是真的难，一点八股都没问，上来就是一道题，要求给出优化的思路，详细讲讲，讲不出来基本就凉了，后面也就随便问问而已。 对于大厂感觉还是自己实力远远不够，有没有大佬知道这个怎么优化的？谢谢！

/**
 * 一份 Empty 组件代码，用作空内容展示，当前实现比较粗糙，请加以重构优化，使其更符合 react 最佳实践，并提升代码可读性、可维护性等指标。
 */

import React, { CSSProperties } from 'react';

const emptyWrapperClass = 'empty-wrapper';
const imageClass = 'empty-image';
const footerClass = 'empty-footer';

const URL = '/img/';

const Error = `${URL}Error.png`;
const NoPermission = `${URL}NoPermission.png`;
const PageNotFound = `${URL}PageNotFound.png`;
const NoContent = `${URL}NoContent.png`;

export type preDefinedImageType = 'NoPermission' | 'PageNotFound' | 'NoContent' | 'Error'

export interface EmptyProps {
  image: preDefinedImageType | React.ReactNode;
  className?: string;
  style?: CSSProperties;
  children?: React.ReactNode;
  imageStyle?: CSSProperties;
}

export const Empty = (props: EmptyProps) => {

  const { image, className, children, style } = props;

  let imgSrc = '';
  const isPredefinedImage = typeof image === 'string';
  if (isPredefinedImage) {
    if (image === 'NoPermission') {imgSrc = NoPermission};
    else if (image === 'PageNotFound') {imgSrc = PageNotFound};
    else if (image === 'NoContent') {imgSrc = NoContent};
    else if (image === 'Error') {imgSrc = Error};
  }

  const ImageJSX = ({ src }: { src: string }) => {
    return (
    <img
       className={imageClass}
       style={props.imageStyle}
       src={src}
       width={112}
       height={80}
       alt=""
     />
    );
  };

  const Image = isPredefinedImage ? <ImageJSX src={ imgSrc }/> : image;

  const wrapperClass = [className, emptyWrapperClass].filter(Boolean).join(' ');

  return (
   <div
     className={wrapperClass}
     style={style}
   >
     {Image}
     <div className={footerClass}>{children}</div>
   </div>
);
};

这是一个react的函数式组件，现有代码可以顺利运行得出正确结果，但架构上存在问题，请说明有哪些地方存在问题，并且可以进行哪些优化？

我个人当时不太清楚这块没想出来，猜想可以用上hooks？