如何評價 Vue 的 Function-based Component？

做者：匿名用戶
連接：https://www.zhihu.com/question/325397290/answer/708418099
來源：知乎

事實性錯誤：

那 vue 呢？它連 HOC 都沒有，render props 更不現實（jsx自帶）

1. 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？

請問：

1. Hooks對Fiber更好 -> Hooks是Fiber的產物 -> 沒有Fiber就不是Hooks

請問怎麼用邏輯推理出這條鏈？

2. 對於你回答中的事實性錯誤， 你持什麼見解？

Jasin Yip

不知道有沒有正確理解你說的「移除一個屬性」：


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