如何评价 Vue 的 Function-based Component?

摘要:react 的不可变,纯函数。直接导致 hooks 必须使用 const 关键字,不能是 let,这也是 hooks 的奇迹之一;Hooks对Fiber更好 -> Hooks是Fiber的产物 -> 没有Fiber就不是Hooks

事实性错误:

那 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?


请问:

1Hooks对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"
      }
    })
  }
})

作者:匿名用户
链接:https://www.zhihu.com/question/325397290/answer/708418099

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_6596