【高阶组件和函数式编程】
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高阶组件的人给予帮助~