zoukankan      html  css  js  c++  java
  • react 高阶组件

    摘要

    高阶组件为了解决抽象基础组件的通用方法/属性,给多个基础组件增加buffer。如果立足基础组件理解,则高阶组件是有个经验加成的基础组件,基础组件继承于高阶组件。

    写法

    mixin 写法

    包裹型写法,如下 a 即为 b 的高阶组件, 纯函数式编程, 可用串联式编写

    const a = enhance(b);
    const c = enhance1(enhance2(b));
    

    包裹型可以实现渲染劫持, 由高阶组件控制基础组件的渲染方式。

    function iiHOC(WrappedComponent) {
      return class Enhancer extends WrappedComponent {
        render() {
          const elementsTree = super.render()
          let newProps = {};
          if (elementsTree && elementsTree.type === 'input') {
            newProps = {value: 'may the force be with you'}
          }
          const props = Object.assign({}, elementsTree.props, newProps)
          const newElementsTree = React.cloneElement(elementsTree, props, elementsTree.props.children)
          return newElementsTree
        }
      }
    }
    

    decorator 写法

    装饰器写法,

    @a
    class b extends c {
    
    }
    

    优缺点

    mixin

    mixin 并不是非常推荐的方法。
    缺点:

    • 一个组件和它的 mixin 之间的关联是隐式的。
    • 单一组件中使用多个 mixin 时会产生冲突。
    • 性能优化变复杂
  • 相关阅读:
    Django contenttypes组件
    Django admin组件使用
    Django 信号
    Django 中间件
    Django 分页组件替换自定义分页
    Django ORM操作补充
    Django ORM 操作2 增删改
    Django 序列化
    JavaScript
    CSS 属性
  • 原文地址:https://www.cnblogs.com/huxiaoyun90/p/7297363.html
Copyright © 2011-2022 走看看