Question

我正在create-react-app应用中使用此组件：

import { ReactComponent as ProfileIcon } from "./icons/profile.svg";

...
render(){
  <ProfileIcon {...props}/>
}

也使用why-did-you-render（https://github.com/welldone-software/why-did-you-render）我收到了此警告：

SvgProfileIcon
whyDidYouRender.min.js:1191 {SvgProfileIcon: ƒ} "Re-rendered because the props object itself changed but it's values are all equal." "This could of been avoided by making the component pure, or by preventing it's father from re-rendering."
whyDidYouRender.min.js:1191 prev props: {svgRef: null, className: "icon", height: "24", width: "24"} !== {svgRef: null, className: "icon", height: "24", width: "24"} :next props

所以我这样创建了一个自定义PureComponent：

import React from "react";

export default WrappedComponent =>
  React.memo(props => <WrappedComponent {...props} />, () => true);

第一个问题：这正确吗？

我正在这样使用它：

import { ReactComponent as ProfileIcon } from "./icons/profile.svg";

import PureComponent from "./PureComponent";

const PureProfileIcon = PureComponent(ProfileIcon);

...
render(){
  <PureProfileIcon {...props}/>
}

第二个问题：我可以完全不同地使用React.memo（或其他方式）来避免该组件吗？

现在eslint抱怨：

Component definition is missing display name eslint(react/display-name)

第三个问题：我该如何解决？

使用SVG作为ReactComponent的create-react-app React性能，而带有React.memo的eslint缺少显示名称

0 个答案: