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

  • 相关阅读:
    conda包手动下载 本地安装
    Effective C++这书很好
    jquery mobile 教程
    ASP.NET Core 3.1 + Swagger UI 的实际运用笔记
    textarea 里面输入的内容有换行,在页面用 js 展示时需要转义
    JS总结
    08、iframe、div、span标签
    07、表单
    06、表格
    05、列表序列
  • 原文地址:https://www.cnblogs.com/superlizhao/p/10334843.html
Copyright © 2011-2022 走看看