React 基础面试题, React 中有几种构建组件的方式?它们的区别是什么?

Step 1

Q:: React 中有几种构建组件的方式？它们的区别是什么？

A:: React 中主要有两种构建组件的方式：函数式组件（Function Component）和类组件（Class Component）。

1. 函数式组件（Function Component）：这种方式通过一个 JavaScript 函数来定义组件，该函数返回 JSX。函数式组件从 React 16.8 开始支持 React Hooks，可以在函数组件中使用 state 和其他 React 功能。

2. 类组件（Class Component）：通过 ES6 的 class 语法来定义，类组件继承自 React.Component，并且必须实现一个 render() 方法，该方法返回 JSX。类组件可以使用生命周期方法和 state。

两者的区别在于： - 类组件有更多的生命周期方法，但通常比函数组件更复杂。 - 函数组件更轻量、简洁，并且自 React 16.8 后通过 Hooks 提供了与类组件相似的功能。

Step 2

Q:: React Hooks 是什么？它们解决了什么问题？

A:: React Hooks 是 React 16.8 引入的一种新特性，允许在函数组件中使用 state 和其他 React 特性，而无需编写类组件。Hooks 解决了函数组件中无法使用 state 和生命周期方法的问题，同时通过 useEffect、useState 等内置 Hook，简化了代码结构，使得代码更易于理解和维护。

Step 3

Q:: React 中的虚拟DOM（Virtual DOM）是什么？它如何提高性能？

A:: 虚拟DOM 是 React 中用于提高性能的一种技术，它是 React 中对真实 DOM 的一种轻量级表示形式。React 通过虚拟DOM 来追踪元素的变化，然后通过 Diff 算法对比新旧虚拟DOM，找到最小的变更路径，再将这些变更应用到真实 DOM 上。这样可以减少直接操作真实 DOM 的次数，显著提升应用的性能。

Step 4

Q:: React 中的生命周期方法是什么？它们的作用是什么？

A:: 生命周期方法是类组件特有的特性，允许开发者在组件的不同阶段执行代码。React 生命周期方法主要分为三类：

1. 挂载（Mounting）：组件第一次渲染时调用，如 componentDidMount。 2. 更新（Updating）：组件更新时调用，如 componentDidUpdate。 3. 卸载（Unmounting）：组件从 DOM 中移除时调用，如 componentWillUnmount。

这些方法的作用是处理副作用、获取数据、设置定时器等。