zoukankan      html  css  js  c++  java
  • 如何评价 Vue 的 Function-based Component?

    事实性错误:

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

    资源搜索网站大全 http://www.szhdn.com 广州VI设计公司https://www.houdianzi.com

    请问:

    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"
          }
        })
      }
    })
  • 相关阅读:
    简单工厂
    Asp.Net Catch的应用
    ADO和ADO.NET的区别
    PLSql语句学习(三)
    三层结构的B/S系统(收藏)
    MVC 模式
    利用.net反射动态调用指定程序集的中的方法
    .NET反射的简单示例
    ToString格式化
    HTML:关于位置的几个概念
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/14019421.html
Copyright © 2011-2022 走看看