React 基础面试题（二） 贼细+答案

这些是我平时翻阅+面试遇到的面试题，可能会不全，但还会继续补充！！！！！！

1、 什么是React？

React 是 Facebook 在 2011 年开发的前端 JavaScript 库。它遵循基于组件的方法，有助于构建可重用的UI组件。它用于开发复杂和交互式的 Web 和移动 UI。尽管它仅在 2015 年开源，但有一个很大的支持社区。

2、 React有什么特点？

1、生命式设计：react采用声明范式。 2、高效：react通过对DOM的模拟，最大限度减少DOM交互。 3、灵活：react可与已知的库和框架很好的配合。 4、JSX：JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。 5、组件：通过react构建组件，使得代码更加容易得到复用，能够很好应用在大项目开发中。 6、单向页面的数据流：react实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

3、 列出React的一些主要优点。

它提高了应用的性能可以方便地在客户端和服务器端使用由于 JSX，代码的可读性很好React 很容易与 Meteor，Angular 等其他框架集成使用React，编写UI测试用例变得非常容易

4、 React有哪些限制？

React的限制如下：

React 只是一个库，而不是一个完整的框架它的库非常庞大，需要时间来理解新手程序员可能很难理解编码变得复杂，因为它使用内联模板和 JSX

5、 区分Real DOM和Virtual DOM

Real DOMVirtual DOM1. 更新缓慢。1. 更新更快。2. 可以直接更新 HTML。2. 无法直接更新 HTML。3. 如果元素更新，则创建新DOM。3. 如果元素更新，则更新 JSX 。4. DOM操作代价很高。4. DOM 操作非常简单。5. 消耗的内存较多。5. 很少的内存消耗。

6、 你了解 Virtual DOM 吗？解释一下它的工作原理。

Virtual DOM 是一个轻量级的 JavaScript 对象，它最初只是 real DOM 的副本。它是一个节点树，它将元素、它们的属性和内容作为对象及其属性。 React 的渲染函数从 React 组件中创建一个节点树。然后它响应数据模型中的变化来更新该树，该变化是由用户或系统完成的各种动作引起的。

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

每当底层数据发生改变时，整个 UI 都将在 Virtual DOM 描述中重新渲染。然后计算之前 DOM 表示与新表示的之间的差异。完成计算后，将只用实际更改的内容更新 real DOM。

7、为什么虚拟 dom 会提高性能?(必考)

虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。

8、 什么是JSX，有什么特点？

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

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

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

10.React 中 keys 的作用是什么？

key是React中用于追踪哪些列表中元素被修改、删除或者被添加的辅助标识。在diff算法中，key用来判断该元素节点是被移动过来的还是新创建的元素，减少不必要的元素重复渲染。

11.React 中 refs 的作用是什么？

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

12、 列出一些应该使用 Refs 的情况。

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

需要管理焦点、选择文本或媒体播放时触发式动画与第三方 DOM 库集成

13.React 中有三种构建组件的方式

React.createClass()、ES6 class 和无状态函数。

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

代码中调用 setState 函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。

经过调和过程，React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面；在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染；在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。

15.react diff 原理（常考，大厂必考）

把树形结构按照层级分解，只比较同级元素。列表结构的每个单元添加唯一的 key 属性，方便比较。React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字）合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。

16.为什么建议传递给 setState 的参数是一个 callback 而不是一个对象

因为 this.props 和 this.state 的更新可能是异步的，不能依赖它们的值去计算下一个 state。

17.除了在构造函数中绑定 this，还有其它方式吗

你可以使用属性初始值设定项(property initializers)来正确绑定回调，create-react-app 也是默认支持的。在回调中你可以使用箭头函数，但问题是每次组件渲染时都会创建一个新的回调。

18.setState第二个参数的作用

因为setState是一个异步的过程，所以说执行完setState之后不能立刻更改state里面的值。如果需要对state数据更改监听，setState提供第二个参数，就是用来监听state里面数据的更改，当数据更改完成，调用回调函数。

19.(在构造函数中)调用 super(props) 的目的是什么

在 super() 被调用之前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调用 super()。传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。

20.简述 flux 思想

Flux 的最大特点，就是数据的"单向流动"。

用户访问 ViewView 发出用户的 ActionDispatcher 收到 Action，要求 Store 进行相应的更新Store 更新后，发出一个"change"事件View 收到"change"事件后，更新页面

21.在 React 当中 Element 和 Component 有何区别？

React Element 是描述屏幕上所见内容的数据结构，是对于 UI 的对象表述。 典型的 React Element 就是利用 JSX 构建的声明式代码片然后被转化为 createElement 的调用组合。

React Component 是一个函数或一个类，可以接收参数输入，并且返回某个 React Element

22.描述事件在 React 中的处理方式。

为了解决跨浏览器兼容性问题，您的 React 中的事件处理程序将传递 SyntheticEvent 的实例，它是 React 的浏览器本机事件的跨浏览器包装器。这些 SyntheticEvent 与您习惯的原生事件具有相同的接口，除了它们在所有浏览器中都兼容。有趣的是，React 实际上并没有将事件附加到子节点本身。React 将使用单个事件监听器监听顶层的所有事件。这对于性能是有好处的，这也意味着在更新 DOM 时，React 不需要担心跟踪事件监听器。

23.createElement 和 cloneElement 有什么区别？

React.createElement():JSX 语法就是用 React.createElement()来构建 React 元素的。

它接受三个参数，第一个参数可以是一个标签名。如 div、span，或者 React 组件。第二个参数为传入的属性。第三个以及之后的参数，皆作为组件的子组件。

React.cloneElement()与 React.createElement()相似，不同的是它传入的第一个参数是一个 React 元素，而不是标签名或组件。

新添加的属性会并入原有的属性，传入到返回的新元素中，而就的子元素奖杯替换。

24.如何告诉 React 它应该编译生产环境版本？

通常情况下我们会使用 Webpack 的 DefinePlugin 方法来将 NODE_ENV 变量值设置为 production。编译版本中 React会忽略 propType 验证以及其他的告警信息，同时还会降低代码库的大小，React 使用了 Uglify 插件来移除生产环境下不必要的注释等信息

25、React与Angular有何不同？

主题ReactAngular1. 体系结构只有 MVC 中的 View完整的 MVC2. 渲染可以在服务器端渲染客户端渲染3. DOM使用 virtual DOM使用 real DOM4. 数据绑定单向数据绑定双向数据绑定5. 调试编译时调试运行时调试6. 作者FacebookGoogle

因为题多，所以分了几篇： 第一篇（一）https://blog.csdn.net/g1437353759/article/details/109204846 第三篇（三）https://blog.csdn.net/g1437353759/article/details/109206406