2024前端高频面试题之-- react篇

【前端面试复习系列文章】

2024前端高频面试题-- html篇

2024前端高频面试题-- CSS篇

2024前端高频面试题-- JS篇

2024前端高频面试题-- VUE篇

2024前端高频面试题-- 前端工程化篇

2024前端高频面试题-- HTTP和浏览器篇

2024前端高频面试题-- 手写代码篇

2024前端高频面试题-- 数据结构与算法篇

【导读】本文总结了前端面试中经常问到的react高频面试题，仅供参考。

下图为思维导图：

1.React18有哪些更新？

• 并发模式

• 更新 render API

• 自动批处理

• Suspense 支持 SSR

• startTransition

• useTransition

• useDeferredValue

• useId

• 提供给第三方库的 Hook

2. JSX是什么，它和JS有什么区别

JSX 是 JavaScript 语法的扩展，它允许编写类似于 HTML 的代码。它可以编译为常规的 JavaScript 函数调用，从而为创建组件标记提供了一种更好的方法。

JSX代码如下：

<div className="sidebar" />

它转换为以下JS代码：

React.createElement(
  'div',
  {className: 'sidebar'}
)

• JSX 简介
• 深入理解 JSX

3.简述React的生命周期

React 的生命周期主要分为三个阶段：MOUNTING、RECEIVE_PROPS、UNMOUNTING

• 组件挂载时（组件状态的初始化，读取初始 state 和 props 以及两个生命周期方法，只会在初始化时运行一次）

  • componentWillMount 会在 render 之前调用（在此调用 setState，是不会触发 re-render 的，而是会进行 state 的合并。因此此时的 this.state 不是最新的，在 render 中才可以获取更新后的 this.state。）
  • componentDidMount 会在 render 之后调用

• 组件更新时（组件的更新过程是指父组件向下传递 props 或者组件自身执行 setState 方法时发生的一系列更新的动作）

  • 组件自身的 state 更新，依次执行

    • shouldComponentUpdate（会接收需要更新的 props 和 state，让开发者增加必要的判断条件，在其需要的时候更新，不需要的时候不更新。如果返回的是 false，那么组件就不再向下执行生命周期方法。）
    • componentWillUpdate
    • re