【React深入】从Mixin到HOC再到Hook(6)

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

可用、权限控制

function auth(WrappedComponent) {  
  return class extends Component {  
    render() {  
      const { visible, auth, display = null, ...props } = this.props;  
      if (visible === false || (auth && authList.indexOf(auth) === -1)) {  
        return display  
      }  
      return <WrappedComponent {...props} />;  
    }  
  }  
} 

authList是我们在进入程序时向后端请求的所有权限列表，当组件所需要的权限不列表中，或者设置的

visible是false，我们将其显示为传入的组件样式，或者null。我们可以将任何需要进行权限校验的组件应用HOC：

@auth  
class Input extends Component {  ...  }  
@auth  
class Button extends Component {  ...  }  
<Button auth="user/addUser">添加用户</Button>  
<Input auth="user/search" visible={false} >添加用户</Input> 

双向绑定

在vue中，绑定一个变量后可实现双向数据绑定，即表单中的值改变后绑定的变量也会自动改变。而React中没有做这样的处理，在默认情况下，表单元素都是非受控组件。给表单元素绑定一个状态后，往往需要手动书写onChange方法来将其改写为受控组件，在表单元素非常多的情况下这些重复操作是非常痛苦的。

我们可以借助高阶组件来实现一个简单的双向绑定，代码略长，可以结合下面的思维导图进行理解。

（编辑：ASP站长网）