【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要领来将其改写为受控组件，在表单位素很是多的环境下这些一再操纵长短常疾苦的。

我们可以借助高阶组件来实现一个简朴的双向绑定，代码略长，可以团结下面的思想导图举办领略。

（编辑：湖南网）

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