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

 

转载于:https://www.cnblogs.com/superlizhao/p/10334843.html