不同权限的用户可以查看不同的页面如何实现？Js方法根据用户权限类型将菜单配置为json，react-router方法不会根据用户权限类型直接显示菜单。react-router方法在路由标签中添加onEnter事件，并在进入路由前将其替换为首页。{if(nexState.location.pathname!=='/'){varsid=UtilsMoudle.getSidFromUrl(nexState);if(!sid){replace("/")}else{console.log(sid);}}}}>封装一个privateRouter组件判断是否有权限，如果有则返回如果没有权限组件返回一个tooltip组件。拓展一下，如果我们根据权限判断是否隐藏组件怎么办？React可以使用高级组件，判断高级组件中是否有权限，然后判断是否返回组件，没有权限则返回nullVue可以使用自定义指令，如果没有权限则移除组件//需要在入口添加自定义权限指令v-auth，显示可操作组件Vue.directive('auth',{bind:function(el,binding,vnode){//用户权限表construles=authsfor(leti=0;i添加用户删除用户编辑用户
React.createClass和extendsComponent有什么区别？React.createClass和extendsComponent的主要区别是：(1)语法上的区别createClass本质上是一个工厂函数，extends的方式更接近最新ES6规范的class写法。两种方法在语法上的区别主要体现在方法的定义和静态属性的声明上。createClass方法中的方法定义用逗号隔开，因为creatClass本质上是一个函数，传递给它的是一个Object；并且在类方法中定义方法时，一定不要用逗号分隔，这是ES6类的语法规范。(2)propType和getDefaultPropsReact.createClass：通过proTypes对象和getDefaultProps()方法设置和获取propsReact.Component：通过设置propTypes和defaultProps这两个属性(3)React.createClass的状态区别：通过getInitialState()methodReturnanobjectcontaininginitialvalueReact.Component:settheinitialstatethroughtheconstructor(4)this区别React.createClass:thisReact.Component会被正确绑定：由于使用了ES6，所以这里会有细微差别，并且该属性不会自动绑定到React类的实例。(5)MixinsReact.createClass：如果使用React.createClass，可以在创建组件时添加一个名为mixins的属性，将可以混合的类集合以数组的形式赋值给mixins。如果使用ES6方式创建组件，那么Reactmixins的特性将无法使用。React事件与普通HTML事件有何不同？区别：事件名命名方式，native事件全部小写，react事件使用小驼峰；对于事件函数处理语法，native事件是字符串，react事件是函数；react事件不能使用returnfalse来阻止浏览器的默认行为，必须显式调用preventDefault()来阻止默认行为。合成事件是一个事件对象，它模拟原生DOM事件的所有能力。它的优点是：兼容所有浏览器，跨平台性更好；将事件统一存储在一个数组中，避免频繁的增删改查（垃圾回收）。便于react统一管理和事务机制。事件的执行顺序是先执行原始事件，再执行合成事件。合成事件会冒泡并绑定到文档，所以尽量避免将原生事件和合成事件混在一起。如果原生事件阻止冒泡，则合成事件可能不会被执行，因为复合事件需要冒泡到要执行的文档。为什么React不推荐优先使用Context？上下文仍处于实验阶段，可能会在以后的版本中发生很大变化。其实这种情况已经出现过，所以为了避免影响大，给以后的升级带来麻烦，不建议在app上下文中使用。虽然不建议在app中使用context，但是对于独特的组件，由于影响范围比app要小，如果能做到高内聚，又不破坏组件树之间的依赖关系，可以考虑使用context来处理组件之间的数据components对于通信或者状态管理，有效的使用props或者state来解决，再考虑使用第三方成熟的库来解决。当上述方法都不是最佳解决方案时，请考虑上下文。context的更新需要通过setState()来触发，但是这个不太靠谱。Context支持跨组件访问，但是如果中间子组件通过一些方法不影响更新，比如shouldComponentUpdate()返回false，那么就不能保证Context的更新必须使用Context的子组件。所以，Context的可靠性需要关注setState是同步的还是异步的？为什么？实现原理？1、setState是同步执行的。setState是同步执行的，但是state不一定同步更新。2.setState在React生命周期和合成事件中被批量覆盖。在React的生命周期钩子和合成事件中，setState被多次执行。,将被分批执行。具体表现为同步执行多次的setState会被合并，类似于Object.assign，相同的key，后面的会覆盖前面的。遇到多个setState调用时，单次通过setState会抽取对象，将它们合并在一起形成一个新的单个对象，并使用这个单个对象做setState，就像Object.assign对象合并一样，后面的键值会覆盖前面的keyvalue和React处理的事件This.state不会同步更新。addEventListener||处理后会同步更新设置超时/设置间隔。为了合并setState，我们需要一个队列来保存每个setState的数据，然后在一段时间后执行合并操作更新状态，清空队列，然后渲染组件。非嵌套关系组件如何通信？即没有任何包含关系的组件，包括兄弟组件和不在同一个父组件中的非兄弟组件。可以使用自定义事件通信（发布-订阅模式），可以通过redux等方式管理全局状态，如果是兄弟组件通信，可以找到两个兄弟节点的共同父节点，通过parent-孩子的沟通方式。参考前端高级面试题详细回答为什么useState使用数组而不是对象useState用法：const[count,setCount]=useState(0)可以看到useState返回的是一个数组，那为什么返回一个数组而不是一个对象呢？这里用到了解构赋值，那么先看看ES6的解构赋值：数组解构赋值constfoo=[1,2,3];const[一、二、三]=foo；控制台日志（一）；//1console.log(二);//2console.log(三);//3个对象的解构赋值constuser={id:888,name:"xiaoxin"};const{id,name}=用户；控制台。日志（编号）；//888console.log(名称);//"xiaoxin"看了这两个例子，答案应该就出来了：如果useState返回的是一个数组，那么用户就可以给数组中的元素命名，代码也看起来更干净了。如果useState返回一个对象，它必须与useState内部实现在解构该对象时返回的对象同名。如果要多次使用，必须设置别名才能使用返回值。让我们看看useState是否返回对象：//首先使用const{state,setState}=useState(false);//第二次使用const{state:counter,setState:setCounter}=useState(0)在这里可以看到，return对象的使用还是挺麻烦的，更何况在实际项目中会用的更频繁。总结：useState之所以返回数组而不是对象，是为了降低使用的复杂度。如果返回的是数组，直接按照顺序解构即可。如果返回一个对象，如果要多次使用它就需要定义一个别名。reactforcerefreshcomponent.forceUpdate()一个不常用的生命周期方法，它的作用是强制刷新官网解释如下默认情况下，当组件的state或props发生变化时，组件会重新渲染。如果render()方法依赖于其他数据，您可以调用forceUpdate()强制组件重新渲染。调用forceUpdate()将导致组件调用render()方法，该方法会跳过组件的shouldComponentUpdate()。但是，它的子组件会触发正常的生命周期方法，包括shouldComponentUpdate()方法。如果标记发生变化，React仍然只会更新DOM。通常，您应该避免使用forceUpdate()并在render()中使用this.props和this.state。shouldComponentUpdate已初始化，不会执行forceUpdate。React中的元素和组件有什么区别？简单地说，React中的元素（虚拟DOM）描述了你在屏幕上看到的DOM元素。换句话说，React中的元素是页面中DOM元素的对象表示。React中的组件是接受输入并返回元素的函数或类。注意：在工作中，为了提高开发效率，通常使用JSX语法来表示React元素（虚拟DOM）。在编译时，将其转换为React.createElement调用方法。哪个生命周期发送ajaxcomponentWillMount在新版本的react中已经被废弃。做ssr项目时，componentWillMount需要获取服务端数据，不能被占用。那么在componentDidMount中请求redux有什么缺点呢？一个组件需要的数据必须由父组件传递过来，而不是像influx那样直接从store中获取。当一个组件的相关数据更新时，即使父组件不需要使用这个组件，父组件仍然会重新渲染，这可能会影响效率，或者需要写复杂的shouldComponentUpdate来进行判断。根据下面定义的代码，您能找出存在的两个问题吗？请看下面的代码：答：1.构造函数中没有传递给super的props，它应该包括以下行constructor(props){super(props);//...}2.事件监听器（通过addEventListener()分配时的范围不正确，因为ES6不提供自动绑定。因此，开发人员可以在构造函数中重新分配clickHandler以包含正确的绑定：this);//...}简而言之Flux的思想Flux最大的特点就是数据的“单向流”，用户访问ViewView发出用户的ActionDispatcher接收Action请求Store相应更新Store更新后发送change事件，View收到change事件后更新页面，redux中间件提供第三方插件方式自定义拦截action的流程->reducer.Becomeaction->middlewares->reducer.这种机制允许我们改变ge数据流，实现异步action、action过滤、日志输出、异常报告等功能redux-logger：提供日志输出redux-thunk：处理异步操作Values是promises什么是Reactrefs？为什么它们很重要refs允许您直接访问DOM元素或组件实例。要使用它们，请向组件添加一个ref属性。如果此属性的值是回调函数，它将接受底层DOM元素或组件的已安装实例作为其第一个参数。它可以存储在组件中。导出类App扩展组件{showResult(){console.log(this.input.value);}render(){return((this.input=input)}/>显示结果
);}}如果属性值是一个字符串，React会将结果显示在组件实例对象的refs属性中，存储一个同名的属性，它是对这个DOM元素的引用。它可以通过本机DOMAPI进行操作。导出类App扩展组件{showResult(){console.log(this.refs.username.value);}render(){return(显示结果
);}}在Redux中使用Action需要注意哪些问题？在Redux中使用Action时，Action文件中尽量保持Action文件的纯净，传入什么数据就返回什么。请求的数据最好和Action方法分开，以保持Action的纯净。请告诉我React从EMAScript5编程规范到EMAScript6编程规范的一些变化。主要变化如下。(1)创建组件的方法不同。在EMAScript5版本中，使用React.createClass来定义组件。在EMAScript6版本中，定义一个组件需要定义一个组件类，并继承Component类。(2)定义默认属性的方法不同。在EMAScript5版本中，使用getDefaultProps定义默认属性。在EMAScript6版本中，为组件定义了defaultProps静态属性来定义默认属性。(3)定义初始化状态的方法不同。在EMAScript5版本中，使用getInitialState来定义初始化状态。在EMAScript6版本中，在构造函数中，通过this.state来定义初始化状态。注意：构造函数的第一个参数是属性数据，必须被super继承。(4)定义属性约束的方法不同。在EMAScript5版本中，propTypes用于定义属性的约束。在EMAScript6版本中，为组件定义了propsTypes静态属性来约束属性。(5)混合对象和混合类的使用方法不同。在EMAScript5版本中，混合对象的方法是通过mixins继承的。在EMAScript6版本中，定义一个混合类，让混合类继承Component类，再让组件类继承混合类，实现混合类方法的继承。(6)绑定事件的方法不同。在EMAScript5版本中，绑定的事件回调函数作用域为组件实例化对象。在EMAScript6版本中，绑定的事件回调函数作用域为null。(7)父组件的传递方法范围不同。在EMAScript5版本中，范围是父组件。在EMAScript6版本中，它变为空。(8)组件方法作用域的修改方式不同。在EMAScript5版本中，作用域不能更改。在EMAScript6版本中，作用域可以改变。React的ES6语法与ES5有何不同以下语法是ES5和ES6之间的区别：requirevs.import//ES5varReact=require('react');//ES6importReactfrom'react';exportvs.exports//ES5module.exports=Component;//ES6exportdefaultComponent;组件和函数//ES5varMyComponent=React.createClass({render:function(){returnHelloEdureka!
;}});//ES6classMyComponentextendsReact.Component{render(){return你好Edureka！
;}}props//ES5varApp=React.createClass({propTypes:{name:React.PropTypes.string},render:function(){return你好，{this.props.name}!
;}});//ES6classAppextendsReact.Component{render(){returnHello,{this.props.name}!
;}}state//ES5varApp=React.createClass({getInitialState:function(){return{name:'world'};},render:function(){return你好，{this.state.name}！
;}});//ES6classAppextendsReact.Component{constructor(){super();this.state={name:'world'};}render(){return你好，{this.state.name}!
;调用setState时，React渲染如何工作？我们可以把“render”分为两步：虚拟DOM渲染：当render方法被调用时，返回一个新组件的虚拟DOM结构当调用setState()时，render会被再次调用，因为默认shouldComponentUpdate总是返回true，所以React默认没有优化。原生DOM渲染：React只修改虚拟DOM中的真实DOM节点，修改次数很少——这是React的一个很棒的特性，优化了真实DOM的变化，让React更快。state和props有什么区别？props和state是普通的JS对象。尽管它们都包含影响渲染输出的信息，但它们在组件方面的功能不同。即state是自己管理数据的组件，控制自己的状态，是可变的；props为外部传入的数据参数，不可变；没有状态的称为无状态组件，有状态的称为有状态组件；多用props少用state，也就是多写无状态组件。
