Qual exatamente é a utilidade de um componente Renderless? Existe alguma vantagem real no seu uso?
1 Resposta
Um componente Renderless é um componente que não gera HTML próprio, ele existe somente para estruturar outros componentes e/ou tratar dados que são passados ao interior dele. Um componente Renderless é um caso específico de High order component.
Imagina um cenário onde queres mostrar números pares ou números ímpares. A funcionalidade de filtrar números pares ou ímpares pode ser extraída e colocada à parte. Assim passando um template diferente o componente renderless encarrega-se de tratar os dados mantêm-se fora do HTML.
Exemplo com um componente <lista>
:
Vue.component('lista', {
props: ['numbers', 'even'],
computed: {
filteredNumbers() {
return (this.numbers || [])
.filter(nr => this.even === (nr % 2 === 0));
}
},
render() {
return this.$scopedSlots.default({
numbers: this.filteredNumbers
});
}
});
new Vue({
name: 'App',
el: "#app",
data() {
return {
numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
<div id="app">
<p>Pares</p>
<lista :numbers="numbers" :even="true">
<ul slot-scope="{numbers}">
<li v-for="nr in numbers">{{nr}}</li>
</ul>
</lista>
<p>Ímpares</p>
<lista :numbers="numbers" :even="false">
<div slot-scope="{numbers}">
<span>{{numbers.join(', ')}}</span>
</div>
</lista>
</div>
Dois artigos em Inglês com exemplos mais detalhados:
-
-
1@Marconi é indiferente, o conceito é o mesmo mas em cada tecnologia é feito de maneira ligeiramente diferente. Dei um exemplo com Vue mas podia ser com React.– Sergio7/06/2019 às 22:19
-
-
1