【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>  
  }  
} 

（编辑：湖南网）

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