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"
          }
        })
      }
    })
  • 相关阅读:
    UDP 远程主机强迫关闭了一个现有连接
    CSS float 理解
    C# 启用事务提交多条带参数的SQL语句
    EF学习之DBFirst
    说一说JavaScript 中的原型ProtoType
    Unity
    Unity
    Unity
    Unity
    Godot
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/14019421.html
Copyright © 2011-2022 走看看