- 3
Dlaczego Virtual DOM jest lepszym rozwiązaniem niż bezpośrednia manipulacja DOM'em? Czy ktoś może mi podać przykład gdzie VDOM jest bardziej wydajnościowy od normalnie napisanego np. jQuery?
#javascript #react #jquery #programowanie
#javascript #react #jquery #programowanie
@axaha: Przede wszystkim VDOM oferuje deklaratywność (chcę by było tak, ogarnij faktycznie konieczne zmiany)... Wydajność jest tutaj niejako "efektem ubocznym", bo po prostu w praktyce ciężko pisać aplikacje które wydajnie zmienią tylko to co rzeczywiście trzeba zmienić.
Pomyśl o liście użytkowników (tabela) i o zmianie pojedynczego pola w długiej liście (wspomniane 1k elementów).
Da się imperatywnie (js/jquery) zmienić tylko jeden element, ale w rzeczywistości programista pewnie napisze kod który
Pomyśl o liście użytkowników (tabela) i o zmianie pojedynczego pola w długiej liście (wspomniane 1k elementów).
Da się imperatywnie (js/jquery) zmienić tylko jeden element, ale w rzeczywistości programista pewnie napisze kod który
@mirasKo-Kalwario: Koncepcyjnie, na wysokim poziomie to co napisałeś w 1. akapicie się zgadza, ale chciałbym rozjaśnić...
Render przeglądarki (rysowanie) to co innego niż render VDOM, np. Reacta (aplikowanie zmian z V do DOM).
Tu już mylisz koncepty key i memoizacji. ;) Key służy do unikalnego zidentyfikowania powtarzających się elementów (np. wiersza w tabeli,
Render przeglądarki (rysowanie) to co innego niż render VDOM, np. Reacta (aplikowanie zmian z V do DOM).
Dodatkowo w virtual dom masz atrybut key który pozwala nie renderować wszystkiego jeśli key się nie zmienił.
Tu już mylisz koncepty key i memoizacji. ;) Key służy do unikalnego zidentyfikowania powtarzających się elementów (np. wiersza w tabeli,
@tlaziuk: Tak i nie. VDOM oferuje deklaratywność z której korzysta np. taki React. Nie oznacza to, że nie da się osiągnąć deklaratywności w inny sposób.
Wszystko można, tylko po co? VDOM powstał właśnie po to, żeby templatkowania nie używać. ( ͡° ͜ʖ ͡°)
można zrobić tak aby render vdom działał #!$%@? przez zastosowanie templatkowania
Wszystko można, tylko po co? VDOM powstał właśnie po to, żeby templatkowania nie używać. ( ͡° ͜ʖ ͡°)
@axaha: Dla uproszczenia - tak. Oczywiście React bez JSX (czyli same wywołania funkcji React.createElement etc.) też jest deklaratywny.
Ściągawka w skrócie:
Deklaratywnie - z góry określone co, nie wchodzące w szczegóły procedury wykonania (np. React - wyrenderuj mi ten widok, sam zdecyduj co jest do zrobienia)
Imperatywnie - jak - czyli określona procedura krok po kroku (np. js/jquery - znajdź ten node, zmień jego klasę na active, zmień zawartość
Ściągawka w skrócie:
Deklaratywnie - z góry określone co, nie wchodzące w szczegóły procedury wykonania (np. React - wyrenderuj mi ten widok, sam zdecyduj co jest do zrobienia)
Imperatywnie - jak - czyli określona procedura krok po kroku (np. js/jquery - znajdź ten node, zmień jego klasę na active, zmień zawartość
deklaratywnie: zrób mi kanapkę
Chcę kanapkę z pomidorem. ( ͡° ͜ʖ ͡°)
deklaratywnych kroków
@tlaziuk: Sęk w tym, że nie deklarujesz kroków.
Lepszy przykład - nawigowanie się po mieście.
Chcę dojechać na Dworcową 13 vs jedź prosto, skręć w lewo etc.
podejście imperatywne to tak jakby dzielenie deklaracji
Nie.
Chciałbym napisać wrapper w #react i #typescript ale czuję się jak totalny idiota.
Stack przewalony chyba cały i dalej nie widzę nawet światełka w tunelu.
To jest mój kod w #typescript:
import React, { ReactNode } from 'react';
export const Layout: React.FC = ({ children }: { children?: ReactNode }) => {
return ({ children } as unknown) as JSX.Element;
};
Wywala mi taki błąd w Chrome: >