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

（编辑：晋中站长网）

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