React 前端开发 50 个基础高频面试题

12、什么是高阶组件（HOC）？

高阶组件是重用组件逻辑的高级方法，是一种源于 React 的组件模式。HOC 是自定义组件，在它之内包含另一个组件。它们可以接受子组件提供的任何动态，但不会修改或复制其输入组件中的任何行为。你可以认为 HOC 是'纯（Pure）'组件。

13、你能用 HOC 做什么？

• 1、代码重用，逻辑和引导抽象
• 2、渲染劫持
• 3、状态抽象和控制
• 4、Props 控制

14、什么是纯组件？

纯（Pure）组件是可以编写的最简单、最快的组件。它们可以替换任何只有 render() 的组件。这些组件增强了代码的简单性和应用的性能。

15、React 中 key 的重要性是什么？

key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 React 优化渲染。这些 key 必须是唯一的数字或字符串，列表元素需要一个唯一的 key 来帮助 React 识别哪些项已经改变、添加或删除。这提高了渲染列表的性能，尤其是在进行列表项的重新排序或操作时。

16、什么是 React 路由？

React 路由是一个构建在 React 之上的强大的路由库，它有助于向应用程序添加新的屏幕和流。这使 URL 与网页上显示的数据保持同步。它负责维护标准化的结构和行为，并用于开发单页 Web 应用。React 路由有一个简单的 API。

17、为什么 useState 返回的是数组而不是对象？

因为解构赋值的原因：

• 返回数组，可以对数组中的变量命名，代码看起来也比较干净。
• 返回对象，那就必须和返回的值同名，不能重复使用了。

18、如何实现 React 懒加载？

React 16.6 之后，React 提供了 React.lazy 方法来支持组件的懒加载。配合 webpack 的 code-splitting 特性，可以实现按需加载。

import React, { Suspense } from 'react'; 
const OtherComponent = React.lazy(() => import('./OtherComponent')); 
function MyComponent() { 
  return ( 
    <div> 
      <Suspense fallback={<div>Loading...</div>}> 
        <OtherComponent /> 
      </Suspense> 
    </div> 
  ); 
} 

19、React VS Vue 有何区别

0、设计理念 React: 更倾向于函数式编程思想，推崇组件的不可变性和单向数据流。Vue: 结合了响应式编程和模板系统，致力于简化开发过程。

1、组件化方式不同 React 组件包含状态和行为，所有组件共享一个状态树 Vue 每个组件都有自己的状态和行为，并且可以很容易将数据和行为绑定在一起

2、数据驱动方式不同 React 主要采用单向数据流，组件状态通过 setState 方法更新 Vue 支持双向数据绑定（使用 v-model 指令），适合于简化表单输入等场景。

3、模板语法不同 React 使用 JSX（JavaScript XML），将标记语言与 JavaScript 逻辑混写。Vue 使用基于 HTML 的模板语法，允许开发者使用纯 HTML、CSS 和 JavaScript，支持指令

4、生命周期不同 React 生命周期：初始化、更新、卸载 Vue 生命周期：创建、挂载、更新、销毁

5、状态管理方式不同 React 状态管理通常通过使用 Context API 或引入如 Redux、MobX 的库来实现。Vue 提供了 Vuex 作为官方的状态管理解决方案。

6、性能优化方式不同 React 性能优化：React.memo、shouldComponentUpdate Vue 性能优化：keep-alive、v-if

7、响应式系统 React: 通过 setState 和 useState 等 API 显式地触发 UI 更新。Vue: 通过其响应式系统自动追踪依赖并在数据变化时更新视图。

8、类型支持 React: 原生支持 JavaScript，但可以很好地与 TypeScript 结合。Vue: Vue 3 提供了更好的 TypeScript 支持。

20、React 组件直接如何通信

父组件 => 子组件：

• 1、Props
• 2、ref

子组件 => 父组件：

• 1、回调函数
• 2、事件冒泡机制
• 3、使用 useImperativeHandle 和 forwardRef，另一种方法是使用 React 的 useImperativeHandle Hook 和 forwardRef 高阶组件。

兄弟组件之间：

• 1、利用父组件通信

不相关的组件之间：

• 1、Context
• 2、全局变量
• 3、观察者模式
• 4、Redux/mobx/dva 等

21、什么是 useReducer

useReducer 是 React Hooks 中的一个函数，用于管理和更新组件的状态。它可以被视为 useState 的一种替代方案，适用于处理更复杂的状态逻辑。相比于 useState，useReducer 在处理复杂状态逻辑时更有优势，因为它允许我们将状态更新的逻辑封装在 reducer 函数中，并根据不同的动作类型执行相应的逻辑。这样可以使代码更具可读性和可维护性，并且更容易进行状态追踪和调试。

22、React 类式组件和函数式组件的区别有哪些呢？

1、语法不同、设计思想不同

函数式组件是函数式编程思想，而类组件是面向对象编程思想。面向对象编程将属性和方法封装起来，屏蔽很多细节，不利于测试。

2、生命周期、状态变量

• 类式组件：使用 state 对象定义状态变量，有诸如 componentDidMount、shouldComponentUpdate 等生命周期钩子函数；
• 函数式组件：没有 this，使用一系列的内置 hooks 实现对应的功能，比如使用 useState 创建状态变量，使用 useEffect 实现类似于 componentDidMount、shouldComponentUpdate 等生命周期钩子函数的功能。

3、复用性

• 类式组件：使用 hoc（高阶组件）、render props 实现组件的逻辑复用、拓展组件的功能。
• 函数式组件：使用自定义 hooks 实现组件的逻辑复用。注意：
• 避免在 循环/条件判断/嵌套函数 中调用 hooks，保证调用顺序的稳定；
• 不能在 useEffect 中使用 useState，React 会报错提示；
• 类组件不会被替换或废弃，不需要强制改造类组件，两种方式能并存

23、setState 是同步还是异步？

react 18 之前

• 在 Promise 的状态更新、js 原生事件、setTimeout、setInterval..中是同步的。
• 在 react 的合成事件中，是异步的。

setState 的'异步'并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的'异步'，当然可以通过第二个参数 setState(partialState, callback) 中的 callback 拿到更新后的结果。

react 18 之后 setState 都会表现为异步（即批处理）。

24、React 服务端渲染（SSR）原理？

1、node server 接收客户端请求，得到当前的请求 url 路径，然后在已有的路由表内查找到对应的组件，拿到需要请求的数据，将数据作为 props、context 或者 store 形式传入组件

2、然后基于 react 内置的服务端渲染方法 renderToString() 把组件渲染为 html 字符串在把最终的 html 进行输出前需要将数据注入到浏览器端

3、浏览器开始进行渲染和节点对比，然后执行完成组件内事件绑定和一些交互，浏览器重用了服务端输出的 html 节点，整个流程结束

25、常用的 React Hooks

• 状态钩子 (useState): 用于定义组件的 State，类似类定义中 this.state 的功能
• useReducer：用于管理复杂状态逻辑的替代方案，类似于 Redux 的 reducer。
• 生命周期钩子 (useEffect): 类定义中有许多生命周期函数，而在 React Hooks 中也提供了一个相应的函数 (useEffect)，这里可以看做 - componentDidMount、componentDidUpdate 和 componentWillUnmount 的结合。
• useLayoutEffect：与 useEffect 类似，但在浏览器完成绘制之前同步执行。
• useContext: 获取 context 对象，用于在组件树中获取和使用共享的上下文。
• useCallback: 缓存回调函数，避免传入的回调每次都是新的函数实例而导致依赖组件重新渲染，具有性能优化的效果；
• useMemo: 用于缓存传入的 props，避免依赖的组件每次都重新渲染；
• useRef: 获取组件的真实节点；用于在函数组件之间保存可变的值，并且不会引发重新渲染。
• useImperativeHandle：用于自定义暴露给父组件的实例值或方法。
• useDebugValue：用于在开发者工具中显示自定义的钩子相关标签。

26、useEffect VS useLayoutEffect

useEffect 在 React 的渲染过程中是被异步调用的，用于绝大多数场景；useLayoutEffect 会在所有的 DOM 变更之后同步调用，主要用于处理 DOM 操作、调整样式、避免页面闪烁等问题。也正因为是同步处理，所以需要避免在 useLayoutEffect 做计算量较大的耗时任务从而造成阻塞。

useEffect 是按照顺序执行代码的，改变屏幕像素之后执行（先渲染，后改变 DOM），当改变屏幕内容时可能会产生闪烁；useLayoutEffect 是改变屏幕像素之前就执行了（会推迟页面显示的事件，先改变 DOM 后渲染），不会产生闪烁。useLayoutEffect 总是比 useEffect 先执行。

27、React 中的 state 和 props 的区别

• state 是组件内部的状态，可以被组件自身管理和更改。
• props（属性） 是从父组件传递给子组件的数据，子组件不能修改接收到的 props(单向数据流)。

相同点：

• 两者都是 JavaScript 对象
• 两者都是用于保存信息
• props 和 state 都能触发渲染更新

区别：

• props 是外部传递给组件的，而 state 是在组件内被组件自己管理的，一般在 constructor 中初始化
• props 在组件内部是不可修改的，但 state 在组件内部可以进行修改
• state 是多变的、可以修改

28、React 中的虚拟 DOM 是什么

虚拟 DOM 是内存中的 DOM 表示。React 使用虚拟 DOM 来优化 DOM 的更新过程。它通过比较新旧虚拟 DOM 的差异，并仅更新实际 DOM 中改变的部分，提高应用性能。

29、React 的生命周期方法有哪些？

• 1 componentWillMount:在渲染之前执行，用于根组件中的 App 级配置。
• 2 componentDidMount:在第一次渲染之后执行可以在这里做 AJAX 请求，DOM 的操作或状态更新以及设置事件监听器。
• 3 componentWillReceiveProps:在初始代 render 的时候不会执行，它会在组件接受到新的状态 (Props）时被触发，一般用于业组件状态更新时子组件的重新渲染。
• 4 shouldComponentUpdate:确定是否更新组件。默认情况下，它返回 true。如果确定在 state 或 props 更新后组件不需要在重新渲染，则可以返回 false，这是一个提高性能的方法。
• 5 componentWillUpdate:在 shouldComponentUpdate 返回 true 确定要更新组件之前执行。
• 6 componentDidUpdate:它主要用于更新 DOM 以响应 props 或 state 更改。
• 7 componentWillUnmount:它用于取消任何的网络请求，或删除与组件关联的所有事件监听器。

30、为什么使用 React Hooks

Hooks 通常支持提取和重用跨多个组件通用的有状态逻辑，而无需承担高阶组件或渲染 props 的负担。

Hooks 可以轻松地操作函数组件的状态，而不需要将它们转换为类组件。

避免使用生命周期方法。

31、父子组件的 useEffect 哪个先执行？

先执行子组件再执行父组件。react 保证了每次运行 useEffect 的同时，DOM 都已经更新完毕。有一些场景，需要父组件的执行顺序在子组件前面，可以考虑一下使用 useLayoutEffect

32、什么是 Virtual DOM

• 1、Virtual Dom，本质上是以 JavaScript 对象形式存在的对 DOM 的描述。创建虚拟 DOM 目的就是为了更好将虚拟的节点渲染到页面视图中，虚拟 DOM 对象的节点与真实 DOM 的属性一一照应
• 2、更新更快
• 3、无法直接更新 HTML
• 4、如果元素更新，则更新 JSX
• 5、DOM 操作非常简单
• 6、很少的内存消耗

33、Virtual DOM 工作过程有三个简单的步骤：

• 1、每当底层数据发生改变时，整个 UI 都将在 Virtual DOM 描述中重新渲染。
• 2、然后计算之前 DOM 表示与新表示的之间的差异。
• 3、完成计算后，将只用实际更改的内容更新 real DOM。

34、受控组件和非受控组件的区别

受控组件 是 React 控制的组件，input 等表单输入框值不存在于 DOM 中，而是以我们的组件状态存在。每当我们想要更新值时，我们就像以前一样调用 setState。

不受控制组件 是您的表单数据由 DOM 处理，而不是 React 组件，Refs 用于获取其当前值；

35、React 18 有哪些更新

• 并发模式
• 更新 render API
• 自动批处理
• Suspense 支持 SSR
• startTransition
• useTransition
• useDeferredValue
• useId
• 提供给第三方库的 Hook

36、React 事件机制和原生 DOM 事件流有什么区别？

• react 中的事件是绑定到 document 上面的，
• 而原生的事件是绑定到 dom 上面的，
• 因此相对绑定的地方来说，dom 上的事件要优先于 document 上的事件执行

37、Redux 工作原理

Redux 是 React 的第三方状态管理库，创建于上下文 API 存在之前。它基于一个称为存储的状态容器的概念，组件可以从该容器中作为 props 接收数据。更新存储区的唯一方法是向存储区发送一个操作，该操作被传递到一个 reducer 中。reducer 接收操作和当前状态，并返回一个新状态，触发订阅的组件重新渲染。

38、React-Router 工作原理？react-router-dom 有哪些组件

• 路由器组件，路由匹配组件，导航组件
• react-router 的依赖库 history
• 1、BrowserHistory：用于支持 HTML5 历史记录 API 的现代 Web 浏览器（请参阅跨浏览器兼容性）
• 2、HashHistory：用于旧版 Web 浏览器\
• 3、MemoryHistory：用作参考实现，也可用于非 DOM 环境，如 React Native 或测试
• BrowserHistory：pushState、replaceState
• HashHistory：location.hash、location.replace

39、React 如何做到和 vue 中 keep-alive 的缓存效果

React Keep Alive 提供了 ，你必须把 放在 Provider 里面，并且每个 组件都必须拥有一个唯一的 key

40、React 有哪几种创建组件的方法

React 有三种构建组件的方式

• 1、React.createClass
• 2、ES6 class
• 3、无状态函数

41、React diff 原理

• 把树形结构按照层级分解，只比较同级元素。
• 列表结构的每个单元添加唯一的 key 属性，方便比较。
• React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字）
• 合并操作，调用 component 的 setState 方法的时候，React 将其标记为 dirty 到每一个事件循环结束，React 检查所有标记 dirty 的 component 重新绘制.
• 选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。

42、为什么虚拟 dom 会提高性能

虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。

43、useCallback 和 useMemo 的使用场景

useCallback 和 useMemo 可以用来缓存函数和变量，提高性能，减少资源浪费。但并不是所有的函数和变量都需要用这两者来实现，他也有对应的使用场景。

我们知道 useCallback 可以缓存函数体，在依赖项没有变化时，前后两次渲染时，使用的函数体是一样的。它的使用场景是：

函数作为其他 hook 的依赖项时（如在 useEffect() 中）；函数作为 React.memo()（或 shouldComponentUpdate）中的组件的 props；主要是为了避免重新生成的函数，会导致其他 hook 或组件的不必要刷新。

useMemo 用来缓存函数执行的结果。如每次渲染时都要执行一段很复杂的运算，或者一个变量需要依赖另一个变量的运算结果，就都可以使用 useMemo()。

44、为什么 JSX 中 class 变成了 className？

因为在 JavaScript 里 class 是一个关键字，用来定义类。所以在 JSX 里不能再用 class 来表示 HTML 元素的类名了，就用 className 来代替，这样就不会和 JavaScript 的关键字冲突了。

45、什么是 React Diff，对比 Vue Diff？

React DiffReact 的 Diff 算法主要是基于两个假设：不同类型的元素会产生不同的树；开发人员可以通过设置 key 属性来告知 React 哪些元素在不同的渲染之间是稳定的。在对比时，React 会对新旧虚拟 DOM 树进行深度优先遍历，分层比较节点，当发现节点类型不同时，直接替换整个子树，当节点类型相同且有 key 时，会进行更细致的比较和更新。

Vue DiffVue 的 Diff 算法在比较节点时，同样会优先判断节点类型是否相同。在处理列表时也依赖 key 属性。不过 Vue 的 Diff 算法在某些细节上与 React 有所不同，例如在静态节点和动态节点的处理上，Vue 会对静态节点进行优化，尽量减少对静态节点的重复比较。

46、react 合成事件

react 的合成事件，屏蔽了浏览器自带的事件，解决了浏览器的不兼容，

将事件绑定在 document 上，按照冒泡或者捕获的路径去收集真正的事件处理函数，在此过程中会先处理原生事件，然后当冒泡到 document 对象后 普通事件 是绑定在真实 dom 上

47、ajax 应该放在哪个生命周期？

在 React 类组件 中，ajax 请求通常放在 componentDidMount 生命周期方法中。因为这个时候组件已经挂载到 DOM 上，可以进行数据的获取操作，并且不会引起额外的渲染。

在 React Hooks 中，ajax 请求通常放在 useEffect hooks 中。

48、说一下 React Hooks 在平时开发中需要注意的问题和原因？

React Hooks 在使用时注意事项：

• 1、只能在 React 函数中使用（函数式组件或自定义 hook）。
• 2、只能在函数最外层调用 hook，不能包括在 if，for 等语句中或者子函数中。
• 3、useState 中存储的是引用类型的数据时，修改 state 时，一定要返回新的引用。

原因：

• Hooks 专为函数组件的逻辑复用而设计所以只能用在函数式组件和自定义 hooks。
• hooks 在调用的时候，需要确保先后调用顺序，一个顺序出问题，会导致整个程序的混乱。
• 如果在 useState 中存储的是引用类型，更新时不更引用地址时的话，React 会认为我们没有更新数据，则不进行组件更新。

49、请结合 React Router 实现 React 项目的路由守卫

React 实现路由拦截的基本思路还是利用 Route 的 render 函数，通过判断拦截条件来实现不同的组件的跳转，从而实现拦截

50、是否使用过 React Portals，在什么场景下使用？

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀方案。

例如：一个 Portal 的典型用例是当父组件有 overflow：hidden 或 z-index 样式时，需要子组件能够在视觉上'跳出'其容器。例如：对话框、悬浮卡以及提示框