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

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

Js方式
根据用户权限类型，把菜单配置成json, 没有权限的直接不显示
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);
         }
      }
    }}>

自己封装一个privateRouter组件里面判断是否有权限，有的话返回

没有权限的话component 返回一个提示信息的组件。
扩展一下，如果是根据用权限来判断是否隐藏组件该怎么做呢？
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：通过设置两个属性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);    // 1
console.log(two);    // 2
console.log(three);    // 3

对象的解构赋值

const user = {
    
    
  id: 888,
  name: "xiaoxin"
};
const {
    
     id, name } = user;
console.log(id);    // 888
console.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 中的区别：

require 与 import

// ES5
var React = require('react');

// ES6
import React from 'react';

export 与 exports

// ES5
module.exports = Component;

// ES6
export default Component;

component 和 function

// ES5
var MyComponent = React.createClass({
    
    
    render: function() {
    
    
        return
            <h3>Hello Edureka!</h3>;
    }
});

// ES6
class MyComponent extends React.Component {
    
    
    render() {
    
    
        return
            <h3>Hello Edureka!</h3>;
    }
}

props

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

// ES6
class App extends React.Component {
    
    
    render() {
    
    
        return
            <h3>Hello, {
    
    this.props.name}!</h3>;
    }
}

state

// ES5
var App = React.createClass({
    
    
    getInitialState: function() {
    
    
        return {
    
     name: 'world' };
    },
    render: function() {
    
    
        return
            <h3>Hello, {
    
    this.state.name}!</h3>;
    }
});

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

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

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

虚拟 DOM 渲染:当render方法被调用时，它返回一个新的组件的虚拟 DOM 结构。当调用setState()时，render会被再次调用，因为默认情况下shouldComponentUpdate总是返回true，所以默认情况下 React 是没有优化的。
原生 DOM 渲染:React 只会在虚拟DOM中修改真实DOM节点，而且修改的次数非常少——这是很棒的React特性，它优化了真实DOM的变化，使React变得更快。

state 和 props 区别是啥？

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

state 是组件自己管理数据，控制自己的状态，可变；
props 是外部传入的数据参数，不可变；
没有state的叫做无状态组件，有state的叫做有状态组件；
多用 props，少用 state，也就是多写无状态组件。