zoukankan      html  css  js  c++  java
  • React高阶组件学习笔记

    高阶函数的基本概念:

      函数可以作为参数被传递,函数可以作为函数值输出。

    高阶组件基本概念:

      高阶组件就说接受一个组件作为参数,并返回一个新组件的函数。

    为什么需要高阶组件

      多个组件都需要某个相同的功能,使用高阶组件减少重复实现。

    编写高阶组件:

      1.实现一个普通组件。

      2.把普通组件用函数包裹,并用return 抛出,函数要接受一个参数。

    import React from 'react';
    
    //高阶组件传入一个组件再返回一个新的组件
    function CompWrap(Com) {
        return props =>
            <div >
                <Com {...props} />
                <p>性别:{props.sex}</p>
            </div>
    
    }
    function Comp(props) {
        return (
            <div>
                <p>姓名:{props.name}</p>
                <p>年龄:{props.age}</p>
            </div>
        )
    }
    export default CompWrap(Comp)

    使用高阶组件:

      方一:higherOrderComponent(Com)

      方二:@higherOrderComponent(详见:React-使用装饰器

    嵌套高阶组件

    import React from 'react';
    function CompWrapWrapWrap(Com) {
        console.log('CompWrapWrapWrap')
        return props =>
            <div >
                <h1>CompWrapWrapWrap信息:</h1>
                <Com {...props} />
            </div>
    
    }
    function CompWrapWrap(Com) {
        console.log('CompWrapWrap')
        return props =>
            <div >
                <h1>CompWrapWrap信息:</h1>
                <Com {...props} />
            </div>
    
    }
    function CompWrap(Com) {
        console.log('CompWrap')
        return props =>
            <div >
                <Com {...props} />
                <p>性别:{props.sex}</p>
            </div>
    
    }
    function Comp(props) {
        console.log('Comp')
        return (
            <div>
                <p>姓名:{props.name}</p>
                <p>年龄:{props.age}</p>
            </div>
        )
    }
    export default CompWrapWrapWrap(CompWrapWrap(CompWrap(Comp)))

    控制台打印结果

    高阶组件的应用

    https://www.cnblogs.com/libin-1/p/7087605.html

  • 相关阅读:
    深浅拷贝
    生成式、生成器、迭代对象、迭代器
    memcached
    redis安装配置
    基于docker搭建mysql主从复制架构
    centos 安装 最新版本的docker
    Linux小技巧
    神奇的'license': 'AGPL 3.0'标签报错
    新博客重新开通了
    通过linkserver不能调远程表值函数
  • 原文地址:https://www.cnblogs.com/superlizhao/p/10334843.html
Copyright © 2011-2022 走看看