5 ms·
Agreed completely. My favorite example is the `slot` directive which doesn't exist in React because the pattern comes for free. To take the example from the Vu
by ng12 7y ago
Agreed completely. My favorite example is the `slot` directive which doesn't exist in React because the pattern comes for free.
To take the example from the Vue docs:
// Component with a slot
<ul>
<li v-for="todo in filteredTodos" v-bind:key="todo.id">
<slot name="todo" v-bind:todo="todo">
{{ todo.text }}
</slot>
</li>
</ul>
// Consuming component
<todo-list v-bind:todos="todos">
<template v-slot:todo="{ todo }">
<span v-if="todo.isComplete">x</span>
{{ todo.text }}
</template>
</todo-list>
This can be rewritten in React with much simpler, cleaner code:
// Component with a "slot"
<ul>
{filteredTodos.map(todo => props.renderTodo ? props.renderTodo(todo) : todo.text)}
</ul>
// Consuming component
<TodoList todos={todos} renderTodo={todo =>
`${todo.isComplete ? "x " : ""}${todo.text}`
}/>
Simplicity is key. In the React version you don't have to worry about the `slot` syntax, build a mental model of how Vue treats it, or risk running into the limitations of the feature.
- xdanger 7y agoI'm not really sure how can you say that the React code is simpler or cleaner? Where do props come from? Where's the span for x? <li>'s are generated by magic? I just don't like mixing html and js like that, maybe that's why it also seems messy to me. The vue example also isn't the greatest, some cruft could be removed using default slot and shorter syntax.
- ng12 7y agoBoth Vue and React have props. The above code is a snippet; I used the same format as the Vue documentation (which I agree is a little confusing). > Where's the span for x? I assumed Vue was only using the span for v-if, in React we don't need that extra node. > <li>'s are generated by magic? Whoops -- an omission on my part. They should be wrapping the inside of the mapping function. > I just don't like mixing html and js like that, maybe that's why it also seems messy to me. But this is where the magic is. It's exactly why React didn't need to invent a concept for "slots". I admit it's vaguely unfamiliar at first but if it increases both the power and simplicity of your template it's a no-brainer.
- keithnz 7y agogotta say, the vue example looks simpler and cleaner....also I notice you seem to be using the most verbose syntax for vue.
- ng12 7y agoI completely disagree on first note, mostly because it's almost all JavaScript. There's very little "React" there. On the second note it's copy-pasted code from the official Vue docs.
- keithnz 7y agothe best way to describe a UI is in javascript? huh... I wonder why people keep creating markup style languages to abstract away from programming languages for UIs? Basically if you are describing your UI in javascript, maybe that's not a good thing.
- ng12 7y agoI don't really understand what you're talking about. For building a dynamic UI you need JavaScript (or another programming language). Both React and Vue use JavaScript to build their dynamic views. If you're not building a dynamic UI then you don't need either tool.
- keithnz 7y agoIn react that's mostly true, in Vue (and things like WPF) there's a two layers essentially, markup to create bindings to reactive data, and code to define the reactive data ( though vue does let you blur the lines)
- ng12 7y ago> markup to create bindings to reactive data Right, and my argument is building this in JavaScript directly (rather than a HTML-ish/JavaScript-ish template language that gets converted into JavaScript) is a better model.