day09面试题

说说对 React 的理解?有哪些特性?

React 是一个流行的JavaScript 前端框架，用于构建用户界面。以下是对 React 的理解和一些主要特性的介绍：

1. 组件化：React 将用户界面拆分成多个独立的组件，每个组件专注于完成特定的功能。这种组件化开发的方式使得代码更加模块化、可复用，并且易于维护。

2. 虚拟DOM：React 使用虚拟DOM（Virtual DOM）来管理视图状态和更新。虚拟DOM 是一个轻量级的 JavaScript 对象树，它映射真实的DOM结构，并且只在需要时进行高效的DOM更新，从而提高了性能。

3. 单向数据流：React 采用单向数据流的数据绑定机制，也被称为“自顶向下”或“父子传递”。数据从父组件传递到子组件，在子组件中不可直接修改父组件的数据，保证了数据的可预测性和可维护性。

4. JSX：JSX 是一种在 JavaScript 代码中嵌入 HTML 结构的语法扩展，它允许我们编写类似HTML的代码，以声明式的方式描述用户界面。React 使用 JSX 来创建组件，使得代码更加直观易懂。

5. 生命周期：React 组件具有一系列生命周期方法，包括初始化、挂载、更新和卸载等阶段。通过这些生命周期方法，我们可以在特定时机执行逻辑操作，如请求数据、处理状态变化等。

6. 状态管理：React 自带了一种状态管理的机制，称为"state"。组件的state用于存储和管理私有的、可变的数据。当状态发生改变时，React 会自动重新渲染相关组件。

7. 虚拟列表：React 提供了虚拟列表（Virtualized List）的支持，可以高效地渲染大量数据列表，只渲染可见区域内的部分元素，提升性能和用户体验。

8. 社区支持：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 组件的生命周期中，可以分为以下几个不同的阶段：

1. 挂载阶段（Mounting Phase）：

   • constructor：组件实例化时调用，用于初始化状态和绑定方法。
   • static getDerivedStateFromProps：在挂载和更新阶段都会调用，用于根据新的属性计算更新状态。
   • render：根据最新的状态和属性生成虚拟 DOM。
   • componentDidMount：组件挂载到真实 DOM 后调用，通常用于进行异步操作或获取外部数据。

2. 更新阶段（Updating Phase）：

   • static getDerivedStateFromProps：在挂载和更新阶段都会调用，用于根据新的属性计算更新状态。
   • shouldComponentUpdate：判断组件是否需要重新渲染，默认返回 true。可以通过比较前后的属性和状态来进行性能优化。
   • render：根据最新的状态和属性生成虚拟 DOM。
   • componentDidUpdate：组件完成更新后调用，通常用于处理更新后的操作，如数据请求、DOM 操作等。

3. 卸载阶段（Unmounting Phase）：

   • componentWillUnmount：组件即将从 DOM 中移除时调用，用于清理资源和取消异步操作。

4. 错误处理阶段（Error Handling Phase）：

   • static getDerivedStateFromError：在子组件抛出错误时调用，用于显示备用 UI 并更新组件状态。
   • componentDidCatch：在子组件抛出错误后调用，用于记录错误信息或发送错误报告。

除了上述方法之外，在 React 17 及以上的版本中，部分生命周期方法已被标记为废弃，并不推荐使用。详细的生命周期图谱和推荐使用的方法可以在 React 官方文档中查看。值得注意的是，React Hooks 的引入将逐渐取代类组件的生命周期方法，建议优先采用 Hooks 进行组件开发。

说说 React 中的 setState 执行机制？

在 React 中，setState 是用于更新组件状态的方法。它的执行机制可以分为以下几个步骤：

1. 合并更新：当调用 setState 时，React 会将新的状态对象合并到组件的当前状态中。这是一个浅合并，只会更新对象中改变了的属性，而不会完全替换原有的状态。
2. 准备更新：React 会将需要更新的组件标记为“待更新”。这个标记是异步的，React 会收集需要更新的组件，而不是立即更新。
3. 执行更新：React 会根据标记的组件，执行更新过程。在这个过程中，React 会比较组件之前的虚拟 DOM 树和更新后的虚拟 DOM 树，找出需要更新的部分。
4. 生成更新：根据需要更新的部分，React 会生成一系列的更新操作。这些操作描述了如何修改真实的 DOM 元素，以反映新的状态。
5. 应用更新：React 将这些更新操作应用到真实的 DOM 元素上，完成组件的更新。这个过程是高效的，只会更新需要更新的部分，而不是整个组件。
   需要注意的是，setState 是异步的，也就是说，调用它并不会立即更新组件。React 会将多个连续的 setState 调用合并成一个更新，然后批量执行更新操作，以优化性能。如果需要在 setState 后立即获取更新后的状态，可以通过传递一个回调函数作为 setState 的第二个参数来实现。

说说对 React 中类组件和函数组件的理解?有什么区别?

在 React 中，我们可以使用类组件和函数组件来创建 UI 组件。它们有一些区别和适用场景：

1. 类组件：类组件是通过继承 React 的基础 Component 类来创建的。类组件使用 ES6 的类语法，可以定义自己的状态（state）和生命周期方法。在类组件中，可以使用 render 方法来返回要渲染的 JSX 元素。
2. 函数组件：函数组件是使用纯函数的方式来创建的。函数组件仅接收一个属性对象作为输入，然后返回要渲染的 JSX 元素。函数组件没有自己的状态，也没有生命周期方法。它只是接收数据并将其渲染为 UI。
   区别：

• 语法：类组件使用类语法，而函数组件使用纯函数的方式创建。
• 状态管理：类组件可以定义自己的状态，并通过 setState 方法来更新状态。函数组件没有自己的状态，并且通常依赖于父组件传递的属性来进行渲染。
• 生命周期：类组件可以使用生命周期方法，如 componentDidMount、componentDidUpdate 等来处理组件的挂载、更新和卸载等过程。函数组件没有生命周期方法，但可以使用 useEffect 钩子来模拟一些生命周期的行为。
• 性能：由于类组件需要创建实例对象，相对而言函数组件在执行和内存占用上更加高效，因此在简单的场景下，函数组件一般比类组件更推荐使用。
  在 React 16.8 版本之后，引入了钩子（Hooks）机制，使得函数组件可以拥有状态和生命周期等特性，进一步增强了函数组件的功能。因此，函数组件在开发中的使用越来越广泛，特别是对于只需进行简单 UI 渲染的场景。