如何评价 Vue 的 Function-based Component?
程序员文章站
2022-10-04 11:50:09
作者:匿名用户链接:https://www.zhihu.com/question/325397290/answer/708418099来源:知乎 事实性错误: 那 vue 呢?它连 HOC 都没有,render props 更不现实(jsx自带) HOC const DefaultButton = ......
作者:匿名用户
链接: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="123"/>` } } 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: () => "123" } }) } } } 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, () => "000") new vue({ render(h) { return h(textbutton, { attrs: { rendertext: () => "123" } }) } })
如果你觉得这篇文章对你还是有很大帮助的话,不介意的话可以加下我刚刚建立的一个学习交流群,有很多相关资料和学习视频:907694362