前端开发面试之框架 react 的相关问题及答案

​

1. 区分 Real DOM 和 Virtual DOM

​2.你了解 Virtual DOM 吗？解释一下它的工作原理。

为什么使用虚拟 dom，因为我们要提高 dom 渲染性能，浏览器的渲染 dom 是最消耗性能的，什么是虚拟 dom，就是吧 dom 树转化为 js 对象树，虚前端培训拟 dom 创建后，根据组件的状态，父组件传来的 props，以及 redux，mobx 全局状态的更新，导致产生一个新的 js 对象树，通过 diff 比较算法，比较两个 js 对象的不同，吧比较的结果在 dom 树上渲染一下，diff 算法是逐层比较，发现相同的保留，发现新增的创建，发现没有了就删除，逐层比较吧复杂度从 3 变 1，逐层比较带来两个问题，1 两颗树结构复杂，2 兄弟节点一堆，这是算法低效，react 做了两个假设，相同的组件一定产生类似的 dom 结构，不同的节点产生不同的 dom 结构，2 兄弟节点传一个 id，唯一的 key。同一个组件他的结构是稳定的，修改状态就是改变局部，借助开发者给兄弟节点传 id，所以这两个假设成立。

Virtual DOM 工作过程有三个简单的步骤。

1.每当底层数据发生改变时，整个 UI 都将在 Virtual DOM 描述中重新渲染。

2.然后计算之前 DOM 表示与新表示的之间的差异。

3.完成计算后，将只用实际更改的内容更新 real DOM。

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

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

4. 你对 React 的 refs 有什么了解？列出一些应该使用 Refs 的情况。

Refs 是 React 中引用的简写。它是一个有助于存储对特定的 React 元素或组件的引用的属性，它将由组件渲染配置函数返回。用于对 render() 返回的特定元素或组件的引用。当需要进行 DOM 测量或向组件添加方法时，它们会派上用场。

以下是应该使用 refs 的情况：

• 需要管理焦点、选择文本或媒体播放时

• 触发式动画

• 与第三方 DOM 库集成

例子：

<input type="text" ref="myTextInput"/>

this.refs.myTextInput.focus()

5、props 与 state 的区别？

props：一般用于父组件向子组件通信，在组件之间通信使用。

state：一般用于组件内部的状态维护，更新组建内部的数据，状态，更新子组件的 props 等。

6、react 组件有哪些阶段？可以在哪个生命周期中做性能优化？

1、一个 React 组件的生命周期分为三个部分：实例化、存在期和销毁时。

2、shouldComponentUpdate：react 性能优化非常重要的一环。组件接受新的 state 或者 props 时调用，我们可以设置在此对比前后两个 props 和 state 是否相同，如果相同则返回 false 阻止更新，因为相同的属性状态一定会生成相同的 dom 树，这样就不需要创造新的 dom 树和旧的 dom 树进行 diff 算法对比，节省大量性能，尤其是在 dom 结构复杂的时候

7、react 是什么层面上的框架，数据流是单向流还是双向绑定？

react 是 view 层面的框架，数据流是单向数据流

原创作者：装下天空的沙子

​