前端经典react面试题（持续更新中）

React必须使用JSX吗？

React 并不强制要求使用 JSX。当不想在构建环境中配置有关 JSX 编译时，不在 React 中使用 JSX 会更加方便。

每个 JSX 元素只是调用 React.createElement(component, props, ...children) 的语法糖。因此，使用 JSX 可以完成的任何事情都可以通过纯 JavaScript 完成。

例如，用 JSX 编写的代码：

class Hello extends React.Component {
   
  render() {
   
    return <div>Hello {
   this.props.toWhat}</div>;
  }
}
ReactDOM.render(
  <Hello toWhat="World" />,
  document.getElementById('root')
);

可以编写为不使用 JSX 的代码：

class Hello extends React.Component {
   
  render() {
   
    return React.createElement('div', null, `Hello ${
     this.props.toWhat}`);
  }
}
ReactDOM.render(
  React.createElement(Hello, {
   toWhat: 'World'}, null),
  document.getElementById('root')
);

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

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(