如何评价 Vue 的 Function-based Component?
作者:匿名用户
链接:https://www.zhihu.com/question/325397290/answer/708418099
来源:知乎
事实性错误:
那 vue 呢?它连 HOC 都没有,render props 更不现实(jsx自带)
- HOC
const DefaultButton = {
props: {
text: String
},
template: `<button>{{text}}</button>`
} function wrap(comp) {
return {
components: {
comp
},
template: `<comp text=""/>`
}
} new Vue({
components: {
TextButton: wrap(DefaultButton)
},
template: `<text-button />`
})
2. HOC + render props
const DefaultButton = {
props: {
renderText: Function
},
render(h) {
return h('button', this.renderText())
}
} function wrap(comp) {
return {
render(h) {
return h(comp, {
attrs: {
renderText: () => ""
}
})
}
}
} const textButton = wrap(DefaultButton) new Vue({
render(h) {
return h(textButton)
}
})
react 的不可变,纯函数。直接导致 hooks 必须使用 const 关键字,不能是 let,这也是 hooks 的奇迹之一
const
keyword 和 "不可变,纯函数" 有什么关系, 若使用 let、var, 是否不能实现hook?
请问:
- Hooks对Fiber更好 -> Hooks是Fiber的产物 -> 没有Fiber就不是Hooks
请问怎么用逻辑推理出这条链?
2. 对于你回答中的事实性错误, 你持什么看法?
不知道有没有正确理解你说的“移除一个属性”:
onst DefaultButton = {
props: {
renderText: Function
},
render(h) {
return h('button', this.renderText())
}
} function omitRenderText(comp, render) {
return {
render(h) {
const { renderText, ...others } = this.$attrs
return h(comp, {
attrs: {
...others,
renderText: render || renderText
}
})
}
}
} const textButton = omitRenderText(DefaultButton, () => "") new Vue({
render(h) {
return h(textButton, {
attrs: {
renderText: () => ""
}
})
}
})
如果你觉得这篇文章对你还是有很大帮助的话,不介意的话可以加下我刚刚建立的一个学习交流群,有很多相关资料和学习视频:907694362
如何评价 Vue 的 Function-based Component?的更多相关文章
- vue render function
vue render function https://vuejs.org/v2/guide/render-function.html { // Same API as `v-bind:class`, ...
- vue render function & dataset
vue render function & dataset https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In ...
- vue & arrow function error
vue & arrow function error <template> <div class="home"> <img alt=" ...
- vue组件大集合 component
vue组件分为全局组件.局部组件和父子组件,其中局部组件只能在el定义的范围内使用, 全局组件可以在随意地方使用,父子组件之间的传值问题等. Vue.extend 创建一个组件构造器 template ...
- Vue内置的Component标签用于动态切换组件
html <div id="app"> <component :is="cut"></component> <butt ...
- vue.js组件(component)
简介: 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面 ...
- Vue教程:组件Component详解(六)
一.什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功 ...
- [Vue] Parent and Child component communcation
By building components, you can extend basic HTML elements and reuse encapsulated code. Most options ...
- vue学习之组件(component)(二)
自定义事件 父组件使用 prop 传递数据给子组件.但子组件怎么跟父组件通信呢?这个时候 Vue 的自定义事件系统就派得上用场了. 1. 使用 v-on 绑定自定义事件 每个vue实例都实现了事件接口 ...
随机推荐
- c语言1博客作业02
c语言1博客作业02 这个作业属于哪个课程 C语言程序设计 这个作业的要求在哪 [作业要求](https://edu.cnblogs.com/campus/zswxy/SE2019-2/homewor ...
- SpringBoot中如何优雅的读取yml配置文件?
YAML是一种简洁的非标记语言,以数据为中心,使用空白.缩进.分行组织数据,从而使得表示更加简洁易读.本文介绍下YAML的语法和SpringBoot读取该类型配置文件的过程. 本文目录 一.YAML基 ...
- vue移动端 实现手机左右滑动入场动画
app.vue <template> <div id="app"> <transition :name="transitionName&qu ...
- angular 子路由跳转出现Navigation triggered outside Angular zone, did you forget to call ‘ngZone.run() 的问题修复
angular 路由功能非常强大,同时angular的路由也非常脆弱,非常容易出现错误. 那么在我们遇到异常时,首先要做的是什么? 第一步:检查代码,对比官方文档,发现代码中不一致的地方进行改正. 第 ...
- Solr导入MongoDB数据
数据导入方式: 全量导入和增量导入: query 是全量导入时,把你的数据中查到的数据全部导入,deltaImportQuery 和 deltaQuery 是增量导入数据所需要的两个查询语句.delt ...
- JavaWeb EL表达式 key为数值 Map取不到值
JavaWeb EL表达式 key为 Map取不到值 因为JSTL会把Integer,Byte,Short,Charactor都转成Long,这样就取不到值. 参见StackOverFlow的回答 ...
- Java多线程编程(三)线程间通信
线程是操作系统中独立的个体,但这些个体如果不经过特殊的处理就不能成为一个整体.线程间的通信就是成为整体的必用方案之一,可以说,使线程间进行通信后,系统之间的交互性会更强大,在大大提高CPU利用率的同时 ...
- fenby C语言 P29
野指针 malloc()分配内存: free()释放内存: p=(char*)malloc(100): #include <stdio.h>#include <stdlib.h> ...
- fenby C语言 P20
循环停止 break 立刻跳出不再循环 continue立刻跳出循环从下一次循环继续执行 #include <stdio.h> int main(){ int i; for(i=1;i&l ...
- Dubbo 优雅停机演进之路
一.前言 在 『ShutdownHook- Java 优雅停机解决方案』 一文中我们聊到了 Java 实现优雅停机原理.接下来我们就跟根据上面知识点,深入 Dubbo 内部,去了解一下 Dubbo 如 ...