React
displayName 属性
displayName 是 React 组件上的一个特殊属性，用于在开发工具中显示组件的自定义名称。当你使用高阶组件、React.memo 或 React.forwardRef 等 API 包装组件时，原始组件名称会被隐藏，此时 displayName 就能帮助你快速定位和识别组件。
一、调试中的作用
displayName 仅在开发环境中生效，通过 React Developer Tools 浏览器插件可以看到组件树中的自定义名称。不设置时，包装后的组件会显示为 Anonymous 或不易识别的名字。
// 未设置 displayName，在开发工具中显示为 Anonymous
const HigherOrderComponent = React.memo((props) => {
return <div>{props.children}</div>
})
// 设置后，开发工具显示为 CustomDisplay
const HigherOrderComponent = React.memo((props) => {
return <div>{props.children}</div>
})
HigherOrderComponent.displayName = 'CustomDisplay'二、直接设置
为组件直接赋值 displayName，特别是在使用高级 API 时很有用。
class UserProfile extends React.Component {
render() {
return <div>Profile</div>
}
}
// 设置自定义显示名称
UserProfile.displayName = 'UserProfileComponent'函数组件
const Button = ({ label }: { label: string }) => {
return <button>{label}</button>
}
Button.displayName = 'PrimaryButton'三、高阶组件中的应用
在高阶组件中，通常需要动态设置 displayName，以保留原始组件的身份信息，让开发工具显示为 WithXxx(OriginalComponent) 的形式。
function withDataFetching(WrappedComponent) {
const WithDataFetching = (props) => {
const [data, setData] = React.useState(null)
// 模拟数据获取
React.useEffect(() => {
// eslint-disable-next-line react-hooks/set-state-in-effect
setData({ id: 1, name: 'Item' })
}, [])
return <WrappedComponent data={data} {...props} />
}
// 获取原始组件的名称
const displayName =
WrappedComponent.displayName || WrappedComponent.name || 'Component'
WithDataFetching.displayName = `WithDataFetching(${displayName})`
return WithDataFetching
}
function UserCard({ data }) {
return <div>{data?.name}</div>
}
export default withDataFetching(UserCard)在开发工具中会显示为 WithDataFetching(UserCard)，清晰地表现出组件的包装关系。
四、与其他 API 结合
React.memo
const MemoizedButton = React.memo(({ label }: { label: string }) => {
return <button>{label}</button>
})
MemoizedButton.displayName = 'MemoButton'React.forwardRef
const InputField = React.forwardRef<HTMLInputElement, { placeholder: string }>(
(props, ref) => {
return <input ref={ref} {...props} />
},
)
InputField.displayName = 'ForwardedInputField'记住这一条：
displayName纯粹是调试工具，仅在开发环境中被 React Developer Tools 读取，不影响生产代码。在使用高阶组件、memo 或 forwardRef 时务必设置，保持命名规范如WithXxx(ComponentName)能大幅提升开发调试效率。