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

可用、权限控制

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方法来将其改写为受控组件，在表单元素非常多的情况下这些重复操作是非常痛苦的。

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

（编辑：晋中站长网）

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