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

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

1. Js 方式

2. 根据用户权限类型，把菜单配置成 json, 没有权限的直接不显示

3. 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 组件 里面判断是否有权限，有的话返回

4. 没有权限的话 component 返回一个提示信息的组件。

5. 扩展一下，如果是根据用权限来判断是否隐藏组件该怎么做呢？

6. react 可以使用高阶组件，在高阶组件里面判断是否有权限，然后判断是否返回组件，无权限返回 null

7. 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：通过设置两个属性 propTypes 和 defaultProps

（3）状态的区别

• React.createClass：通过 getInitialState()方法返回一个包含初始值的对象

• React.Component：通过 constructor 设置初始状态

（4）this 区别

• React.createClass：会正确绑定 this

• React.Component：由于使用了 ES6，这里会有些微不同，属性并不会自动绑定到 React 类的实例上。

（5）Mixins

• React.createClass：使用 React.createClass 的话，可以在创建组件时添加一个叫做 mixins 的属性，并将可供混合的类的集合以数组的形式赋给 mixins。

• 如果使用 ES6 的方式来创建组件，那么 React mixins 的特性将不能被使用了。

React 的事件和普通的 HTML 事件有什么不同？

区别：

• 对于事件名称命名方式，原生事件为全小写，react 事件采用小驼峰；

• 对于事件函数处理语法，原生事件为字符串，react 事件为函数；

• react 事件不能采用 return false 的方式来阻止浏览器的默认行为，而必须要地明确地调用preventDefault()来阻止默认行为。

合成事件是 react 模拟原生 DOM 事件所有能力的一个事件对象，其优点如下：

• 兼容所有浏览器，更好的跨平台；

• 将事件统一存放在一个数组，避免频繁的新增与删除（垃圾回收）。

• 方便 react 统一管理和事务机制。

事件的执行顺序为原生事件先执行，合成事件后执行，合成事件会冒泡绑定到 document 上，所以尽量避免原生事件与合成事件混用，如果原生事件阻止冒泡，可能会导致合成事件不执行，因为需要冒泡到 document 上合成事件才会执行。

为什么 React 并不推荐优先考虑使用 Context？

• Context 目前还处于实验阶段，可能会在后面的发行版本中有很大的变化，事实上这种情况已经发生了，所以为了避免给今后升级带来大的影响和麻烦，不建议在 app 中使用 context。

• 尽管不建议在 app 中使用 context，但是独有组件而言，由于影响范围小于 app，如果可以做到高内聚，不破坏组件树之间的依赖关系，可以考虑使用 context

• 对于组件之间的数据通信或者状态管理，有效使用 props 或者 state 解决，然后再考虑使用第三方的成熟库进行解决，以上的方法都不是最佳的方案的时候，在考虑 context。

• 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 的对象合并，后一个

key 值会覆盖前面的 key 值

经过 React 处理的事件是不会同步更新 this.state 的. 通过 addEventListener || setTimeout/setInterval 的方式处理的则会同步更新。

为了合并 setState，我们需要一个队列来保存每次 setState 的数据，然后在一段时间后执行合并操作和更新 state，并清空这个队列，然后渲染组件。

非嵌套关系组件的通信方式？

即没有任何包含关系的组件，包括兄弟组件以及不在同一个父级中的非兄弟组件。

• 可以使用自定义事件通信（发布订阅模式）

• 可以通过 redux 等进行全局状态管理

• 如果是兄弟组件通信，可以找到这两个兄弟节点共同的父节点, 结合父子间通信方式进行通信。

参考 前端进阶面试题详细解答

为什么 useState 要使用数组而不是对象

useState 的用法：

const [count, setCount] = useState(0)

可以看到 useState 返回的是一个数组，那么为什么是返回数组而不是返回对象呢？

这里用到了解构赋值，所以先来看一下 ES6 的解构赋值：

数组的解构赋值

const foo = [1, 2, 3];const [one, two, three] = foo;console.log(one);    // 1console.log(two);    // 2console.log(three);    // 3

对象的解构赋值

const user = {  id: 888,  name: "xiaoxin"};const { id, name } = user;console.log(id);    // 888console.log(name);    // "xiaoxin"

看完这两个例子，答案应该就出来了：

• 如果 useState 返回的是数组，那么使用者可以对数组中的元素命名，代码看起来也比较干净

• 如果 useState 返回的是对象，在解构对象的时候必须要和 useState 内部实现返回的对象同名，想要使用多次的话，必须得设置别名才能使用返回值

下面来看看如果 useState 返回对象的情况：

// 第一次使用const { state, setState } = useState(false);// 第二次使用const { state: counter, setState: setCounter } = useState(0) 

这里可以看到，返回对象的使用方式还是挺麻烦的，更何况实际项目中会使用的更频繁。 总结：useState 返回的是 array 而不是 object 的原因就是为了降低使用的复杂度，返回数组的话可以直接根据顺序解构，而返回对象的话要想使用多次就需要定义别名了。

react 强制刷新

component.forceUpdate() 一个不常用的生命周期方法, 它的作用就是强制刷新

官网解释如下

默认情况下，当组件的 state 或 props 发生变化时，组件将重新渲染。如果 render() 方法依赖于其他数据，则可以调用 forceUpdate() 强制让组件重新渲染。

调用 forceUpdate() 将致使组件调用 render() 方法，此操作会跳过该组件的 shouldComponentUpdate()。但其子组件会触发正常的生命周期方法，包括 shouldComponentUpdate() 方法。如果标记发生变化，React 仍将只更新 DOM。

通常你应该避免使用 forceUpdate()，尽量在 render() 中使用 this.props 和 this.state。

shouldComponentUpdate 在初始化 和 forceUpdate 不会执行

在 React 中元素（ element）和组件（ component）有什么区别？

简单地说，在 React 中元素（虛拟 DOM）描述了你在屏幕上看到的 DOM 元素。换个说法就是，在 React 中元素是页面中 DOM 元素的对象表示方式。在 React 中组件是一个函数或一个类，它可以接受输入并返回一个元素。注意：工作中，为了提高开发效率，通常使用 JSX 语法表示 React 元素（虚拟 DOM）。在编译的时候，把它转化成一个 React. createElement 调用方法。

哪个生命周期发送 ajax

• componentWillMount 在新版本 react 中已经被废弃了

• 在做 ssr 项目时候，componentWillMount 要做服务端数据的获取，不能被占用

• 所以在 componentDidMount 中请求

redux 有什么缺点

• 一个组件所需要的数据，必须由父组件传过来，而不能像flux中直接从store取。

• 当一个组件相关数据更新时，即使父组件不需要用到这个组件，父组件还是会重新render，可能会有效率影响，或者需要写复杂的shouldComponentUpdate进行判断。

根据下面定义的代码，可以找出存在的两个问题吗 ？

请看下面的代码：

答案：1.在构造函数没有将 props 传递给 super，它应该包括以下行

constructor(props) {super(props);// ...}

2.事件监听器(通过addEventListener()分配时)的作用域不正确，因为 ES6 不提供自动绑定。因此，开发人员可以在构造函数中重新分配clickHandler来包含正确的绑定:

constructor(props) {super(props);this.clickHandler = this.clickHandler.bind(this);// ...}

简述 flux 思想

Flux 的最大特点，就是数据的"单向流动"。

• 用户访问 View
  

• View发出用户的 Action
  

• Dispatcher 收到Action，要求 Store 进行相应的更新

• Store 更新后，发出一个"change"事件

• View 收到"change"事件后，更新页面

redux 中间件

中间件提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer。这种机制可以让我们改变数据流，实现如异步action ，action 过滤，日志输出，异常报告等功能

• redux-logger：提供日志输出

• redux-thunk：处理异步操作

• redux-promise：处理异步操作，actionCreator的返回值是promise
  

什么是 React 的 refs？为什么它们很重要

refs 允许你直接访问 DOM 元素或组件实例。为了使用它们，可以向组件添加个 ref 属性。如果该属性的值是一个回调函数，它将接受底层的 DOM 元素或组件的已挂载实例作为其第一个参数。可以在组件中存储它。

export class App extends Component {  showResult() {    console.log(this.input.value);  }  render() {    return (      <div>        <input type="text" ref={(input) => (this.input = input)} />        <button onClick={this.showResult.bind(this)}>展示结果</button>      </div>    );  }}

如果该属性值是一个字符串， React 将会在组件实例化对象的 refs 属性中，存储一个同名属性，该属性是对这个 DOM 元素的引用。可以通过原生的 DOM API 操作它。

export class App extends Component {  showResult() {    console.log(this.refs.username.value);  }  render() {    return (      <div>        <input type="text" ref="username" />        <button onClick={this.showResu1t.bind(this)}>展示结果</button>      </div>    );  }}

在 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 版本中，变成了 null。（8）组件方法作用域的修改方法不同。EMAScript5 版本中，无法改变作用域。EMAScript6 版本中，作用域是可以改变的。

与 ES5 相比，React 的 ES6 语法有何不同

以下语法是 ES5 与 ES6 中的区别：

1. require 与 import

// ES5var React = require('react');
// ES6import React from 'react';

1. export 与 exports

// ES5module.exports = Component;
// ES6export default Component;

1. component 和 function

// ES5var MyComponent = React.createClass({    render: function() {        return            <h3>Hello Edureka!</h3>;    }});
// ES6class MyComponent extends React.Component {    render() {        return            <h3>Hello Edureka!</h3>;    }}

1. props

// ES5var App = React.createClass({    propTypes: { name: React.PropTypes.string },    render: function() {        return            <h3>Hello, {this.props.name}!</h3>;    }});
// ES6class App extends React.Component {    render() {        return            <h3>Hello, {this.props.name}!</h3>;    }}

1. state

// ES5var App = React.createClass({    getInitialState: function() {        return { name: 'world' };    },    render: function() {        return            <h3>Hello, {this.state.name}!</h3>;    }});
// ES6class App extends React.Component {    constructor() {        super();        this.state = { name: 'world' };    }    render() {        return            <h3>Hello, {this.state.name}!</h3>;    }}

当调用setState时，React render 是如何工作的？

咱们可以将"render"分为两个步骤：

1. 虚拟 DOM 渲染:当render方法被调用时，它返回一个新的组件的虚拟 DOM 结构。当调用setState()时，render会被再次调用，因为默认情况下shouldComponentUpdate总是返回true，所以默认情况下 React 是没有优化的。

2. 原生 DOM 渲染:React 只会在虚拟 DOM 中修改真实 DOM 节点，而且修改的次数非常少——这是很棒的 React 特性，它优化了真实 DOM 的变化，使 React 变得更快。

state 和 props 区别是啥？

props和state是普通的 JS 对象。虽然它们都包含影响渲染输出的信息，但是它们在组件方面的功能是不同的。即

• state 是组件自己管理数据，控制自己的状态，可变；

• props 是外部传入的数据参数，不可变；

• 没有state的叫做无状态组件，有state的叫做有状态组件；

• 多用 props，少用 state，也就是多写无状态组件。