超硬核超全前端react面试题（轻松了解框架）

• 1.什么是虚拟dom?虚拟dom和真是dom区别？虚拟dom的工作原理？
• • • 区别
    • 工作原理
• 2.什么是diff算法？
• 3.类组件和函数组件之间有什么区别？
• 4.react中的refs的作用是什么？如何创建refs? refs使用场景？
• • • refs作用
    • 如何创建：
    • 使用场景：
• 5.react的事件处理？
• 6.react的生命周期？
• 7.state和props的区别？
• 8.什么是高阶组件？
• 9.什么是受控组件？什么是非受控组件？
• 10.什么是jsx？
• 11.react中为什么不能直接更新state状态？
• 12.react中为什么类方法需要绑定？
• 13.react context是什么?
• 14.什么是react？
• 15.react它有什么特点？有哪些优点？有哪些限制？
• 16.为什么浏览器无法读取jsx?
• 17.react中render（）的目的？
• 18.react中的状态是什么？如何使用？
• 19.如何更新组件状态？
• 21.区分有状态和无状态组件？
• 22.react的合成事件是什么？
• 23.什么是纯组件？
• 24.react中key的重要性是什么？
• 25.解释一下flux？
• 26.什么是redux？什么是 redux中间件？
• 27.redux遵循的三个原则是什么？
• 28.你对“单一事实来源”有什么理解？
• 29.列出redux的组件组成？
• 30.什么是react的路由？
• 31.为什么要使用react路由？ 有哪些优点？
• 32.如何再redux中定义action
• 33.解释一下reducer的作用？
• 34.store再redux中的意义是什么？
• 35.redux和flux有什么不同？
• 36.redux有哪些优点？
• 37.为什么react router v4版本中需要使用Switch关键字？
• 38.了解shouldComponentUpdate吗？
• 39.react的工作原理？
• 40.react应该再何处发起Ajax请求？
• 41.怎么阻止组件渲染？
• 42.在构造函数中调用super的目的是什么？
• 43.react性能优化方案 ？ react性能优化再哪个生命周期？

1.什么是虚拟dom?虚拟dom和真是dom区别？虚拟dom的工作原理？

区别

虚拟DOM（VDOM）它是真实DOM的内存表示,一种编程概念，一种模式。它会和真实的DOM同步，比如通过ReactDOM这种库，这个同步的过程叫做调和(reconcilation)。
虚拟DOM更多是一种模式，不是一种特定的技术。

工作原理

它是一个节点树，它将元素、它们的属性和内容作为对象及其属性。 React 的渲染函数从 React 组件中创建一个节点树。然后它响应数据模型中的变化来更新该树，该变化是由用户或系统完成的各种动作引起的。
虚拟dom三个工作过程：1.底层数据发生改变，在虚拟dom中重新渲染。2.计算更新前后差异。3.完成计算后，将只用实际更改的内容更新 到真实dom。

2.什么是diff算法？

1.把树形结构按照层级分解，只比较同级元素。
2.给列表结构的每个单元添加唯一的key属性，方便比较。
3.React 只会匹配相同 class 的 component（这里面的class指的是组件的名字）
4.合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检5.查所有标记 dirty 的 component 重新绘制.
6．选择性子树渲染。开发人员可以重写shouldComponentUpdate提高diff的性能。
8、react性能优化方案
react只有再更新阶段才会有diff算法的运用
计算出虚拟dom中真正改变的部分，从而只针对改部分进行原生dom操作而非重新渲染整个页面。

传统diff算法：diff算法就是从根节点开始查找，一层层向下比较，如果在某一层的某一节点发生不同了，就会替换掉这层节点下面的所有子树。这样有个不好的情况就是如果有很多层级上千上万，就需要执行上千上万次的对比
react diff 的话：1.web ui 中dom节点跨层级移动比较少（tree diff）。2.拥有相同类的组件将会生成相似的树形结构，反之拥有不同类的组件将会生成不同的树形结构。3.对于同一层级的一组子节点，他们可以通过唯一ID进行区分
tree diff：
（1）React通过updateDepth对Virtual DOM树进行层级控制。
（2）对树分层比较，两棵树 只对同一层次节点 进行比较。如果该节点不存在时，则该节点及其子节点会被完全删除，不会再进一步比较。
（3）只需遍历一次，就能完成整棵DOM树的比较

3.类组件和函数组件之间有什么区别？

类组件（ Class components ）
无论是使用函数或是类来声明一个组件，它决不能修改它自己的 props 。
所有 React 组件都必须是纯函数，并禁止修改其自身 props 。
React是单项数据流，父组件改变了属性，那么子组件视图会更新。
属性 props 是外界传递过来的，状态 state 是组件本身的，状态可以在组件中任意修改
组件的属性和状态改变都会更新视图。
函数组件（functional component）
函数组件接收一个单一的 props 对象并返回了一个React元素
函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。

4.react中的refs的作用是什么？如何创建refs? refs使用场景？

refs作用

1.它是一个有助于存储对特定的 React 元素或组件的引用的属性，它将由组件渲染配置函数返回。
2.用于对 render() 返回的特定元素或组件的引用。
3.当需要进行 DOM 测量或向组件添加方法时，它们会派上用场

如何创建：

Refs 是使用 React.createRef() 方法创建的，并通过 ref 属性添加到 React 元素上。为了在整个组件中使用 refs ，只需将 ref 分配给构造函数中的实例属性

使用场景：

1.需要管理焦点、选择文本或媒体播放时
2.触发式动画
3.与第三方 DOM 库集成

5.react的事件处理？

React将使用单个事件侦听器在顶层侦听所有事件。这对性能有好处，也意味着React在更新DOM时无需担心跟踪事件监听器

6.react的生命周期？

初始化： 在此阶段，react组件准备设置初始状态和默认道具。
挂载： react组件已准备好挂载在浏览器DOM中。此阶段涵盖 componentWillMount 和 componentDidMount 生命周期方法。
更新： 在此阶段，组件以两种方式进行更新，即发送新道具和更新状态。此阶段涵盖了 shouldComponentUpdate，componentWillUpdate和componentDidUpdate 生命周期方法。
卸载： 在最后一个阶段，不需要该组件，并且可以从浏览器DOM上卸载该组件。此阶段包括 componentWillUnmount 生命周期方法。

componentWillMount： 在渲染之前执行，用于根组件中的应用程序级别配置。
componentDidMount： 仅在客户端的第一次渲染之后执行。 这是AJAX请求和DOM或状态更新应该发生的地方。此方法也用于与其他JavaScript框架以及任何延迟执行的函数(如 setTimeout 或 setInterval )进行集成，在这里使用它来更新状态，以便我们可以触发其他生命周期方法。
componentWillReceiveProps： 只要在另一个渲染被调用之前更新 props 就被调用。 当我们更新状态时，从 setNewNumber 触发它。
shouldComponentUpdate： 确定是否将更新组件。默认情况下，它返回true。如果您确定组件在状态或道具更新后不需要渲染，则可以返回false值。这是提高性能的好地方，因为如果组件收到新的道具，它可以防止重新渲染。
componentWillUpdate： 在由shouldComponentUpdate确认返回正值的优点和状态更改时，在重新渲染组件之前执行。
componentDidUpdate： 通常用于更新DOM以响应属性或状态更改。
componentWillUnmount： 它将用于取消任何传出的网络请求，或删除与该组件关联的所有事件侦听器。

7.state和props的区别？

props 是一个从外部传进组件的参数，主要作为就是从父组件向子组件传递数据，它具有可读性和不变性，只能通过外部组件主动传入新的 props 来重新渲染子组件，否则子组件的 props 以及展现形式不会改变。
state 的主要作用是用于组件保存、控制以及修改自己的状态，它只能在 constructor 中初始化，它算是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的 this.setState 来修改，修改 state 属性会导致组件的重新渲染。

8.什么是高阶组件？

高阶组件是 React 中用于重用组件逻辑的高级技术，它是一个函数，能够接受一个组件并返回一个新的组件。
实现高阶组件的两种方式：
属性代理。高阶组件通过包裹的React组件来操作props
反向继承。高阶组件继承于被包裹的React组件

9.什么是受控组件？什么是非受控组件？

受控组件：
1.没有维持自己的状态
2.数据由父组件控制
3.通过props获取当前值，然后通过回调通知更改
非受控组件：
1.保持着自己的状态
2.数据由DOM控制
3.refs用于获取当前值

10.什么是jsx？

JSX即JavaScript XML。一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖，也是react.js的使用基础。React在不使用JSX的情况下一样可以工作，然而使用JSX可以提高组件的可读性，因此推荐使用JSX。
优点：
1.允许使用熟悉的语法来定义 HTML 元素树；
2.提供更加语义化且移动的标签；
3.程序结构更容易被直观化；
4.抽象了 React Element 的创建过程；
5.可以随时掌控 HTML 标签以及生成这些标签的代码；
6.是原生的 JavaScript。

11.react中为什么不能直接更新state状态？

如果直接更新状态，那么它将不会重新渲染组件。
而是使用 setState() 方法。它计划对组件状态对象的更新。状态改变时，组件通过重新渲染做出响应
注意：可以分配状态的唯一位置是构造函数。

12.react中为什么类方法需要绑定？

在JavaScript中， this 的值取决于当前上下文。在React类的组件方法中，开发人员通常希望它引用组件的当前实例，因此有必要 将 这些方法 绑定 到该实例。通常，这是在构造函数中完成的，

13.react context是什么?

简单说就是，当你不想在组件树中通过逐层传递 props 或者 state 的方式来传递数据时，可以使用 Context 来实现 跨层级 的组件数据传递。

14.什么是react？

React 是 Facebook 在 2011 年开发的前端 JavaScript 库。
它遵循基于组件的方法，有助于构建可重用的UI组件。
它用于开发复杂和交互式的 Web 和移动 UI。
尽管它仅在 2015 年开源，但有一个很大的支持社区。

15.react它有什么特点？有哪些优点？有哪些限制？

特点：
它使用**虚拟DOM **而不是真正的DOM。
它可以用服务器端渲染。
它遵循单向数据流或数据绑定。
优点：
它提高了应用的性能
可以方便地在客户端和服务器端使用
由于 JSX，代码的可读性很好
React 很容易与 Meteor，Angular 等其他框架集成
使用React，编写UI测试用例变得非常容易
限制：
React 只是一个库，而不是一个完整的框架
它的库非常庞大，需要时间来理解
新手程序员可能很难理解
编码变得复杂，因为它使用内联模板和 JSX

16.为什么浏览器无法读取jsx?

浏览器只能处理 JavaScript 对象，而不能读取常规 JavaScript 对象中的 JSX。所以为了使浏览器能够读取 JSX，首先，需要用像 Babel 这样的 JSX 转换器将 JSX 文件转换为 JavaScript 对象，然后再将其传给浏览器。

17.react中render（）的目的？

每个React组件强制要求必须有一个 render()。它返回一个 React 元素，是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素，则必须将它们组合在一个封闭标记内，例如 form、group、div 等。此函数必须保持纯净，即必须每次调用时都返回相同的结果

18.react中的状态是什么？如何使用？

状态是 React 组件的核心，是数据的来源，必须尽可能简单。基本上状态是确定组件呈现和行为的对象。与props 不同，它们是可变的，并创建动态和交互式组件。可以通过 this.state() 访问它们。

19.如何更新组件状态？

可以用 this.setState()更新组件的状态。
20.react中的箭头函数是什么？怎么使用？
箭头函数（=>）是用于编写函数表达式的简短语法。这些函数允许正确绑定组件的上下文，因为在 ES6 中默认下不能使用自动绑定。使用高阶函数时，箭头函数非常有用。

21.区分有状态和无状态组件？

有状态组件：
1.在内存中存储有关组件状态变化的信息
2.有权改变状态
3.包含过去，现在和未来可能的状态变化情况
4.接受无组件状态变化要求的通知，然后将props发送给他们
无状态组件：
1.计算组件的内部的状态
2.无权改变状态
3.不包含过去，现在和未来可能发生的状态变化情况
4.从有状态组件接收props并将其视为回调函数

22.react的合成事件是什么？

合成事件是围绕浏览器原生事件充当跨浏览器包装器的对象。它们将不同浏览器的行为合并为一个 API。这样做是为了确保事件在不同浏览器中显示一致的属性。

23.什么是纯组件？

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

24.react中key的重要性是什么？

key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 React 优化渲染。这些 key 必须是唯一的数字或字符串，React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能。

25.解释一下flux？

Flux 是一种强制单向数据流的架构模式。它控制派生数据，并使用具有所有数据权限的中心 store 实现多个组件之间的通信。整个应用中的数据更新必须只能在此处进行。 Flux 为应用提供稳定性并减少运行时的错误。

26.什么是redux？什么是 redux中间件？

Redux 是当今最热门的前端开发库之一。它是 JavaScript 程序的可预测状态容器，用于整个应用的状态管理。使用 Redux 开发的应用易于测试，可以在不同环境中运行，并显示一致的行为。
redux中间件：中间件提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让我们改变数据流，实现如异步 action ，action 过滤，日志输出，异常报告等功能。
常见的中间件： redux-logger：提供日志输出；redux-thunk：处理异步操作；redux-promise：处理异步操作；actionCreator的返回值是promise
redux thunk: 是一个允许你编写返回一个函数而不是一个 action 的 actions creators 的中间件。如果满足某个条件，thunk 则可以用来延迟 action 的派发(dispatch)，这可以处理异步 action 的派发(dispatch)。

27.redux遵循的三个原则是什么？

单一事实来源：整个应用的状态存储在单个 store 中的对象/状态树里。单一状态树可以更容易地跟踪随时间的变化，并调试或检查应用程序。
状态是只读的：改变状态的唯一方法是去触发一个动作。动作是描述变化的普通 JS 对象。就像 state 是数据的最小表示一样，该操作是对数据更改的最小表示。
使用纯函数进行更改：为了指定状态树如何通过操作进行转换，你需要纯函数。纯函数是那些返回值仅取决于其参数值的函数

28.你对“单一事实来源”有什么理解？

Redux 使用 “Store” 将程序的整个状态存储在同一个地方。因此所有组件的状态都存储在 Store 中，并且它们从 Store 本身接收更新。单一状态树可以更容易地跟踪随时间的变化，并调试或检查程序。

29.列出redux的组件组成？

Action – 这是一个用来描述发生了什么事情的对象。
Reducer – 这是一个确定状态将如何变化的地方。
Store – 整个程序的状态/对象树保存在Store中。
View – 只显示 Store 提供的数据。

30.什么是react的路由？

React 路由是一个构建在 React 之上的强大的路由库，它有助于向应用程序添加新的屏幕和流。这使 URL 与网页上显示的数据保持同步。它负责维护标准化的结构和行为，并用于开发单页 Web 应用。 React 路由有一个简单的API。
Router 用于定义多个路由，当用户定义特定的 URL 时，如果此 URL 与 Router 内定义的任何 “路由” 的路径匹配，则用户将重定向到该特定路由。所以基本上我们需要在自己的应用中添加一个 Router 库，允许创建多个路由，每个路由都会向我们提供一个独特的视图

31.为什么要使用react路由？ 有哪些优点？

就像 React 基于组件一样，在 React Router v4 中，API 是 ‘All About Components’。可以将 Router 可视化为单个根组件（），其中我们将特定的子路由（）包起来。
无需手动设置历史值：在 React Router v4 中，我们要做的就是将路由包装在 组件中。
包是分开的：共有三个包，分别用于 Web、Native 和 Core。这使我们应用更加紧凑。基于类似的编码风格很容易进行切换。

32.如何再redux中定义action

React 中的 Action 必须具有 type 属性，该属性指示正在执行的 ACTION 的类型。必须将它们定义为字符串常量，并且还可以向其添加更多的属性。在 Redux 中，action 被名为 Action Creators 的函数所创建

33.解释一下reducer的作用？

Reducers 是纯函数，它规定应用程序的状态怎样因响应 ACTION 而改变。Reducers 通过接受先前的状态和 action 来工作，然后它返回一个新的状态。它根据操作的类型确定需要执行哪种更新，然后返回新的值。如果不需要完成任务，它会返回原来的状态。

34.store再redux中的意义是什么？

Store 是一个 JavaScript 对象，它可以保存程序的状态，并提供一些方法来访问状态、调度操作和注册侦听器。应用程序的整个状态/对象树保存在单一存储中。因此，Redux 非常简单且是可预测的。我们可以将中间件传递到 store 来处理数据，并记录改变存储状态的各种操作。所有操作都通过 reducer 返回一个新状态。

35.redux和flux有什么不同？

redux:
1.store和更改逻辑是分开的
2.只有一个store
3.带有分层reducer的单一store
4.没有单调度器的概念
5.容器组件是有联系的
6.状态是不可改变的
flux：
1.store包含状态和更改逻辑
2.有多个store
3.所有store都互不影响且平级
4.有单一调度器
5.react组件订阅store
6.状态是可变的

36.redux有哪些优点？

结果的可预测性 - 由于总是存在一个真实来源，即 store ，因此不存在如何将当前状态与动作和应用的其他部分同步的问题。
可维护性 - 代码变得更容易维护，具有可预测的结果和严格的结构。
服务器端渲染 - 你只需将服务器上创建的 store 传到客户端即可。这对初始渲染非常有用，并且可以优化应用性能，从而提供更好的用户体验。
开发人员工具 - 从操作到状态更改，开发人员可以实时跟踪应用中发生的所有事情。
社区和生态系统 - Redux 背后有一个巨大的社区，这使得它更加迷人。一个由才华横溢的人组成的大型社区为库的改进做出了贡献，并开发了各种应用。
易于测试 - Redux 的代码主要是小巧、纯粹和独立的功能。这使代码可测试且独立。
组织 - Redux 准确地说明了代码的组织方式，这使得代码在团队使用时更加一致和简单

37.为什么react router v4版本中需要使用Switch关键字？

虽然 div 用于封装 Router 中的多个路由，当你想要仅显示要在多个定义的路线中呈现的单个路线时，可以使用 “switch” 关键字。使用时，switch标记会按顺序将已定义的 URL 与已定义的路由进行匹配。找到第一个匹配项后，它将渲染指定的路径。从而绕过其它路线。

38.了解shouldComponentUpdate吗？

React虚拟dom技术要求不断的将dom和虚拟dom进行diff比较，如果dom树比价大，这种比较操作会比较耗时，因此React提供了shouldComponentUpdate这种补丁函数，如果对于一些变化，如果我们不希望某个组件刷新，或者刷新后跟原来其实一样，就可以使用这个函数直接告诉React，省去diff操作，进一步的提高了效率。

39.react的工作原理？

React 会创建一个虚拟 DOM(virtual DOM)。当一个组件中的状态改变时，React 首先会通过 “diffing” 算法来标记虚拟 DOM 中的改变，第二步是调节(reconciliation)，会用 diff 的结果来更新 DOM。

40.react应该再何处发起Ajax请求？

在 React 组件中，应该在 componentDidMount 中发起网络请求。这个方法会在组件第一次“挂载”(被添加到 DOM)时执行，在组件的生命周期中仅会执行一次。更重要的是，你不能保证在组件挂载之前 Ajax 请求已经完成，如果是这样，也就意味着你将尝试在一个未挂载的组件上调用 setState，这将不起作用。在 componentDidMount 中发起网络请求将保证这有一个组件可以更新了。

41.怎么阻止组件渲染？

在组件的 render 方法中返回 null 并不会影响触发组件的生命周期方法

42.在构造函数中调用super的目的是什么？

在 super() 被调用之前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调用 super()。传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。

43.react性能优化方案 ？ react性能优化再哪个生命周期？

1）重写shouldComponentUpdate来避免不必要的dom操作。
2）使用 production 版本的react.js。
3）使用key来帮助React识别列表中所有子组件的最小变化
shouldComponentUpdate 这个方法用来判断是否需要调用render方法重新描绘dom。因为dom的描绘非常消耗性能，如果我们能在shouldComponentUpdate方法中能够写出更优化的dom diff算法，可以极大的提高性能。

标签：React,面试题,超全,状态,DOM,react,dom,组件,硬核
来源： https://blog.csdn.net/Alan0728/article/details/119381087