2024年React常见的面试题以及答案(持续更新中

• 虚拟DOM

• 声明式编程

• Component(组件化)

优势

• 高效灵活

• 声明式的设计，简单使用

• 组件式开发，提高代码复用率

• 单向响应的数据流会比双向绑定的更安全，速度更快

区分Real DOM和Virtual DOM

=====================================================================================

Real DOM

• Real DOM，真实DOM， 意思为文档对象模型，是一个结构化文本的抽象，在页面渲染出的每一个结点都是一个真实DOM结构

• 更新缓慢

• 可以直接更新 HTML

• 如果元素更新，则创建新DOM

• DOM操作代价很高

• 消耗的内存较多

Virtual DOM

• Virtual Dom，本质上是以 JavaScript 对象形式存在的对 DOM 的描述。创建虚拟DOM目的就是为了更好将虚拟的节点渲染到页面视图中，虚拟DOM对象的节点与真实DOM的属性一一照应

• 更新更快

• 无法直接更新 HTML

• 如果元素更新，则更新 JSX

• DOM 操作非常简单

• 很少的内存消耗

什么是JSX和它的特性？

===========================================================================

JSX 是JavaScript XML的缩写，不是html或xml，基于ECMAScript的一种新特性，一种定义带属性树结构的语法；

特性：

• 自定义组件名首字母大写

• 嵌套；在render函数中return返回的只能包含一个顶层标签，否则也会报错。

• 求值表达式；JSX基本语法规则，遇到HTML标签（以<开头），就用HTML规则解析；遇到代码块（以{开头），就用JS规则解析

• 驼峰命名

• class属性需要写成className

• JSX允许直接在模板插入JS变量。如果这个变量是一个数组，则会展开这个数组的所有成员

• 在JSX中插入用户输入是安全的，默认情况下ReactDOM会在渲染前，转义JSX中的任意值，渲染前，所有的值都被转化为字符串形式，这能预防XSS攻击。

类组件和函数组件之间有什么区别？

===============================================================================

类组件：

• 无论是使用函数或是类来声明一个组件，它决不能修改它自己的 props。

• 所有 React 组件都必须是纯函数，并禁止修改其自身 props。

• React是单项数据流，父组件改变了属性，那么子组件视图会更新。

• 属性 props是外界传递过来的，状态 state是组件本身的，状态可以在组件中任意修改

• 组件的属性和状态改变都会更新视图。

函数组件：

• 函数组件接收一个单一的 props 对象并返回了一个React元素

• 函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。

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

===========================================================================================

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

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

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

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

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

说说对 State 和 Props的理解，有什么区别？

==========================================================================================

State

• 一个组件的显示形态可以由数据状态和外部参数所决定，而数据状态就是state，一般在 constructor 中初始化

• 当需要修改里面的值的状态需要通过调用setState来改变，从而达到更新组件内部数据的作用，并且重新调用组件render方法

• setState还可以接受第二个参数，它是一个函数，会在setState调用完成并且组件开始重新渲染时被调用，可以用来监听渲染是否完成

Props

• React的核心思想就是组件化思想，页面会被切分成一些独立的、可复用的组件，组件从概念上看就是一个函数，可以接受一个参数作为输入值，这个参数就是