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

（编辑：晋中站长网）

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