나는 이것의 다양한 구현과 함께 몇 가지 성능 문제를 겪고 있습니다 ...
기본적으로 아래 형식의 약 1500 개 개체의 데이터 집합이 있습니다.-
{
"Id": "411fc047-9d58-4faf-8da2-dfaf1fc3f3a3",
"ParentId": null,
"Name": "기본 위치",
"Children": [
{
"Id": "3cb93d59-613c-4797-8858 -bc3f31f6baa0 ",
"ParentId ":"411fc047-9d58-4faf-8da2-dfaf1fc3f3a3 ",
"Name ":"Site A ",
"Children ": [
{
"Id ":"a1fec942-b425-4307-905d-9e2a6f8730b3 " ,
"ParentId": "3cb93d59-613c-4797-8858-bc3f31f6baa0",
"Name": "Location A1",
"Children":[
{
"이름": "위치 A1 a",
"Id": "5538e976-db1c-49c2-8cab-70aafc1e4e70",
"ParentId": "a1fec942-b425-4307-905d-9e2a6f8730b3",
{
"Children": []
},
{
"Id": "6f5a536f-4b4f-4a10-b7ba-657d772d0588",
"ParentId": "a1fec942-b425-4307-905d-9e2a6f8730b3",
"Name": "Location A1 b" ,
"하위 항목": []
}
]
}
]
},
{
"Id": "319db987-994d-45d5-9023-8f21b8a589cb",
"ParentId": "411fc047-9d58-4faf-8da2-dfaf1fc3f3a3",
"이름": "사이트 B",
"하위":[
"Id": "f0c1f222-4118-4c07-b7be-30ff70fada03",
"ParentId": "319db987-994d-45d5-9023-8f21b8a589cb",
"Name": "Location B1",
"Children": [
{
"Id": "fe33043d-4cf2-498e-aa80-04848e109acb",
"ParentId" : "f0c1f222-4118-4c07-b7be-30ff70fada03",
"Name": "Location B1 b",
"Children": []
},
{
"Id": "d92ae7d5-bc44-4e94-be75-0cda5a254664",
"ParentId ":"f0c1f222-4118-4c07-b7be-30ff70fada03 ",
"이름 ":"
"Id ":"0a89ee4a-3b18-4772-baa3-fc0682d7053f ",
"하위 ": [
{
"ParentId": "d92ae7d5-bc44-4e94-be75-0cda5a254664",
"이름": "위치 B1 b 특수 사이트 ...",
"하위 항목": []
}
]
}
]
}
]
}
]
}
]
아이들이 각 물체에 계속 존재할 수 있기 때문에 그것은 알려지지 않은 깊이를 가지고 있습니다.
첫째, Id (GUID)가 주어진 개체 중 하나를 찾기 위해 이것을 검색하는 가장 빠른 방법이 무엇인지 알고 싶습니다. 나는 모든 종류를 시도했고, 그것을 평평하게 만들고 ES6 .find () (단일 결과에 대한 필터 대신 ...)를 사용하여 실험했으며 본질적으로 맨 위에서 시작하여 작동하는 사용자 지정 반복기를 작성했습니다. 일치가 발견 될 때까지 아이들을 통해…이 해결책은 작동한다, 나는 다만 내가 놓친 트릭이 있는지 궁금하다 ..?
둘째, 이제 이것은 아마도 약간의 고유 한 사용 사례이지만 본질적으로 JS에서 사용자 정의 된 React Treeview를이 데이터로 채우고 트 리뷰에서 각 항목에는 확인란이 있습니다 ... 사용자가 상자를 선택하면 I 선택된 항목과 선택되지 않은 항목을 추적하기 위해 '선택된'배열에 개체 ID 속성을 추가합니다.
이것이 복잡해지면 그 위에있는 모든 상위 항목을 선택하고 싶지는 않지만 대신 해당 ID를 알고 있어야 '부분적으로 선택된'배열에 저장하여 Treeview에 설명 할 수 있습니다. t가 선택되었지만 어딘가에 하위 항목이 있습니다 ... (선택됨 또는 '부분적으로 선택됨'확인란인지 여부에 따라 확인란의 스타일을 조건부로 변경합니다 ...
사용자가 트리 중간에 3 개 또는 4 개의 체크 박스 만 선택하면 모든 하위 항목도 확인할 수 있으므로 속도 저하가 발생하는 핵심 영역입니다.이 '부분적으로 선택된'ID는 각 ' 트리에서 완전히 체크 된 항목 ...
말이 되나? :-에스
기본적으로 이런 일을 할 때 사람들이 일반적으로 사용하는 초고속 방법이 있는지, 아니면 그 성격이 느린 지 궁금합니다. 그 이유는 각 경로를 개별적으로 확인하기 만하면되기 때문입니다 ..?
감사!
해시 맵을 작성하고 원하는 객체에 빠르게 액세스 할 수 있습니다.
const
buildHashMap = (r, o) => {
r[o.Id] = o;
return o.Children
? o.Children.reduce(buildHashMap, r)
: r;
},
data = [{ Id: "411fc047-9d58-4faf-8da2-dfaf1fc3f3a3", ParentId: null, Name: "Main Location", Children: [{ Id: "3cb93d59-613c-4797-8858-bc3f31f6baa0", ParentId: "411fc047-9d58-4faf-8da2-dfaf1fc3f3a3", Name: "Site A", Children: [{ Id: "a1fec942-b425-4307-905d-9e2a6f8730b3", ParentId: "3cb93d59-613c-4797-8858-bc3f31f6baa0", Name: "Location A1", Children: [{ Id: "5538e976-db1c-49c2-8cab-70aafc1e4e70", ParentId: "a1fec942-b425-4307-905d-9e2a6f8730b3", Name: "Location A1 a", Children: [] }, { Id: "6f5a536f-4b4f-4a10-b7ba-657d772d0588", ParentId: "a1fec942-b425-4307-905d-9e2a6f8730b3", Name: "Location A1 b", Children: [] }] }] }, { Id: "319db987-994d-45d5-9023-8f21b8a589cb", ParentId: "411fc047-9d58-4faf-8da2-dfaf1fc3f3a3", Name: "Site B", Children: [{ Id: "f0c1f222-4118-4c07-b7be-30ff70fada03", ParentId: "319db987-994d-45d5-9023-8f21b8a589cb", Name: "Location B1", Children: [{ Id: "fe33043d-4cf2-498e-aa80-04848e109acb", ParentId: "f0c1f222-4118-4c07-b7be-30ff70fada03", Name: "Location B1 b", Children: [] }, { Id: "d92ae7d5-bc44-4e94-be75-0cda5a254664", ParentId: "f0c1f222-4118-4c07-b7be-30ff70fada03", Name: "Location B1 b", Children: [{ Id: "0a89ee4a-3b18-4772-baa3-fc0682d7053f", ParentId: "d92ae7d5-bc44-4e94-be75-0cda5a254664", Name: "Location B1 b Special Site...", Children: [] }] }] }] }] }],
hashmap = data.reduce(buildHashMap, {});
console.log(hashmap);이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다