“我正在参加「掘金·启航计划」”

前言

又到一年求职季，金九银十，无论是应届生找实习参加秋招，还是打工人跳槽，都少不了面试。好好准备面试有利于收获心仪的offer。这里给大家整理了一份新鲜出炉的React面试题，这份React面试题请你收下嚼碎了服用，并成为自己身上的骨肉。保熟！

1.请简述你对 react 的理解

React 起源于 facebook，react 是一个用于构建用户界面的 js 库

特点：

声明式设计：react 采用范式声明，开发者只需要声明显示内容，react就会自动完成

高效： react 通过对 dom 的模拟（也就是虚拟 dom），最大限度的减少与 dom 的交互

灵活： react 可以和已知的库或者框架很好配合

组件： 通过 react 构建组件，让代码更容易复用，能够很好应用在大型项目开发中，把页面功能拆分成小模块 每个小模块就是组件

单向数据流： react 是单向数据流，数据通过 props 从父节点传递到子节点，如果父级的某个 props 改变了，react 会重新渲染所有的子节点

2.react 组件之间的数据传递

正向传值用 props

逆向传值用函数传值 通过事件调用函数传递

同级传值用 pubsub-js

用 pubsub.publish（事件名，数据）抛出数据

用 pubsub.subscribe（监听的事件，（）=）{}）接收数据

跨组件传递 用 context 要使用 context 进行跨组件传值就需要使用

createContext() 方 法 ，这个方法有两个对象：provider生产者、 Consumer 消费者

3.React 事件处理---修改 this 指向

方式 1：通过 bind 方法进行原地绑定，从而改变 this 指向

方式 2：通过创建箭头函数

方式 3：在 constructor 中提前对事件进行绑定

方式 4：将事件调用的写法改为箭头函数的形式

4.Vue 与 react 区别

相同点：

都支持服务器渲染

都有虚拟 dom，组件化开发，通过 props 参数进行父子组件数据的传递，

都实现 webcomponent 规范

都是数据驱动视图

都有状态管理，react 有 redux，vue 有 vuex

都有支持 native’的方案 react 有 react native vue 有 weex

不同点：

react 严格上只针对 mvc 的 view 层，vue 是 mvvm 模式

虚拟 dom 不一样，vue 会跟踪每一个组件的依赖关系，不需要重新渲染整个 dom 组件树，而 react 不同，当应用的状态被改变时，全部组件都会重新渲染，所以 react 中用 shouldcomponentupdate 这个生命周期 的钩子函数来控制

组件写法不一样 ，react 是 jsx 和 inline style ，就是把 html 和 css 全写进 js 中，vue 则是 html，css ，js 在同一个文件

数据绑定不一样，vue 实现了数据双向绑定，react 数据流动是单向的在 react 中，state 对象需要用 setstate 方法更新状态，在 vue 中，state对象不是必须的，数据由 data 属性在 vue 对象中管理

5.请简述虚拟 dom 与 diff 算法

虚拟DOM：也就是常说的虚拟节点，它是通过js的object对象模拟DOM中的节点，然后再通过特定的渲染方法将其渲染成真实的 DOM 节点。 频繁的操作 DOM，或大量造成页面的重绘和回流

Diff 算法：把树形结构按照层级分解，只比较同级元素，给列表结构的每个单元添加唯一的 key 值，方便比较

6.调用 setState 之后发生了什么？

React 在调用 setstate 后，react 会将传入的参数对象和组件当前的状态合并，触发调和过程，在调和过程中，react 会根据新的状态构建 react 元素树重新渲染整个UI 界面，在得到元素树之后，react 会自动计算新老节点的差异，根据差异对界面进行最小化重新渲染

7.为什么虚拟 dom 会提高性能?

虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能

8.(组件的)状态(state)和属性(props)之间有何不同

State 与 props 区别

Props 是一个从外部传进组件的参数，主要作用就是父组件向子组件传递数据，但是 props 对于使用它的组件来说是只读的，一旦赋值不能修改，只能通过外部组件主动传入新的 props 来重新渲染子组件

State 一个组件的显示形态可以由数据状态和外部参数决定，外部参数是props，数据状态就是 state，首先，在组件初始化的时候，用 this.state给组件设定一个初始的 state，在第一次渲染的时候就会用这个数据来渲染组件，state 不同于 props 一点时，state 可以修改，通过 this.setState()方法来修改 state

9.shouldComponentUpdate 是做什么的

这个 react 生命周期钩子函数是来解决这个问题：

在更新数据的时候用 setState 修改整个数据，数据变了之后，遍历的时候所有内容都要被重新渲染，数据量少还好，数据量大就会严重影响性能

解决办法：

1.shouldcomponentupdate 在渲染前进行判断组件是否更新，更新了再渲染

2.purecomponent（纯组件）省去了虚拟 dom 生成和对比的过程 在类组件中使用

3.react.memo() 类似于纯组件 在无状态组件中使用

10.react diff 原理

它是基于三个策略：

tree diff web UI 中 dom 节点跨层级的移动操作特别少，可以忽略不计

component diff 拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件会生成不同的树形结构

element diff 对于同一层级的一组子节点，他们可以通过唯一的 id 进行区分

11.应该在 React 组件的何处发起 Ajax 请求？

在 React 组件中，应该在 componentDidMount 中发起网络请求。这个方法会在组件第一次“挂载”(被添加到 DOM)时执行，在组件的生命周期中仅会执行一次。更重要的是，你不能保证在组件挂载之前 Ajax 请求已经完成，如果是这样，也就意味着你将尝试在一个未挂载的组件上调用 setState，这将不起作用。在componentDidMount 中发起网络请求将保证这有一个组件可以更新了。

12.何为高阶组件(higher order component)？

高阶组件是一个以组件为参数并返回一个新组件的函数。HOC运行你重用代码、逻辑和引导抽象。最常见的可能是 Redux 的connect 函数。除了简单分享工具库和简单的组合，HOC 最好的方式是共享 React 组件之间的行为。如果你发现你在不同的地方写了大量代码来做同一件事时，就应该考虑将代码重构为可重用的 HOC。

结尾

看到这里，文章就已经结束了。相信这篇文章能够让你从容面对面试，对React里面常见的面试题可以信手拈来、如鱼得水，希望这篇文章能在学习、工作或者面试带给你一点点帮助。后续也会出更多关于前端的、有意思的内容，大家可以期待一下。