面试题
- [说说对 React 的理解?有哪些特性?](#说说对 React 的理解?有哪些特性?)
- [说说 Real DOM 和 Virtual DOM 的区别?优缺点?](#说说 Real DOM 和 Virtual DOM 的区别?优缺点?)
- [说说 React 生命周期有哪些不同阶段?每个阶段对应的方法是?](#说说 React 生命周期有哪些不同阶段?每个阶段对应的方法是?)
- [说说 React 中的 setState 执行机制？](#说说 React 中的 setState 执行机制？)
- [说说对 React 中类组件和函数组件的理解?有什么区别?](#说说对 React 中类组件和函数组件的理解?有什么区别?)
说说对 React 的理解?有哪些特性?
React 是一个流行的JavaScript 前端框架，用于构建用户界面。以下是对 React 的理解和一些主要特性的介绍：
-
组件化：React 将用户界面拆分成多个独立的组件，每个组件专注于完成特定的功能。这种组件化开发的方式使得代码更加模块化、可复用，并且易于维护。
-
虚拟DOM：React 使用虚拟DOM（Virtual DOM）来管理视图状态和更新。虚拟DOM 是一个轻量级的 JavaScript 对象树，它映射真实的DOM结构，并且只在需要时进行高效的DOM更新，从而提高了性能。
-
单向数据流：React 采用单向数据流的数据绑定机制，也被称为"自顶向下"或"父子传递"。数据从父组件传递到子组件，在子组件中不可直接修改父组件的数据，保证了数据的可预测性和可维护性。
-
JSX：JSX 是一种在 JavaScript 代码中嵌入 HTML 结构的语法扩展，它允许我们编写类似HTML的代码，以声明式的方式描述用户界面。React 使用 JSX 来创建组件，使得代码更加直观易懂。
-
生命周期：React 组件具有一系列生命周期方法，包括初始化、挂载、更新和卸载等阶段。通过这些生命周期方法，我们可以在特定时机执行逻辑操作，如请求数据、处理状态变化等。
-
状态管理：React 自带了一种状态管理的机制，称为"state"。组件的state用于存储和管理私有的、可变的数据。当状态发生改变时，React 会自动重新渲染相关组件。
-
虚拟列表：React 提供了虚拟列表（Virtualized List）的支持，可以高效地渲染大量数据列表，只渲染可见区域内的部分元素，提升性能和用户体验。
-
社区支持：React 拥有庞大而活跃的社区，官方和第三方提供了丰富的文档、工具和库来支持开发，从而加快了应用程序的开发速度。
总结起来，React 是一个强大而灵活的前端框架，通过组件化、虚拟DOM和单向数据流等特性，使得开发者能够高效地构建交互式、可维护和高性能的用户界面。
说说 Real DOM 和 Virtual DOM 的区别?优缺点?
Real DOM（真实DOM）和 Virtual DOM（虚拟DOM）是两种不同的概念，它们在处理页面渲染和更新方面有着明显的区别。
Real DOM：
- Real DOM 是浏览器提供的原生DOM结构，通过JavaScript操作它来更新和改变网页的内容。
- 当页面中的元素发生变化时，浏览器会重新计算整个DOM树，并进行重绘和回流，这是一个相对较耗费性能的过程。
- 每次修改DOM都会触发重新渲染，当操作频繁或DOM结构复杂时，性能会受到很大影响。
Virtual DOM：
- Virtual DOM 是React框架自己构建的虚拟DOM结构，它是由JavaScript对象模拟的轻量级副本。
- 当数据发生改变时，React首先在虚拟DOM上执行更新操作，将变更应用于虚拟DOM。
- React 会使用diff算法比较新旧虚拟DOM的差异，然后只更新必要的部分的Real DOM，最小化了DOM操作次数。
- 这种优化可以提升性能，减少浏览器的重绘和回流的开销。同时，由于JavaScript运行速度相对较快，虚拟DOM的计算和比较过程相对高效。
优点：
- 性能优化：Virtual DOM可以通过批量更新和最小化DOM操作，减少页面渲染的开销，提高整体性能。
- 开发效率：使用Virtual DOM，开发者能够以声明式的方式编写代码，专注于组件逻辑而不需要手动处理DOM更新细节，从而提高开发效率。
- 跨平台应用：由于Virtual DOM 是框架自己实现的，因此可以轻松地将React转换为其他平台上的渲染引擎，如React Native。
缺点：
- 内存消耗：虚拟DOM需要占用一定的内存来存储JavaScript对象树，相比直接操作真实DOM会有一定的内存开销。
- 初次渲染耗时：虚拟DOM需要在初次渲染时构建完整的虚拟DOM树，并进行diff算法比较，因此首次加载页面的速度可能会稍微慢一些。但是随着后续的增量更新和重用已存在的虚拟DOM，性能会得到改善。
总结起来，Real DOM 和 Virtual DOM 在页面渲染和更新方式上有明显的区别。Virtual DOM 借助JavaScript对象模拟的轻量级结构，通过优化的diff算法减少了对真实DOM的操作次数，提高了性能和开发效率，但也带来了一定的内存消耗和初始渲染耗时。
说说 React 生命周期有哪些不同阶段?每个阶段对应的方法是?
在 React 组件的生命周期中，可以分为以下几个不同的阶段：
-
挂载阶段（Mounting Phase）：
- constructor：组件实例化时调用，用于初始化状态和绑定方法。
- static getDerivedStateFromProps：在挂载和更新阶段都会调用，用于根据新的属性计算更新状态。
- render：根据最新的状态和属性生成虚拟 DOM。
- componentDidMount：组件挂载到真实 DOM 后调用，通常用于进行异步操作或获取外部数据。
-
更新阶段（Updating Phase）：
- static getDerivedStateFromProps：在挂载和更新阶段都会调用，用于根据新的属性计算更新状态。
- shouldComponentUpdate：判断组件是否需要重新渲染，默认返回 true。可以通过比较前后的属性和状态来进行性能优化。
- render：根据最新的状态和属性生成虚拟 DOM。
- componentDidUpdate：组件完成更新后调用，通常用于处理更新后的操作，如数据请求、DOM 操作等。
-
卸载阶段（Unmounting Phase）：
- componentWillUnmount：组件即将从 DOM 中移除时调用，用于清理资源和取消异步操作。
-
错误处理阶段（Error Handling Phase）：
- static getDerivedStateFromError：在子组件抛出错误时调用，用于显示备用 UI 并更新组件状态。
- componentDidCatch：在子组件抛出错误后调用，用于记录错误信息或发送错误报告。
除了上述方法之外，在 React 17 及以上的版本中，部分生命周期方法已被标记为废弃，并不推荐使用。详细的生命周期图谱和推荐使用的方法可以在 React 官方文档中查看。值得注意的是，React Hooks 的引入将逐渐取代类组件的生命周期方法，建议优先采用 Hooks 进行组件开发。
说说 React 中的 setState 执行机制？
在 React 中，setState 是用于更新组件状态的方法。它的执行机制可以分为以下几个步骤：
- 合并更新：当调用
setState时，React 会将新的状态对象合并到组件的当前状态中。这是一个浅合并，只会更新对象中改变了的属性，而不会完全替换原有的状态。 - 准备更新：React 会将需要更新的组件标记为"待更新"。这个标记是异步的，React 会收集需要更新的组件，而不是立即更新。
- 执行更新：React 会根据标记的组件，执行更新过程。在这个过程中，React 会比较组件之前的虚拟 DOM 树和更新后的虚拟 DOM 树，找出需要更新的部分。
- 生成更新：根据需要更新的部分，React 会生成一系列的更新操作。这些操作描述了如何修改真实的 DOM 元素，以反映新的状态。
- 应用更新：React 将这些更新操作应用到真实的 DOM 元素上，完成组件的更新。这个过程是高效的，只会更新需要更新的部分，而不是整个组件。
需要注意的是，setState是异步的，也就是说，调用它并不会立即更新组件。React 会将多个连续的setState调用合并成一个更新，然后批量执行更新操作，以优化性能。如果需要在setState后立即获取更新后的状态，可以通过传递一个回调函数作为setState的第二个参数来实现。
说说对 React 中类组件和函数组件的理解?有什么区别?
在 React 中，我们可以使用类组件和函数组件来创建 UI 组件。它们有一些区别和适用场景：
- 类组件：类组件是通过继承 React 的基础
Component类来创建的。类组件使用 ES6 的类语法，可以定义自己的状态（state）和生命周期方法。在类组件中，可以使用render方法来返回要渲染的 JSX 元素。 - 函数组件：函数组件是使用纯函数的方式来创建的。函数组件仅接收一个属性对象作为输入，然后返回要渲染的 JSX 元素。函数组件没有自己的状态，也没有生命周期方法。它只是接收数据并将其渲染为 UI。
区别：
- 语法：类组件使用类语法，而函数组件使用纯函数的方式创建。
- 状态管理：类组件可以定义自己的状态，并通过
setState方法来更新状态。函数组件没有自己的状态，并且通常依赖于父组件传递的属性来进行渲染。 - 生命周期：类组件可以使用生命周期方法，如
componentDidMount、componentDidUpdate等来处理组件的挂载、更新和卸载等过程。函数组件没有生命周期方法，但可以使用useEffect钩子来模拟一些生命周期的行为。 - 性能：由于类组件需要创建实例对象，相对而言函数组件在执行和内存占用上更加高效，因此在简单的场景下，函数组件一般比类组件更推荐使用。
在 React 16.8 版本之后，引入了钩子（Hooks）机制，使得函数组件可以拥有状态和生命周期等特性，进一步增强了函数组件的功能。因此，函数组件在开发中的使用越来越广泛，特别是对于只需进行简单 UI 渲染的场景。