React高阶组件特点

6次阅读

共计 450 个字符,预计需要花费 2 分钟才能阅读完成。

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

function withConsle(WrappedComponent) {
    return class extends React.Component {componentDidMount () {console.log('with console: WrappedComponent had mount'}
        render () {return <WrappedComponent (...this.props)></WrappedComponent>
        }
    }
}

正文完
 0