毕竟大厂的面试,不得不说是真的难,一点八股都没问,上来就是一道题,要求给出优化的思路,详细讲讲,讲不出来基本就凉了,后面也就随便问问而已。 对于大厂感觉还是自己实力远远不够,有没有大佬知道这个怎么优化的?谢谢!
/**
* 一份 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的函数式组件,现有代码可以顺利运行得出正确结果,但架构上存在问题,请说明有哪些地方存在问题,并且可以进行哪些优化?
三点优化:
- image和imageSrc可以通过一个对象来储存映射信息,而不是通过判断
- imgSrc可以通过UseEffect把它储存到状态当中,而不是在组件上方直接写代码
- ImageJSX组件有一些过度封装,没有封装成组件的必要