作者:匿名用户
链接: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