《不要将DTO传递给UI组件》

原文链接：Do not pass DTOs to UI components | Dario’s Blog

不要将后端 DTO 对象直接传递给 UI 组件，意思就是，如果后端DTO数据对象是这样子的:

type IUser = {
	uuid: string;
	username: string;
	age: number;
	loveList: Array<{
		postId: string;
		postUrl: string;
	}>
	config: {
		app: {
			theme: string;
		};
		web: {
			theme: string;
		}
	}
}

不要直接将 DTO 作为 props 传递给 UI 组件:

export interface IUserCard {
	userInfo: IUser;
}
 
export function UserCard() {
	return ...
}
 
<UserCard userInfo={userInfo}/>

NOTE

• 这样会使得 UI 组件与来自后端的数据传输结构紧密耦合。当后端数据模型发生变化时，这可能会使组件接口难以改进或重构。并且他们可能会在开发的早起阶段发生重大变化。
• 在组件中直接使用 DTO 还会违反最小特性去原则，因为它会像组件提供超出其所需的数据。
• 直接在组件中使用 DTO 会模糊数据访问和UI渲染之间的界限

数据访问层

应该引入一个数据访问层，作为UI 和后端服务之间的抽象边界。可以将数据访问层视为一个映射层，它将后端 DTO 转换为专门满足一个那用程序 UI需求而创建的简化对象模型。这意味着扁平化嵌套对象、挑选属性子集、派生计算字段或任何其他必要的数据转换。

通过数据访问层实例

{  
	id: "abc123",  
	authorId: 42,  
	title: "New Blog Post",  
	content: "This is my new blog post...",  
	metadata: {  
		createdAt: "2022-01-15T08:25:00Z",  
		updatedAt: "2022-01-15T08:25:00Z",  
		tags: ["react", "javascript"]  
	}  
}

转换完之后的结构

{  
	id: "abc123",  
	author: "Jane Doe",  
	title: "New Blog Post",  
	content: "This is my new blog post...",  
	formattedDate: "January 15, 2022",  
	tags: ["react", "javascript"]  
}

遵守抽象边界

遵循 最小特权原则 - 只像组件提供它们所需要的精确数据。