【React深入】从Mixin到HOC再到Hook

如果我们在高阶组件对原组件进行了修改，例如下面的代码：

InputComponent.prototype.componentWillReceiveProps = function(nextProps) { ... } 

这样就破坏了我们对高阶组件的约定，同时也改变了使用高阶组件的初衷：我们使用高阶组件是为了增强而非改变原组件。

约定-透传不相关的props

使用高阶组件，我们可以代理所有的props，但往往特定的HOC只会用到其中的一个或几个props。我们需要把其他不相关的props透传给原组件，如下面的代码：

function visible(WrappedComponent) {  
  return class extends Component {  
    render() {  
      const { visible, ...props } = this.props;  
      if (visible === false) return null;  
      return <WrappedComponent {...props} />;  
    }  
  }  
} 

我们只使用visible属性来控制组件的显示可隐藏，把其他props透传下去。

约定-displayName

在使用React Developer Tools进行调试时，如果我们使用了HOC，调试界面可能变得非常难以阅读，如下面的代码：

@visible  
class Show extends Component {  
  render() {  
    return <h1>我是一个标签</h1>  
  }  
}  
@visible  
class Title extends Component {  
  render() {  
    return <h1>我是一个标题</h1>  
  }  
} 

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!