CodeBlanks Logo Icon CodeBlanks

Host config

Temel host config fonksiyonlarını öğrenirsin.

Host config detayları

Host config'in en sık kullanılan fonksiyonları createInstance, appendChild, removeChild ve commitUpdate'dir.

createInstance(type, props) hedef düğümü oluşturur. appendChild(parent, child) çocuğu ekler ve parent döndürür. commitUpdate özellik değişikliklerini uygular.

Bu fonksiyonlar hedef ortama göre yazılır; DOM'da createElement, terminalde düğüm nesnesi.

commitUpdate ve özellikler

commitUpdate(instance, type, oldProps, newProps) bir düğümün özelliklerini günceller. DOM'da bu, öznitelik değiştirmek demektir; terminalde metin veya renk güncellenir.

Performans için yalnızca değişen özellikleri uygularsın; tüm özellikleri silip yeniden eklemek verimsizdir.

appendChild ve removeChild da parent döndürerek zincirleme çağrıya izin verir.

Uygulama createInstance ve appendChild yaz

hostConfig yaz. createInstance: (type, props) => ({ type, props, children: [] }). appendChild: (parent, child) => { parent.children.push(child); return parent; }. Dışa aktar.

Başlangıç kodu

App.jsx
// hostConfig'i buraya yaz

Örnek çözüm

App.jsx
const hostConfig = {
  createInstance: (type, props) => ({ type, props, children: [] }),
  appendChild: (parent, child) => {
    parent.children.push(child);
    return parent;
  },
};
export default hostConfig;

Soru ve cevaplar

Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.

1 Host config fonksiyonlarını eşleştir

Kavram Anlamı
createInstance Düğüm oluşturur
appendChild Çocuk ekler
removeChild Çocuk çıkarır
commitUpdate Özellik uygular

2 appendChild ne döndürmelidir?

  • child
  • null
  • undefined
  • parent Doğru cevap

Açıklama: appendChild zincirleme için parent döndürür.

3 Boşluğu doldur: commitUpdate imzası

Soru
commitUpdate: (instance, type, oldProps, ____) => { /* özellikleri uygula */ },
Cevap
commitUpdate: (instance, type, oldProps, newProps) => { /* özellikleri uygula */ },

Açıklama: commitUpdate newProps parametresi alır.

Uzman seviye bölümündeki tüm dersler