Метка react

Прошло 2 месяца — в Котлине освоился, но React еще доводит до кипения.
На днях случилось: воевал я с новым компонентом от Ant.design — TreeSelect, ну чтобы выбирать значение в дереве. Нарисовал быстро, а как данные загрузить до прорисовки понял не сразу. Выход нашелся, когда уже глаза покраснели — рисовать спин, а загружать в componentDidMount. Все это успешно отладилось на песочнице, но когда доехало в прод, начались дииикие тормоза. А все из-за того, что записей в дереве получилось в 10 раз больше. А как дерево строится? Ну как обычно рекурсией, а это самая медленная из операций — цикл в цикле, а еще вся эта радость крутиться не на сервере, а на клиенте. Поэтому скорость упала не в 10 раз, а в 100.
Короче, я попал на самую распространенную задачу при отображении дерева с большим количеством элементов. Обычная практика — выделился узел, дети подтянулись. Но этот TreeSelect этот принимает на вход только целое дерево и не умеет подгружать узлы по запросу.

В итоге пришлось отказаться от этого компонента, и использовать другой (коллеги подсказали, что есть готовый), который это умеет.
(Вот и всё)х2 )))

Итак, я сменил галеру место работы. И, неожиданно, технологии. Java есть, номинально, но на текущий момент, плотно уже 3 недели изучаю Kotlin в связке с ReactJS.

До этого я конечно слышал, про них, но не пробовал. По котлину пару обучающих видео посмотрел и вперед.

Первые впечатления: точка-с-запятой не нужна, типы указываем после переменной, тернарный оператор урезан и стал «элвис» оператором, статических полей нет, финальная и нефинальная переменные обозначаются val и var, функции заменили методы, все классы по-умолчанию финальные. Аааааа-ааа-а!!!

Пример:

fun getPrintTemplate(data: Map<String, Any?>, metadata: MutableList<String> = mutableListOf()): MutableList<String> {
 data.forEach { entry ->
            val value = entry.value
            if (value is Collection<*> && value.isNotEmpty()) {
                (value.first() as Map<String, Any?>)
                        .keys
                        .forEach { subKey -> metadata.add("${entry.key}.$subKey") }
            }
            if (value is Map<*, *>) getPrintTemplate(value as Map<String, Any?>, metadata)
}
    return metadata
}

По реакту — это даже не фреймворк, напрямую не пишем? а под котлин это выглядит как работа с обычными классами.
Вот например создаем элемент:

fun RBuilder.downloadLink(fileName: String, dataFunc: suspend () -> String, body: ((RBuilder).() -> Unit)? = null) {
    a {
        attrs.onClickFunction = {
            async {
                val base64data = dataFunc()
                downloadFile(base64data, fileName).invoke()
            }
        }
        if (body != null) {
            body()
        } else {
            +fileName
            +" "
            icon("download")
        }
    }
}

А потом обращаемся к нему:

    row{
        downloadLink(attach[Attachment.displayName], dataFunc = { handleDownload() })
    }

В общем как новый язык изучать. Угораздило жеж ))