// 问个问题,一般在 Vue 或者 React中
// 在框架具备很多组件通讯技术或者js语法支持的情况下,什么情况下会用 Es6 的 Class类?
在Vue或React中,通常会在以下情况下使用ES6的
Class
类:
复杂组件或模块: 当需要构建较为复杂的组件或模块时,使用
Class
类可以更好地组织和管理代码,提高代码的可读性和可维护性生命周期管理: Vue和React都提供了一系列的生命周期函数,通过使用
Class
类来定义组件或模块,可以更好地管理和调用这些生命周期函数类成员方法与属性:
Class
类允许在类中定义成员方法和属性,这样可以更好地封装和组织代码,使其更具结构性,并且易于维护和扩展静态方法与属性: 通过使用
Class
类,还可以定义静态方法和属性,这些方法和属性属于类本身,而不是类的实例。静态方法可以作为公共工具方法,提供共享的功能面向对象编程(OOP):
Class
类是面向对象编程的重要概念之一,使用Class
类可以更好地应用面向对象编程的原则和特性,例如封装、继承和多态性综上所述,尽管Vue和React提供了很多的组件通讯技术和强大的JS语法支持,但在需要处理复杂组件或模块、继承与重写、生命周期管理、类成员的定义与组织、静态功能的实现以及面向对象编程的场景下,使用ES6的
Class
类是一个常见的选择
// 简单的树形结构工具类
export const filter = class Filter {
private data: Array<any>;
constructor(data: Array<any>) {
this.data = data;
}
public buildTree(): any[] {
const tree: any[] = [];
this.data.forEach((item) => {
if (!item.parentId) {
tree.push(this.createNode(item, this.data));
}
});
return tree;
}
private createNode(node: any, data: any[]): any {
const children: any[] = [];
data.forEach((item) => {
if (item.parentId === node.id) {
children.push(this.createNode(item, data));
}
});
if (children.length > 0) {
node.children = children;
}
return node;
}
public processData(): any[] {
const processedData = this.data.map((item) => {
return {
id: item.id,
name: item.name.toUpperCase(),
parentId: item.parentId,
};
});
return processedData;
}
}
----------------------------------------------
const data = [
{ id: 1, name: 'Root', parentId: null },
{ id: 2, name: 'Node 1', parentId: 1 },
{ id: 3, name: 'Node 2', parentId: 1 },
{ id: 4, name: 'Node 1.1', parentId: 2 },
{ id: 5, name: 'Node 1.2', parentId: 2 },
{ id: 6, name: 'Leaf', parentId: 4 },
];
const tree = new InitTree(data);
const builtTree = tree.buildTree();
const processedData = tree.processData();
console.log(builtTree);
console.log(processedData);
[
{
"id": 1,
"name": "Root",
"parentId": null,
"children": [
{
"id": 2,
"name": "Node 1",
"parentId": 1,
"children": [
{
"id": 4,
"name": "Node 1.1",
"parentId": 2,
"children": [
{
"id": 6,
"name": "Leaf",
"parentId": 4
}
]
},
{
"id": 5,
"name": "Node 1.2",
"parentId": 2
}
]
},
{
"id": 3,
"name": "Node 2",
"parentId": 1
}
]
}
]
原文地址:https://blog.csdn.net/Dongfang_project/article/details/134597149
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_14513.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。