2023前端二面必会react面试题合集

用户不同权限 可以查看不同的页面 如何实现？

1. Js方式
   根据用户权限类型，把菜单配置成json, 没有权限的直接不显示
2. react-router 方式 在route 标签上 添加onEnter事件，进入路由之前替换到首页

<Route path="/home" component={
   App} onEnter={
   (nexState,replace)=>{
   
      if(nexState.location.pathname!=='/'){
   
         var  sid = UtilsMoudle.getSidFromUrl(nexState);
         if(!sid){
   
            replace("/")
         }else{
   
            console.log(sid);
         }
      }
    }}>

3. 自己封装一个privateRouter组件 里面判断是否有权限，有的话返回
   
   没有权限的话component 返回一个提示信息的组件。

4. 扩展一下，如果是根据用权限来判断是否隐藏组件该怎么做呢？
   react 可以使用高阶组件，在高阶组件里面判断是否有权限，然后判断是否返回组件，无权限返回null
   vue 可以使用自定义指令，如果没有权限移除组件

// 需要在入口处添加自定义权限指令v-auth，显示可操作组件
Vue.directive('auth', {
   
    bind: function (el, binding, vnode) {
   
        // 用户权限表
        const rules = auths
        for (let i = 0; i < rules.length; i++) {
   
            const item = rules[i]
            if(!binding.value || (binding.value == item.auth)){
   
                // 权限允许则显示组件
                return true
            }
        }
        // 移除组件
        el.parentNode.removeChild(el)
    }
})
// 使用
<template>
  <div>
    <Button v-auth="admin_user_add">添加用户</Button>
    <Button v-auth="admin_user_del">删除用户</Button>
    <Button v-auth="admin_user_edit">编辑用户</Button>
  </div>
</template>

React.createClass和extends Component的区别有哪些？

React.createClass和extends Component的bai区别主要在于：

（1）语法区别

• createClass本质上是一个工厂函数，extends的方式更加接近最新的ES6规范的class写法。两种方式在语法上的差别主要体现在方法的定义和静态属性的声明上。
• createClass方式的方法定义使用逗号，隔开，因为creatClass本质上是一个函数，传递给它的是一个Object；而class的方式定义方法时务必谨记不要使用逗号隔开，这是ES6 class的语法规范。

（2）propType 和 getDefaultProps

• React.createClass：通过proTypes对象和getDefaultProps()方法来设置和获取props.
• React.Component：通过设置两个属性p