React高阶组件特点

2024年2月11日 231次阅读 来源: hachimei

一 、高阶组件(下面都称作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>
        }
    }
}
    原文作者：hachimei
    原文地址: https://segmentfault.com/a/1190000020247105
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞