前端常见面试题汇总（react篇）

基础知识

1. React是什么？
   • React是一个用于构建用户界面的JavaScript库。
2. React和Angular、Vue有什么区别？
   • React专注于UI组件化，数据流动单向，需配合其他库（如Redux）进行状态管理；Angular是完整的前端框架，提供一站式解决方案；Vue则是轻量级框架，易于上手且性能优良。
3. React中的元素和组件有什么区别？
   • 元素是React中最小构建块，不可变；组件是函数或类，接收输入并返回React元素树。

组件

4. React组件有哪些类型？
   • 函数组件和类组件。
5. 函数组件和类组件的区别是什么？
   • 函数组件更简洁，没有生命周期方法；类组件支持更多特性，如状态管理和生命周期钩子。
6. 什么是无状态组件（Functional Component）？
   • 无状态组件是只接收props并返回JSX的函数，不管理内部状态。
7. 什么是受控组件和非受控组件？
   • 受控组件的表单数据由React组件的状态管理；非受控组件的表单数据由DOM本身管理。

生命周期

8. React类组件有哪些生命周期方法？
   • 挂载阶段：constructor, componentWillMount, render, componentDidMount；更新阶段：componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, render, componentDidUpdate；卸载阶段：componentWillUnmount。
9. React 16.3以后的生命周期方法有哪些变化？
   • 引入了getDerivedStateFromProps, getSnapshotBeforeUpdate和componentDidCatch，同时部分方法（如componentWillMount, componentWillReceiveProps, componentWillUpdate）被视为不安全，被新的生命周期方法替代或建议避免使用。

状态管理

10. React中的状态是什么？如何管理状态？
    • 状态是组件内部的私有数据，可以通过this.state在类组件中管理，或在函数组件中使用React Hooks（如useState）管理。
11. 什么是Redux？它如何与React结合使用？
    • Redux是一个用于管理JavaScript应用的可预测状态容器，可与React结合使用，通过Provider和connect等方法将Redux store中的状态映射到React组件的props中。

Hooks

12. 什么是React Hooks？
    • Hooks是React 16.8引入的新特性，允许你在不编写class的情况下使用state以及其他的React特性。
13. 常见的React Hooks有哪些？
    • useState, useEffect, useContext, useReducer, useCallback, useMemo等。
14. useState和useContext的区别是什么？
    • useState用于在函数组件中添加局部状态；useContext用于在组件树之间共享值，类似于将变量值“放入”全局作用域中，使得任何组件都可以读取它，无需显式地通过每一层组件传递props。

性能优化

15. React中如何进行性能优化？
    • 使用shouldComponentUpdate或React.memo进行浅比较，避免不必要的渲染；使用React.lazy和Suspense进行代码分割和懒加载；利用useCallback和useMemo避免不必要的计算和渲染；优化列表渲染，如使用虚拟化技术。

错误处理

16. React中如何进行错误处理？
    • 使用Error Boundaries组件来捕获并打印JavaScript错误，并阻止它们冒泡至更高层。

Context

17. React中的Context是什么？
    • Context提供了一种在组件之间共享值的方式，而不必显式地通过每一层组件传递props。

Refs

18. React中的Refs是什么？它们如何工作？
    • Refs提供了一种方式，允许我们访问DOM节点或在render方法中创建的React元素。

高阶组件（HOC）

19. 什么是高阶组件？
    • 高阶组件是接受一个组件并返回一个新组件的函数。

路由

20. React中如何实现路由？
    • 可以使用React Router库来实现路由功能，它提供了BrowserRouter、Route、Link等组件和API。

服务端渲染（SSR）

21. React如何进行服务端渲染？
    • 可以使用Next.js或Gatsby等框架来实现React的服务端渲染，它们提供了内置的服务端渲染支持和优化。