react + redux Router + node实践总结(高阶组件）

最新推荐文章于 2018-12-30 22:37:00 发布

西米幺幺

最新推荐文章于 2018-12-30 22:37:00 发布

阅读量213

点赞数

分类专栏： react 文章标签： react

react 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了React中的高阶组件概念，包括其定义、属性代理和反向继承两种主要用途，并通过具体示例展示了如何使用高阶组件来增强组件的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

高阶组件

高阶组件就是把一个组件传入返回另外一个组件，另外一个组件包裹着传入的组件

高阶函数demo

function hello() {
    console.log('hello lmh');
}
function WrapperHello(fn) {
    return function() {
        console.log('before say hello')
        fn()
        console.log('after say hello')
    }
}
hello = WrapperHello(hello)
hello()

react中高阶组件demo

// 属性代理
function WrapperHello(Comp) {
    class WrapComp extends React.Component {
        render() {
            return (
                <div>
                    <p>这是HOC高阶组件特有的元素</p>
                    <Comp {...this.props}></Comp>
                </div>
            )
        ｝
    ｝
    return WrapComp
}

@WrapperHello
class Hello extends React.Component {
    render() {
        return <h2>Hello lmh</h2>
    }
}
// @WrapperHello是下面语句的简写
// Hello = WrapperHello(Hello)

高阶组件有两种功能的组件：属性代理、反向继承，上面的例子为属性代理

// 改写上面的WrapperHello函数
function WrapperHello(Comp) {
    // 反向继承Comp, 由此重写Comp组件的生命周期及render
    class WrapComp extends Comp{
        componentDidMount(){
            console.log('高阶组件新增的生命周期，加载完成')
        }
        render() {
            return <Comp></Comp>
        }
    }