本文汇总了前端口试中频频问到的 `React 基础高频`口试题，口试常问的基本皆在这里。
## 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`: 缓存回调函数，幸免传入的回调每次皆是新的函数实例而导致依赖组件再行渲染，彩娱乐app具有性能优化的成果；
- `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样式时彩娱乐，需要子组件大约在视觉上“跳出”其容器。举例：对话框、悬浮卡以及领导框