本文汇总了前端口试中平素问到的 `React 基础高频`口试题泷川雅美ed2k，口试常问的基本王人在这里。

## 1、什么是React？

用于构建用户界面的 JavaScript 库，提供了 UI 层面的管制决议，受命组件想象模式、声明式编程范式和函数式编程想法，以使前端应用范例更高效，使用诬捏DOM来灵验地操作DOM，受命从高阶组件到低阶组件的单向数据流，匡助咱们将界面成了各个寥寂的小块，每一个块即是组件，这些组件之间不错组合、嵌套，组成合座页面.

## 2、React有什么特质？

- 1.它使用诬捏DOM 而不是实在的DOM。

- 2.它不错进行干事器端渲染。

- 3.它受命单向数据流或数据绑定。

- 4.JSX语法

- 5.声明式编程

- 6.Component(组件化)

## 3、列出React的一些主要优点。

- 1、组件式开发，陶冶代码复用率

- 2、不错简易地在客户端和干事器端使用

- 3、由于 JSX，代码的可读性很好

- 4、React 很容易与 Meteor，Angular 等其他框架集成

- 5、使用React，编写UI测试用例变得特殊容易

- 6、单向反映的数据流会比双向绑定的更安全，速率更快

## 4、React有哪些驱逐？

- 1、React 仅仅一个库，而不是一个竣工的框架

- 2、它的库特殊宏大，需要时分来领路

- 3、生人范例员可能很难领路

- 4、编码变得复杂，因为它使用内联模板和 JSX

## 5、什么是JSX？

JSX 是JavaScript XML 的简写。是 React 使用的一种文献，它运用 JavaScript 的发扬力和类似 HTML 的模板语法。这使得 HTML 文献特殊容易领路。此文献能使应用特殊可靠，并随机陶冶其性能（说白了即是不错在 js 中写 html）。

## 6、为什么浏览器无法读取JSX？

浏览器只可处理 JavaScript 对象，而不可读取成例 JavaScript 对象中的 JSX。是以为了使浏览器随机读取 JSX，最初，需要用像 Babel 这么的 JSX 退换器将 JSX 文献退换为 JavaScript 对象，然后再将其传给浏览器。

## 7、React中的组件是什么？

组件是React应用的构建块。它们是寥寂且可重用的代码片断，用于界说UI的一部分。组件不错是类组件或函数组件，况兼不错防止我方的景况和人命周期。

## 8、若何解说 React 中 render() 的指标。

每个React组件强制要求必须有一个 render()。它复返一个 React 元素，是原生 DOM 组件的示意。如果需要渲染多个 HTML 元素，则必须将它们组合在一个阻滞符号内，举例 `、、

` 等。此函数必须保握白净，即必须每次调用时王人复返相通的驱逐。

## 9、什么是 Props?

Props 是 React 中属性的简写。它们是只读组件，必须保握纯，即不可变。它们老是在悉数这个词应用中从父组件传递到子组件。子组件遥远不可将 prop 送回父组件。这有助于防止单向数据流，平素用于呈现动态生成的数据。

## 10、React中的景况是什么？它是如何使用的？

景况是 React 组件的中枢，是数据的开始，必须尽可能纯粹。基本上景况是详情组件呈现和行动的对象。与props 不同，它们是可变的，并创建动态和交互式组件。不错通过 this.state() 窥察它们。

## 11、 React 中的箭头函数是什么？使用箭头函数的公道？

箭头函数（=>）是用于编写函数抒发式的省略语法。这些函数允许正确绑定组件的落魄文，因为在 ES6 中默许下不可使用自动绑定。使用高阶函数时，箭头函数特殊有用。

公道：

- （1）语法直快：箭头函数的语法比传统的函数声明或函数抒发式更直快。

- （2）不绑定 this：箭头函数不会创建我方的 this 值。在箭头函数里面，this 与阻滞 词法环境的 this 值相通。这管制了在事件处理器和回调函数中使用 this 的问题。

- （3）不绑定 arguments：箭头函数不会创建我方的 arguments 对象。它会从阻滞 的词法环境中赢得 arguments。

- （4）不不错作为构造函数：箭头函数不可用作构造函数，不可使用 new 要津字。

莫得 prototype 属性：由于箭头函数不可用作构造函数，是以它也莫得 prototype 属性。

- （5）不撑握 yield 要津字：箭头函数不可用作生成器函数。

总的来说，箭头函数提供了一种更直快、更简易的函数语法，绝顶允洽用于那些需要匿名函数的场景。

## 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 (

<Suspense fallback={

Loading...

}>

);

}

```

## 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对象界说景况变量，有诸如componmentDidMount、shouldComponentUpdate等人命周期钩子函数；

- 函数式组件：莫得this，使用一系列的内置hooks终了对应的功能，比如使用useState创建景况变量，使用useEffect终了类似于componmentDidMount、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、父子组件的useEffec哪个先推论？

先推论子组件再推论父组件。react保证了每次运行useffect的同期，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 Diff`

React 的 Diff 算法主如果基于两个假定：不同类型的元素会产生不同的树；开发东说念主员不错通过开采key属性来示知 React 哪些元素在不同的渲染之间是结实的。在对比时，React 会对新旧诬捏 DOM 树进行深度优先遍历，分层比较节点，当发现节点类型不同期，径直替换悉数这个词子树，当节点类型相通且有key时，会进行更密致的比较和更新。

`Vue Diff`#深度好文筹商#

Vue 的 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口头时泷川雅美ed2k，需要子组件随机在视觉上“跳出”其容器。举例：对话框、悬浮卡以及教唆框