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)))

控制台打印结果

aaarticlea/png;base64,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" alt="" />

高阶组件的应用

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