滴滴前端高频 react 面试题汇总

说说 React 组件开发中关于作用域的常见问题。

在 EMAScript5 语法规范中，关于作用域的常见问题如下。（1）在 map 等方法的回调函数中，要绑定作用域 this（通过 bind 方法）。（2）父组件传递给子组件方法的作用域是父组件实例化对象，无法改变。（3）组件事件回调函数方法的作用域是组件实例化对象（绑定父组件提供的方法就是父组件实例化对象），无法改变。在 EMAScript6 语法规范中，关于作用域的常见问题如下。（1）当使用箭头函数作为 map 等方法的回调函数时，箭头函数的作用域是当前组件的实例化对象（即箭头函数的作用域是定义时的作用域），无须绑定作用域。（2）事件回调函数要绑定组件作用域。（3）父组件传递方法要绑定父组件作用域。总之，在 EMAScript6 语法规范中，组件方法的作用域是可以改变的。

什么是 React Fiber?

Fiber 是 React 16 中新的协调引擎或重新实现核心算法。它的主要目标是支持虚拟 DOM 的增量渲染。React Fiber 的目标是提高其在动画、布局、手势、暂停、中止或重用等方面的适用性，并为不同类型的更新分配优先级，以及新的并发原语。React Fiber 的目标是增强其在动画、布局和手势等领域的适用性。它的主要特性是增量渲染:能够将渲染工作分割成块，并将其分散到多个帧中。

为什么浏览器无法读取 JSX？

浏览器只能处理 JavaScript 对象，而不能读取常规 JavaScript 对象中的 JSX。所以为了使浏览器能够读取 JSX，首先，需要用像 Babel 这样的 JSX 转换器将 JSX 文件转换为 JavaScript 对象，然后再将其传给浏览器。

react 中 key 的作用

简单的说：key 是虚拟 DOM 中的一种标识，在更新显示是 key 起到了极其重要的作用

复杂的说：当状态中的数据发生改变的时候，react 会根据【新数据】生成【新的虚拟 DOM】，随后 react 进行【新虚拟 DOM】 和 【旧的虚拟 DOM】的 diff 比较，而在这个比较过程中 key 就是起到是关键中用

在调用 setState 之后发生了什么

• 状态合并，触发调和：

• setState 函数之后，会将传入的参数对象与当前的状态合并，然后出发调用过程

• 根据新的状态构建虚拟 dom 树

• 经过调和过程，react 会高效的根据新的状态构建虚拟 DOM 树，准备渲染整个 UI 页面

• 计算新老树节点差异，最小化渲染

• 得倒新的虚拟 DOM 树后，会计算出新老树的节点差异，会根据差异对界面进行最小化渲染

• 按需更新

• 在差异话计算中，react 可以相对准确的知道哪些位置发生了改变以及该如何改变，这保证按需更新，而不是宣布重新渲染

React 最新的⽣命周期是怎样的？

React 16 之后有三个⽣命周期被废弃(但并未删除)

• componentWillMount

• componentWillReceiveProps

• componentWillUpdate

官⽅计划在 17 版本完全删除这三个函数，只保留 UNSAVE_前缀的三个函数，⽬的是为了向下兼容，但是对于开发者⽽⾔应该尽量避免使⽤他们，⽽是使⽤新增的⽣命周期函数替代它们。

⽬前 React16.8+的⽣命周期分为三个阶段，分别是挂载阶段、更新阶段、卸载阶段。

挂载阶段：

• constructor：构造函数，最先被执⾏，我们通常在构造函数⾥初始化 state 对象或者给⾃定义⽅法绑定 this；

• getDerivedStateFromProps：static getDerivedStateFromProps(nextProps, prevState)，这是个静态⽅法，当我们接收到新的属性想去修改我们 state， 可以使⽤getDerivedStateFromProps

• render：render 函数是纯函数，只返回需要渲染的东⻄，不应该包含其它的业务逻辑，可以返回原⽣的 DOM、React 组件、Fragment、Portals、字符串和数字、 Boolean 和 null 等内容；

• componentDidMount：组件装载之后调⽤，此时我们可以获取到 DOM 节点并操作，⽐如对 canvas，svg 的操作，服务器请求，订阅都可以写在这个⾥⾯，但是记得在 componentWillUnmount 中取消订阅；

更新阶段：

• getDerivedStateFromProps: 此⽅法在更新个挂载阶段都可能会调⽤；

• shouldComponentUpdate：shouldComponentUpdate(nextProps, nextState)，有两个参数 nextProps 和 nextState，表示新的属性和变化之后的 state，返回⼀个布尔值，true 表示会触发重新渲染，false 表示不会触发重新渲染，默认返回 true，我们通常利⽤此⽣命周期来优化 React 程序性能；

• render：更新阶段也会触发此⽣命周期；

• getSnapshotBeforeUpdate：getSnapshotBeforeUpdate(prevProps, prevState),这个⽅法在 render 之后，componentDidUpdate 之前调⽤，有两个参数 prevProps 和 prevState，表示之前的属性和之前的 state，这个函数有⼀个返回值，会作为第三个参数传给 componentDidUpdate，如果你不想要返回值，可以返回 null，此⽣命周期必须与 componentDidUpdate 搭配使⽤；

• componentDidUpdate：componentDidUpdate(prevProps, prevState, snapshot)，该⽅法在 getSnapshotBeforeUpdate⽅法之后被调⽤，有三个参数 prevProps，prevState，snapshot，表示之前的 props，之前的 state，和 snapshot。第三个参数是 getSnapshotBeforeUpdate 返回的，如果触发某些回调函数时需要⽤到 DOM 元素的状态，则将对⽐或计算的过程迁移⾄getSnapshotBeforeUpdate，然后在 componentDidUpdate 中统⼀触发回调或更新状态。

卸载阶段:

-componentWillUnmount：当我们的组件被卸载或者销毁了就会调⽤，我们可以在这个函数⾥去清除⼀些定时器，取消⽹络请求，清理⽆效的 DOM 元素等垃圾清理⼯作。

总结：

• componentWillMount：在渲染之前执行，用于根组件中的 App 级配置；

• componentDidMount：在第一次渲染之后执行，可以在这里做 AJAX 请求，DOM 的操作或状态更新以及设置事件监听器；

• componentWillReceiveProps：在初始化 render 的时候不会执行，它会在组件接受到新的状态(Props)时被触发，一般用于父组件状态更新时子组件的重新渲染

• shouldComponentUpdate：确定是否更新组件。默认情况下，它返回 true。如果确定在 state 或 props 更新后组件不需要在重新渲染，则可以返回 false，这是一个提高性能的方法；

• componentWillUpdate：在 shouldComponentUpdate 返回 true 确定要更新组件之前件之前执行；

• componentDidUpdate：它主要用于更新 DOM 以响应 props 或 state 更改；

• componentWillUnmount：它用于取消任何的网络请求，或删除与组件关联的所有事件监听器。

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

什么是 JSX

jsx 是 javascriptML 的简写，是 react 使用的一种文件，它利用 JavaScript 的表现力和类似 HTML 的模板语法，这使得 HTML 文件非常容易理解。此文件能使应用非常可靠，并能够提高其性能 jsx 的语法规则

• 定义虚拟 DOM 的时候 不需要写引号

• 标签中要混入 js 表达式的时候需要用 {}

• 在 jsx 中写标签的类名的时候 用 className 代替 class

• 内联样式的时候 ，需要 style={{key:value}}

• 标签必须要闭合

• 标签首字母的约定

• 若为小写字母，则将 jsx 转换为 html 中同名元素，若 html 中无该标签明对应的同名元素 则报错

• 若为大写字母，react 就去渲染对应的组件，若没有定义组件 则报错

• 当根据数据遍历生成的标签，一定要给标签设置单独的 key 否则会报错

在 ReactNative 中，如何解决 adb devices 找不到连接设备的问题？

在使用 Genymotion 时，首先需要在 SDK 的 platform-tools 中加入环境变量，然后在 Genymotion 中单击 Setting，选择 ADB 选项卡，单击 Use custom Android SDK tools，浏览本地 SDK 的位置，单击 OK 按钮就可以了。启动虛拟机后，在 cmd 中输入 adb devices 可以查看设备。

react 性能优化方案

• 重写shouldComponentUpdate来避免不必要的 dom 操作

• 使用 production 版本的react.js
  

• 使用key来帮助React识别列表中所有子组件的最小变化

React 怎么做数据的检查和变化

Model改变之后（可能是调用了setState），触发了virtual dom的更新，再用diff算法来把virtual DOM比较real DOM，看看是哪个dom节点更新了，再渲染real dom

redux 与 mobx 的区别？

两者对⽐：

• redux 将数据保存在单⼀的 store 中，mobx 将数据保存在分散的多个 store 中

• redux 使⽤plain object 保存数据，需要⼿动处理变化后的操作；mobx 适⽤observable 保存数据，数据变化后⾃动处理响应的操作

• redux 使⽤不可变状态，这意味着状态是只读的，不能直接去修改它，⽽是应该返回⼀个新的状态，同时使⽤纯函数；mobx 中的状态是可变的，可以直接对其进⾏修改

mobx 相对来说⽐较简单，在其中有很多的抽象，mobx 更多的使⽤⾯向对象的编程思维；redux 会⽐较复杂，因为其中的函数式编程思想掌握起来不是那么容易，同时需要借助⼀系列的中间件来处理异步和副作⽤

• mobx 中有更多的抽象和封装，调试会⽐较困难，同时结果也难以预测；⽽redux 提供能够进⾏时间回溯的开发⼯具，同时其纯函数以及更少的抽象，让调试变得更加的容易

场景辨析：

• 基于以上区别，我们可以简单得分析⼀下两者的不同使⽤场景。

• mobx 更适合数据不复杂的应⽤：mobx 难以调试，很多状态⽆法回溯，⾯对复杂度⾼的应⽤时，往往⼒不从⼼。

• redux 适合有回溯需求的应⽤：⽐如⼀个画板应⽤、⼀个表格应⽤，很多时候需要撤销、重做等操作，由于 redux 不可变的特性，天然⽀持这些操作。

• mobx 适合短平快的项⽬：mobx 上⼿简单，样板代码少，可以很⼤程度上提⾼开发效率。

• 当然 mobx 和 redux 也并不⼀定是⾮此即彼的关系，你也可以在项⽬中⽤redux 作为全局状态管理，⽤mobx 作为组件局部状态管理器来⽤。

你对【单一数据源】有什么理解

redux 使用 store 将程序的整个状态存储在同一个地方，因此所有组件的状态都存储在 Store 中，并且它们从 Store 本身接收更新。单一状态树可以更容易地跟踪随时间的变化，并调试或检查程序

在 Reducer 文件里，对于返回的结果，要注意哪些问题？

在 Reducer 文件里，对于返回的结果，必须要使用 Object.assign ( )来复制一份新的 state，否则页面不会跟着数据刷新。

return Object.assign({}, state, {  type: action.type,  shouldNotPaint: true,});

哪些方法会触发 React 重新渲染？重新渲染 render 会做些什么？

（1）哪些方法会触发 react 重新渲染?

• setState（）方法被调用

setState 是 React 中最常用的命令，通常情况下，执行 setState 会触发 render。但是这里有个点值得关注，执行 setState 的时候不一定会重新渲染。当 setState 传入 null 时，并不会触发 render。

class App extends React.Component {  state = {    a: 1  };
  render() {    console.log("render");    return (      <React.Fragement>        <p>{this.state.a}</p>        <button          onClick={() => {            this.setState({ a: 1 }); // 这里并没有改变 a 的值          }}        >          Click me        </button>        <button onClick={() => this.setState(null)}>setState null</button>        <Child />      </React.Fragement>    );  }}

• 父组件重新渲染

只要父组件重新渲染了，即使传入子组件的 props 未发生变化，那么子组件也会重新渲染，进而触发 render

（2）重新渲染 render 会做些什么?

• 会对新旧 VNode 进行对比，也就是我们所说的 Diff 算法。

• 对新旧两棵树进行一个深度优先遍历，这样每一个节点都会一个标记，在到深度遍历的时候，每遍历到一和个节点，就把该节点和新的节点树进行对比，如果有差异就放到一个对象里面

• 遍历差异对象，根据差异的类型，根据对应对规则更新 VNode

React 的处理 render 的基本思维模式是每次一有变动就会去重新渲染整个应用。在 Virtual DOM 没有出现之前，最简单的方法就是直接调用 innerHTML。Virtual DOM 厉害的地方并不是说它比直接操作 DOM 快，而是说不管数据怎么变，都会尽量以最小的代价去更新 DOM。React 将 render 函数返回的虚拟 DOM 树与老的进行比较，从而确定 DOM 要不要更新、怎么更新。当 DOM 树很大时，遍历两棵树进行各种比对还是相当耗性能的，特别是在顶层 setState 一个微小的修改，默认会去遍历整棵树。尽管 React 使用高度优化的 Diff 算法，但是这个过程仍然会损耗性能.

redux 有什么缺点

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

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

对 React-Fiber 的理解，它解决了什么问题？

React V15 在渲染时，会递归比对 VirtualDOM 树，找出需要变动的节点，然后同步更新它们， 一气呵成。这个过程期间， React 会占据浏览器资源，这会导致用户触发的事件得不到响应，并且会导致掉帧，导致用户感觉到卡顿。

为了给用户制造一种应用很快的“假象”，不能让一个任务长期霸占着资源。 可以将浏览器的渲染、布局、绘制、资源加载(例如 HTML 解析)、事件响应、脚本执行视作操作系统的“进程”，需要通过某些调度策略合理地分配 CPU 资源，从而提高浏览器的用户响应速率, 同时兼顾任务执行效率。

所以 React 通过 Fiber 架构，让这个执行过程变成可被中断。“适时”地让出 CPU 执行权，除了可以让浏览器及时地响应用户的交互，还有其他好处:

• 分批延时对 DOM 进行操作，避免一次性操作大量 DOM 节点，可以得到更好的用户体验；

• 给浏览器一点喘息的机会，它会对代码进行编译优化（JIT）及进行热代码优化，或者对 reflow 进行修正。

核心思想: Fiber 也称协程或者纤程。它和线程并不一样，协程本身是没有并发或者并行能力的（需要配合线程），它只是一种控制流程的让出机制。让出 CPU 的执行权，让 CPU 能在这段时间执行其他的操作。渲染的过程可以被中断，可以将控制权交回浏览器，让位给高优先级的任务，浏览器空闲后再恢复渲染。

组件是什么？类是什么？类变编译成什么

• 组件指的是页面的一部分，本质就是一个类，最本质就是一个构造函数

• 类编译成构造函数

在 React 中如何避免不必要的 render？

React 基于虚拟 DOM 和高效 Diff 算法的完美配合，实现了对 DOM 最小粒度的更新。大多数情况下，React 对 DOM 的渲染效率足以业务日常。但在个别复杂业务场景下，性能问题依然会困扰我们。此时需要采取一些措施来提升运行性能，其很重要的一个方向，就是避免不必要的渲染（Render）。这里提下优化的点：

• shouldComponentUpdate 和 PureComponent

在 React 类组件中，可以利用 shouldComponentUpdate 或者 PureComponent 来减少因父组件更新而触发子组件的 render，从而达到目的。shouldComponentUpdate 来决定是否组件是否重新渲染，如果不希望组件重新渲染，返回 false 即可。

• 利用高阶组件

在函数组件中，并没有 shouldComponentUpdate 这个生命周期，可以利用高阶组件，封装一个类似 PureComponet 的功能

• 使用 React.memo

React.memo 是 React 16.6 新的一个 API，用来缓存组件的渲染，避免不必要的更新，其实也是一个高阶组件，与 PureComponent 十分类似，但不同的是， React.memo 只能用于函数组件。

在 React 中组件的 props 改变时更新组件的有哪些方法？

在一个组件传入的 props 更新时重新渲染该组件常用的方法是在componentWillReceiveProps中将新的 props 更新到组件的 state 中（这种 state 被成为派生状态（Derived State）），从而实现重新渲染。React 16.3 中还引入了一个新的钩子函数getDerivedStateFromProps来专门实现这一需求。

（1）componentWillReceiveProps（已废弃）

在 react 的 componentWillReceiveProps(nextProps)生命周期中，可以在子组件的 render 函数执行前，通过 this.props 获取旧的属性，通过 nextProps 获取新的 props，对比两次 props 是否相同，从而更新子组件自己的 state。

这样的好处是，可以将数据请求放在这里进行执行，需要传的参数则从 componentWillReceiveProps(nextProps)中获取。而不必将所有的请求都放在父组件中。于是该请求只会在该组件渲染时才会发出，从而减轻请求负担。

（2）getDerivedStateFromProps（16.3 引入）

这个生命周期函数是为了替代componentWillReceiveProps存在的，所以在需要使用componentWillReceiveProps时，就可以考虑使用getDerivedStateFromProps来进行替代。

两者的参数是不相同的，而getDerivedStateFromProps是一个静态函数，也就是这个函数不能通过 this 访问到 class 的属性，也并不推荐直接访问属性。而是应该通过参数提供的 nextProps 以及 prevState 来进行判断，根据新传入的 props 来映射到 state。

需要注意的是，如果 props 传入的内容不需要影响到你的 state，那么就需要返回一个 null，这个返回值是必须的，所以尽量将其写到函数的末尾：

static getDerivedStateFromProps(nextProps, prevState) {    const {type} = nextProps;    // 当传入的type发生变化的时候，更新state    if (type !== prevState.type) {        return {            type,        };    }    // 否则，对于state不进行任何操作    return null;}

什么是 state

• 在组件初始化的时候 通过 this.state 给组件设置一个初始化的 state，第一次 render 的时候会用 state 来渲染组件

• 通过 this.setState 方法来更新 state