前端开发面试之框架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层面的框架，数据流是单向数据流

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