React面试题

1. 什么是React组件？请解释函数组件和类组件之间的区别。

答案：

React组件是构建用户界面的可重用代码块。它们将UI拆分为独立、可管理的部分，并将每个部分进行封装、维护和重用。

函数组件是一种创建React组件的方式，它是一个JavaScript函数，接收props作为参数，并返回一个React元素。函数组件通常用于简单的UI呈现，它们没有自己的状态或生命周期方法。

类组件是另一种创建React组件的方式，它是一个继承自React.Component类的JavaScript类。类组件具有自己的状态和生命周期方法，可以处理更复杂的逻辑。类组件使用render()方法返回要呈现的UI。

区别：

• 函数组件更简洁，代码量更少，适用于简单的UI呈现。
• 类组件具有自己的状态和生命周期方法，适用于处理更复杂的逻辑和交互。

2. 什么是React的虚拟DOM（Virtual DOM）？它如何提高性能？

答案：

React的虚拟DOM是一个轻量级的JavaScript对象表示真实DOM的副本。它是React用于提高性能的关键特性。

虚拟DOM的工作原理是，当React组件的状态发生变化时，React首先在内存中构建一个新的虚拟DOM树，然后将新旧虚拟DOM树进行比较，找出差异（所谓的DOM-diff），最后只更新真正需要更改的部分到真实DOM中。

这种比较和更新的方式相比直接操作真实DOM，具有以下优点：

• 减少了直接操作真实DOM的次数，减少了浏览器的重绘和重排，从而提高了性能。
• 批量更新DOM操作，减少了更新的开销，提高了效率。
• 跨平台支持，虚拟DOM可以在不同环境中运行，如浏览器、服务器、移动应用等。

3. 什么是React的状态（state）和属性（props）？

答案：

状态（state）和属性（props）是React组件中的两个重要概念。

状态（state）是组件内部的数据存储机制，它用于跟踪组件的变化和交互。状态是可变的，当状态发生变化时，React会重新渲染组件以反映新的状态。

属性（props）是从父组件传递给子组件的数据。它们是组件之间通信和数据共享的一种方式。属性是不可变的，子组件不能直接修改父组件传递的属性，只能通过回调函数来实现间接修改。

区别：

• 状态（state）是组件内部的数据，用于管理组件的变化和交互。
• 属性（props）是父组件传递给子组件的数据，用于组件之间的通信和数据共享。

4. React组件的生命周期方法有哪些？请解释每个方法的用途。

答案：

React组件的生命周期方法是在组件不同阶段自动调用的一组方法，用于控制组件的行为和处理特定的事件。

常见的生命周期方法包括：

• componentDidMount(): 组件挂载后调用，可以进行一次性的数据获取、订阅事件等操作。
• componentDidUpdate(prevProps, prevState): 组件更新后调用，可以进行更新后的DOM操作或网络请求等。
• componentWillUnmount(): 组件卸载## 5. React中的受控组件和非受控组件有什么区别？何时使用它们？

答案：

受控组件和非受控组件是React中处理表单元素的两种方式。

受控组件是由React控制并跟踪表单元素的值和状态的组件。它们通过value属性和onChange事件处理程序来更新和获取表单元素的值。受控组件提供了更严格的数据流控制，适用于需要实时控制和验证表单输入的情况。

非受控组件是由DOM本身处理和跟踪表单元素的值和状态的组件。非受控组件通常使用ref来获取表单元素的值。它们更适合简单的表单场景，不需要严格的数据流控制。

区别：

• 受控组件由React控制并跟踪表单元素的值和状态，使用value属性和onChange事件处理程序。
• 非受控组件由DOM本身处理和跟踪表单元素的值和状态，使用ref来获取值。

使用场景：

• 受控组件适用于需要实时控制和验证表单输入的情况，或需要与其他组件的状态进行交互的复杂表单场景。
• 非受控组件适用于简单的表单场景，不需要严格的数据流控制，或与第三方库（如jQuery）集成的场景。