react高阶组件的理解

2018/03/06 15:10
阅读数 12

【高阶组件和函数式编程】

function hello() {
    console.log('hello jason');
}
function WrapperHello(fn) {
    return function() {
        console.log('before say hello');
        fn();
        console.log('after say hello');
    }
}
// hello 这时候等于 WrapperHello函数中返回的 匿名函数
// 在设计模式中这种操作叫做 装饰器模式
// 高阶组件也是这种操作--把一个组件传入,再返回一个新的组件
hello = WrapperHello(hello)
hello()
 
【react中的高阶组件】--HOC   组件就是一个函数
 
存在两种高阶组件: 
1.属性代理---主要进行组件的复用
2.反向集成---主要进行渲染的劫持
 
 
属性代理的典型例子:
 
class Hello extends React.Component {
    render() {
        return <h4>hello Jason</h4>
    }
}
function WrapperHello(Comp) {
    class WrapComp extends React.Component {
        render() {
            return (
                <div>
                    <p>这是react高阶组件特有的元素</p>
                    <Comp {...this.props}></Comp>
                </div>
            )
        }
    }
    return WrapComp;
}
Hello = WrapperHello(Hello)

 

还可以写成装饰器的模式,装饰器就是一个典型的属性代理高阶组件

 

function WrapperHello(Comp) {
    class WrapComp extends React.Component {
        render() {
            return (
                <div>
                    <p>这是react高阶组件特有的元素</p>
                    <Comp {...this.props}></Comp>
                </div>
            )
        }
    }
    return WrapComp;
}
@WrapperHello
class Hello extends React.Component {
    render() {
        return <h4>hello Jason</h4>
    }
}

 

反向集成: 组件和包装组件之间的关系是继承关系而不是代理的方式,可以修改原组件的生命周期,渲染流程和业务逻辑

 

function WrapperHello(Comp) {
    class WrapComp extends Comp {
        componentDidMount() {
            console.log('反向代理高阶组件新增的生命周期,加载完成')
        }
        render() {
            return <Comp {...this.props}></Comp>
        }
    }
    return WrapComp;
}
@WrapperHello
class Hello extends React.Component {
    componentDidMount() {
        console.log('组件加载完成')
    }
    render() {
        return <h4>hello Jason</h4>
    }
}

 

控制台输出:
 
组件加载完成
反向代理高阶组件新增的生命周期,加载完成
 
希望对需要理解react高阶组件的人给予帮助~
 
 
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部