Мне нужна помощь в ускорении фильтрации массива / ListView в React-Native (открыт для других подходов) - PullRequest
Новая
       5

Мне нужна помощь в ускорении фильтрации массива / ListView в React-Native (открыт для других подходов)

1 голос
/ 20 июня 2020

У меня есть структура (я контролирую формат; каждый узел имеет "name": "" и "checked": true) 

[{
    "realmid": 1
    , "children": [
        {
            "classid": 1
            , "children": [{
                "familyid": 3
                , "children": [
                    { "typeid": 8 }
                    , { "typeid": 9 }
                ]
            }, {
                "familyid": 9
                , "children": [
                    { "typeid": 81 }
                    , { "typeid": 91 }
                ]
            }
            ]
        }, {
            "classid": 11
            , "children": [{
                "familyid": 13
                , "children": [
                    { "typeid": 18 }
                    , { "typeid": 19 }
                ]
            }, {
                "familyid": 19
                , "children": [
                    { "typeid": 181 }
                    , { "typeid": 191 }
                ]
            }
            ]
        }
    ]
},{
    "realmid": 21
    , "children": [
        {
            "classid": 21
            , "children": [{
                "familyid": 23
                , "children": [
                    { "typeid": 28 }
                    , { "typeid": 29 }
                ]
            }, {
                "familyid": 29
                , "children": [
                    { "typeid": 281 }
                    , { "typeid": 291 }
                ]
            }
            ]
        }, {
            "classid": 211
            , "children": [{
                "familyid": 213
                , "children": [
                    { "typeid": 218 }
                    , { "typeid": 219 }
                ]
            }, {
                "familyid": 219
                , "children": [
                    { "typeid": 2181 }
                    , { "typeid": 2191 }
                ]
            }
            ]
        }
    ]
}
]

, и я хочу создать вложенный элемент управления флажком в response-native.

Я добился успеха, вроде ... вывернув к черту этот JSON (несколько итераций попыток, я еще не очистил этот код)

По: изменению исходных данных ... 

let obj = {}
for (const rs of rcftData.foodtree) {
    obj["r-" + rs.realmid] 
        = { realmid: rs.realmid
            , checked: false
            , skey: "r-" + rs.realmid
            , name: rs.name
            , padd: 0 
        }
    for (const cs of rs.children) {
        obj["r-" + rs.realmid + "-c-" + cs.classid] 
            = { realmid: rs.realmid
                , classid: cs.classid
                , checked: false
                , skey: "r-" + rs.realmid + "-c-" + cs.classid
                , name: cs.name
                , padd: 15 
            }
        for (const fs of cs.children) {
            obj["r-" + rs.realmid + "-c-" + cs.classid + "-f-" + fs.familyid] 
                = { realmid: rs.realmid
                    , classid: cs.classid
                    , familyid: fs.familyid
                    , checked: false
                    , skey: "r-" + rs.realmid + "-c-" + cs.classid + "-f-" + fs.familyid
                    , name: fs.name
                    , padd: 30 
                }
            for (const ts of fs.children) {
                obj["r-" + rs.realmid + "-c-" + cs.classid + "-f-" + fs.familyid + "-t-" + ts.typeid] 
                    = { realmid: rs.realmid
                        , classid: cs.classid
                        , familyid: fs.familyid
                        , typeid: ts.typeid
                        , checked: false
                        , skey: "r-" + rs.realmid + "-c-" + cs.classid + "-f-" + fs.familyid + "-t-" + ts.typeid
                        , name: ts.name
                        , padd: 45 
                    }
            }
        }
    }
}
setFilteredChecks(_.values(obj))

, что превращает их во что-то вроде этого 

const wowWtf =  [
     {
      "checked": true,
      "padd": 0,
      "realmid": "1",
      "skey": "r-1",
    },
     {
      "checked": true,
      "classid": "1",
      "padd": 15,
      "realmid": "1",
      "skey": "r-1-c-1",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "1",
      "padd": 30,
      "realmid": "1",
      "skey": "r-1-c-1-f-1",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "1",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-1-t-1",
      "typeid": "1",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "1",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-1-t-2",
      "typeid": "2",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "1",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-1-t-3",
      "typeid": "3",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "1",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-1-t-4",
      "typeid": "4",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "1",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-1-t-5",
      "typeid": "5",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "1",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-1-t-6",
      "typeid": "6",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "2",
      "name": "White",
      "padd": 30,
      "realmid": "1",
      "skey": "r-1-c-1-f-2",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "2",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-2-t-7",
      "typeid": "7",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "3",
      "padd": 30,
      "realmid": "1",
      "skey": "r-1-c-1-f-3",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "3",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-3-t-8",
      "typeid": "8",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "3",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-3-t-9",
      "typeid": "9",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "3",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-3-t-10",
      "typeid": "10",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "3",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-3-t-11",
      "typeid": "11",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "3",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-3-t-12",
      "typeid": "12",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "3",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-3-t-13",
      "typeid": "13",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "3",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-3-t-14",
      "typeid": "14",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "4",
      "padd": 30,
      "realmid": "1",
      "skey": "r-1-c-1-f-4",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "4",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-4-t-15",
      "typeid": "15",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "4",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-4-t-16",
      "typeid": "16",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "4",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-4-t-17",
      "typeid": "17",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "4",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-4-t-18",
      "typeid": "18",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "4",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-4-t-19",
      "typeid": "19",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "4",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-4-t-20",
      "typeid": "20",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "4",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-4-t-21",
      "typeid": "21",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "4",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-4-t-22",
      "typeid": "22",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "4",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-4-t-23",
      "typeid": "23",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "4",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-4-t-24",
      "typeid": "24",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "4",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-4-t-25",
      "typeid": "25",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "4",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-4-t-26",
      "typeid": "26",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "4",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-4-t-27",
      "typeid": "27",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "4",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-4-t-28",
      "typeid": "28",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "4",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-4-t-29",
      "typeid": "29",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "4",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-4-t-30",
      "typeid": "30",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "4",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-4-t-31",
      "typeid": "31",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "4",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-4-t-32",
      "typeid": "32",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "4",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-4-t-33",
      "typeid": "33",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "4",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-4-t-34",
      "typeid": "34",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "4",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-4-t-35",
      "typeid": "35",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "4",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-4-t-36",
      "typeid": "36",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "4",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-4-t-37",
      "typeid": "37",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "4",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-4-t-38",
      "typeid": "38",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "4",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-4-t-39",
      "typeid": "39",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "4",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-4-t-40",
      "typeid": "40",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "5",
      "padd": 30,
      "realmid": "1",
      "skey": "r-1-c-1-f-5",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "5",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-5-t-41",
      "typeid": "41",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "6",
      "padd": 30,
      "realmid": "1",
      "skey": "r-1-c-1-f-6",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "6",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-6-t-42",
      "typeid": "42",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "6",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-6-t-43",
      "typeid": "43",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "7",
      "padd": 30,
      "realmid": "1",
      "skey": "r-1-c-1-f-7",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "7",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-7-t-44",
      "typeid": "44",
    },
     {
      "checked": true,
      "classid": "1",
      "familyid": "7",
      "padd": 45,
      "realmid": "1",
      "skey": "r-1-c-1-f-7-t-45",
      "typeid": "45",
    }
  ]

, потому что целью было создать пошаговый список флажков с флажком «проверить все» ниже 'введите способность.

и это сработало, вроде 

import { CheckBox } from 'react-native-elements'
import _ from 'lodash'

const [filteredChecks, setFilteredChecks] = useState([wowWtf]);

const checkboxVisibilityToggle = (incomingKey) => {
    let temp = filteredChecks
    let obj = temp.find(x => x.skey === incomingKey);
    let index = temp.indexOf(obj);
    let newval = !temp[index].checked
    for(i=0;i<temp.length;i++){
        if(temp[i].skey.includes(incomingKey)){
            temp[i].checked=newval
        }
    }
    setFilteredChecks(temp)
}

const RenderFilterCategory = ({ item }) => {

    return (
        <View style={[{ paddingLeft: item.padd}]} >

            <CheckBox
                checked={item.checked}
                title={item.name}
                key={item.skey}
                checkedColor={xtextlink}
                onPress={() => { checkboxVisibilityToggle(item.skey) }}
                keyExtractor={item.skey}
            />
        </View>
    )
}
// section from the main screen.
<ScrollView style={[{height:400}]}>
    <View>
        <FlatList
            vertical
            data={wowWtf}
            renderItem={RenderFilterCategory}
            keyExtractor={item => `${item.skey}`}
            numColumns={1}
        />
    </View>
</ScrollView>

время отклика ... ну, он отзывчивый, а затем медленно замедляется все медленнее и медленнее.

Меня интересуют альтернативные подходы или как их оптимизировать, если кому-то это нравится. Я надеялся использовать структуру «r-1- c -3» с include (), потому что это получило бы «меня» и всех моих потомков.

Сложность ... 1000 элементов легко.

Редактировать: время загрузки безумно быстрое, время проверки / снятия, кажется, увеличивается. это основная проблема здесь.

edit2: я добавил новый атрибут для каждого уровня (keysearch: 'realmid') в зависимости от уровня в for () и удалил include ().

похоже, карта также немного улучшила отклик 

let thisid = temp[index][keysearch]
setFilteredChecks(
    filteredChecks.map(item => 
        item[keysearch] === thisid
        ? {...item, checked : newval} 
        : item 
))
...