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

Decorators是ES7的一个提案，还没有被尺度化，但今朝Babel转码器已经支持，我们必要提前设置babel-plugin-transform-decorators-legacy：

"plugins": ["transform-decorators-legacy"] 

还可以团结上面的compose函数行使：

const hoc = compose(logger, visible, style);  
@hoc  
class Input extends Component {  
  // ...  
} 

HOC的现实应用

下面是一些我在出产情形中现实对HOC的现实应用场景，因为文章篇幅缘故起因，代码颠末许多简化，若有题目接待在评述区指出：

日记解决

现实上这属于一类最常见的应用，多个组件拥有相同的逻辑，我们要对一再的逻辑举办复用，

官方文档中CommentList的示例也是办理了代码复用题目，写的很具体，有乐趣可以👇行使高阶组件（HOC）办理横切存眷点。

某些页面必要记任命户举动，机能指标等等，通过高阶组件做这些工作可以省去许多一再代码。

function logHoc(WrappedComponent) {  
  return class extends Component {  
    componentWillMount() {  
      this.start = Date.now();  
    }  
    componentDidMount() {  
      this.end = Date.now();  
      console.log(`${WrappedComponent.dispalyName} 渲染时刻：${this.end - this.start} ms`);  
      console.log(`${user}进入${WrappedComponent.dispalyName}`);  
    }  
    componentWillUnmount() {  
      console.log(`${user}退出${WrappedComponent.dispalyName}`);  
    }  
    render() {  
      return <WrappedComponent {...this.props} />  
    }  
  }  
} 

（编辑：湖南网）

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