React 工具和库面试题, 什么是 React 中类组件和函数组件?它们有什么区别?

Step 1

Q:: 什么是 React 中的类组件（Class Component）和函数组件（Function Component）？它们有什么区别？

A:: 类组件是使用 ES6 类语法创建的组件，使用 render() 方法返回 JSX。函数组件是用函数来定义的组件，直接返回 JSX。区别在于：类组件具有状态（state）和生命周期方法，而函数组件最初不具备这些特性，但自 React 16.8 引入 Hooks 之后，函数组件也能处理状态和副作用。因此，函数组件变得更简洁且更常用。

Step 2

Q:: 在什么情况下应该使用类组件而不是函数组件？

A:: 在现代开发中，函数组件几乎可以替代类组件，因为 Hooks 提供了处理状态和副作用的能力。然而，在旧代码或需要使用某些生命周期方法时（例如 componentDidCatch 或 getSnapshotBeforeUpdate），类组件可能仍然适用。

Step 3

Q:: 什么是 React 的生命周期方法？列举常见的生命周期方法。

A:: React 的生命周期方法是指在组件的不同阶段（如创建、更新、卸载）时触发的函数。常见的生命周期方法包括：componentDidMount、componentDidUpdate、componentWillUnmount、shouldComponentUpdate、componentDidCatch。这些方法通常用于处理副作用、更新 DOM 或进行清理操作。

Step 4

Q:: 什么是 React Hooks？列举几个常用的 Hooks。

A:: React Hooks 是在函数组件中使用状态和其他 React 特性的 API。常用的 Hooks 包括：useState（管理状态）、useEffect（处理副作用）、useContext（共享上下文）、useRef（引用 DOM 元素或保持不变的变量）、useReducer（用于复杂状态逻辑）。Hooks 的引入使得函数组件变得更加强大和灵活。

Step 5

Q:: 如何在 React 中管理状态？类组件和函数组件中有哪些方法？

A:: 在类组件中，使用 this.state 定义状态，this.setState 更新状态。函数组件中，使用 useState Hook 管理状态。对于更复杂的状态逻辑，类组件可以使用 setState 传递函数，函数组件则可以使用 useReducer Hook。Redux 等状态管理库也可以用于跨组件共享状态。

Step 1

Q:: 什么是 React 中的类组件和函数组件？它们有什么区别？

A:: React 中的类组件是通过扩展 React.Component 类来创建的。类组件可以使用 state 和生命周期方法，通常用于需要复杂逻辑和状态管理的组件。函数组件则是一个简单的 JavaScript 函数，它接收 props 作为参数并返回 JSX。随着 React 16.8 引入的 Hooks，函数组件也可以使用 state 和其他特性，因此函数组件现在更为推荐使用。主要区别在于类组件有构造函数和生命周期方法，而函数组件则依赖于 Hooks 来处理状态和副作用。

Step 2

Q:: 什么是 React Hooks？为什么它们如此重要？

A:: React Hooks 是 React 16.8 引入的一组特殊函数，它允许在函数组件中使用 state 和其他 React 特性。最常用的 Hooks 包括 useState、useEffect、useContext 等。Hooks 重要的原因是它们简化了组件的状态管理和副作用处理，使得函数组件的能力与类组件相当，甚至可以将复杂的逻辑提取到自定义 Hook 中复用。

Step 3

Q:: 类组件中的生命周期方法有哪些？这些方法在函数组件中如何实现？

A:: 类组件中常见的生命周期方法包括 componentDidMount、componentDidUpdate、componentWillUnmount 等，这些方法用于在组件的不同阶段执行特定操作。在函数组件中，useEffect Hook 可以实现类似的功能，它接受一个函数和依赖数组，在组件挂载、更新或卸载时执行该函数。

Step 4

Q:: 为什么函数组件现在更为推荐使用？

A:: 函数组件更为推荐使用的原因包括：代码更简洁，组件逻辑更易于理解和复用（通过自定义 Hooks），性能上有更少的开销（因为没有组件实例），以及更好地支持未来的 React 特性和优化，比如 Concurrent Mode 和 Suspense。