React高阶组件特色

一 、高阶组件(下面都称做HOC)HOC应该是无反作用的纯函数,且不该该修改原组件。HOC接收一个函数做参数,render时仅仅渲染了被包装的组件,并无侵入式的修改它。
2、HOC不关心你传递的props是什么,而且被包装的组件不关心数据来源。
3、HOC接收到的props应该传递给被包装的组件,但它能够对props进行操做(非直接修改props)
注意:
1 HOC不该该在render函数中建立
2 HOC也须要复制组件中的静态方法
3 HOC中的ref引用的是最外层的容器组件
示例代码:app

function withConsle(WrappedComponent) {
    return class extends React.Component {
        componentDidMount () {
            console.log('with console: WrappedComponent had mount'
        }
        render () {
            return <WrappedComponent (...this.props)></WrappedComponent>
        }
    }
}
相关文章
相关标签/搜索