Bileşeni Genişletme

Bazı projelerin, bileşeni ek işlevsellik ile genişletmek isteyebileceği mümkündür.

JavaScript'te kalıtımın değeri hakkında çeşitli görüşler vardır, ancak tüm bileşenlerinizin miras alacağı kendi "ana sınıfınızı" oluşturmak isterseniz, Preact bu konuda size yardımcı olur.

bilgi

Belki de Flux benzeri bir mimaride depolara/düşürücülere otomatik bağlantı yapmak istiyorsunuz. Belki de React.createClass() gibi hissettirmek için özellik tabanlı karışımlar eklemek istersiniz (not: @bind dekoratörü tercih edilir).

Her halükarda, Preact'in Component sınıfını genişletmek için sadece ES2015 sınıf kalıtımını kullanın:

class BoundComponent extends Component {
    // örnek: bağlı yöntemleri al
    binds() {
        let list = this.bind || [],
            binds = this._binds;
        if (!binds) {
            binds = this._binds = {};
            for (let i=list.length; i--; ) {
                binds[list[i]] = this[list[i]].bind(this);
            }
        }
        return binds;
    }
}

Kullanım Örneği:

class Link extends BoundComponent {
    bind = ['click'];
    click() {
        open(this.props.href);
    }
    render({ children }) {
        let { click } = this.binds();
        return <span onClick={ click }>{ children }</span>;
    }
}

render(
    <Link href="http://example.com">Bana Tıklayın</Link>,
    document.body
);

Olasılıklar sonsuzdur. İşte basit karışımları destekleyen genişletilmiş bir Component sınıfı:

class MixedComponent extends Component {
    constructor() {
        super();
        (this.mixins || []).forEach( m => Object.assign(this, m) );
    }
}

---

Dipnot: Kalıtımın sizi kırılgan ebeveyn-çocuk ilişkilerine kilitleyebileceğini belirtmek gerekir. Genellikle, kalıtım ile yeterince çözülebilecek bir programlama görevi ile karşılaştığınızda, böyle bir ilişki oluşturmayı önleyecek daha işlevsel bir yol vardır. — önemli bir düşünce