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

为了利便调试，我们可以手动为HOC指定一个displayName，官方保举行使HOCName(WrappedComponentName)：

static displayName = `Visible(${WrappedComponent.displayName})` 

这个约定辅佐确保高阶组件最洪流平的机动性和可重用性。

行使HOC的念头

回首下上文提到的 Mixin 带来的风险：

•  Mixin 也许会彼此依靠，彼此耦合，倒霉于代码维护
•  差异的 Mixin 中的要领也许会彼此斗嘴
•  Mixin很是多时，组件是可以感知到的，乃至还要为其做相干处理赏罚，这样会给代码造成滚雪球式的伟大性

而HOC的呈现可以办理这些题目：

•  高阶组件就是一个没有副浸染的纯函数，各个高阶组件不会相互依靠耦合
•  高阶组件也有也许造成斗嘴，但我们可以在遵守约定的环境下停止这些举动
•  高阶组件并不体谅数据行使的方法和缘故起因，而被包裹的组件也不体谅数据来自那里。高阶组件的增进不会为原组件增进承担

HOC的缺陷

•  HOC必要在原组件长举办包裹可能嵌套，假如大量行使HOC，将会发生很是多的嵌套，这让调试变得很是坚苦。
•  HOC可以挟制props，在不遵守约定的环境下也也许造成斗嘴。

Hooks

Hooks是React v16.7.0-alpha中插手的新特征。它可以让你在class以外行使state和其他React特征。

行使Hooks，你可以在将含有state的逻辑从组件中抽象出来，这将可以让这些逻辑轻易被测试。同时，Hooks可以辅佐你在不重写组件布局的环境下复用这些逻辑。以是，它也可以作为一种实近况态逻辑复用的方案。

阅读下面的章节行使Hook的念头你可以发明，它可以同时办理Mixin和HOC带来的题目。

官方提供的Hooks

State Hook

我们要行使class组件实现一个计数器成果，我们也许会这样写：

export default class Count extends Component {  
  constructor(props) {  
    super(props);  
    this.state = { count: 0 }  
  }  
  render() {  
    return (  
      <div>  
        <p>You clicked {this.state.count} times</p>  
        <button onClick={() => { this.setState({ count: this.state.count + 1 }) }}>  
          Click me  
        </button>  
      </div>  
    )  
  }  
} 

（编辑：湖南网）

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