React面试题

react面试题

1、什么时候使用状态管理器?

从项目的整体看
用户的使用方式复杂
不同身份的用户有不同的使用方式（比如普通用户和管理员）
多个用户之间可以协作
与服务器大量交互，或者使用了 WebSocket
View 要从多个来源获取数据
从组件角度看
某个组件的状态，需要共享

某个状态需要在任何地方都可以拿到

一个组件需要改变全局状态
一个组件需要改变另一个组件的状态
组件有相当大量的，随时间变化的数据
state 需要有一个单一可靠数据源
所有 state 放在顶层组件已经无法满足需求了

2、说说 React 有什么特点?

它使用虚拟 DOM,而不是真正的 DOM。
它可以用服务器端渲染。
它遵循单向数据流或数据绑定

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

它提高了应用的性能
可以方便地在客户端和服务器端使用
由于 JSX，代码的可读性很好
React 很容易与 Meteor，Angular 等其他框架集成
使用 React，编写 UI 测试用例变得非常容易

4、什么是 JSX?

它 JSX 是 JavaScript XML 的简写。是 React 使用的一种文件，它利用 JavaScript 的表现力和类似 HTML 的模板语法。这使得 HTML 文件非常容易理解。此文件能使应用非常可靠，并能够提高其性能
例子

render() {
  return(
    <div>
      <h1> Hello World </h1>
    </div>
  )
}

5、说说为什么浏览器无法读取 JSX?

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

6、你理解“在 React 中，一切都是组件”这句话?

组件是 React 应用 UI 的构建块。这些组件将整个 UI 分成小的独立并可重用的部分。每个
组件彼此独立，而不会影响 UI 的其余部分

7、 React 中 render()的目的?

每个 React 组件强制要求必须有一个 render()。它返回一个 React 元素，是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素，则必须将它们组合在一个封闭标记内。

8、什么是 Props?

Props 是 React 中属性的简写。它们是只读组件，必须保持纯，即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。这有助于维护单向数据流，通常用于呈现动态生成的数据

9、React 中的状态是什么？

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

10、如何更新组件的状态?

使用this.setState()更新组件的状态

11、React 组件生命周期的阶段是什么?

React 组件的生命周期有三个不同的阶段：
初始渲染阶段：这是组件即将开始其生命之旅并进入 DOM 的阶段。
更新阶段：一旦组件被添加到 DOM，它只有在 prop 或状态发生变化时才可能更新和重新渲染。这些只发生在这个阶段
卸载阶段：这是组件生命周期的最后阶段，组件被销毁并从 DOM 中删除

12、你对 React 的 refs 有什么了解?

Refs 是 React 中引用的简写。它是一个有助于存储对特定的 React 元素或组件的引用的属性，它将由组件渲染配置函数返回。用于对 render()返回的特定元素或组件的引用。当需要进行 DOM 测量或向组件添加方法时，它们会派上用场
列出一些应该使用 refs 的情况?
需要管理焦点、选择文本或媒体播放时
触发式动画
与第三方 DOM 库集成

13、如何模块化 React 中的代码?

可以使用 export 和 import 属性来模块化代码。它们有助于在不同的文件中单独编写组件

14、什么是高阶组件 HOC?

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

15、你能用 HOC 做什么?

HOC 可用于许多任务:
用代码重用，逻辑和引导抽象
渲染劫持
状态抽象和控制
Props 控制

16、 React 中 key 的重要性是什么?

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

17、请你解释一下 Flux?

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

18、你对“单一事实来源”有什么理解

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

19、列出 Redux 的组成?

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

20、 Store 在 Redux 中的意义是什么?

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

21、 Redux 有哪些优点?

结果的可预测性
可维护性
服务器端渲染
易于测试

22、什么是 React 路由?

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

23、说说你对 React 的渲染原理的理解?

单向数据流。React 是一个 MVVM 框架，简单来说是在 MVC 的模式下在前端部分拆分出数据层和视图层。单向数据流指的是只能由数据层的变化去影响视图层的变化，而不能反过来（除非双向绑定）
数据驱动视图。我们无需关注页面的 DOM，只需要关注数据即可
渲染过程，生命周期……
setState()大部分时候是异步执行的，提升性能。

24、React 中三种构建组件的方式?

React.createClass()、ES6 class 和函数函数。

25、React调用setState后发生了什么

1.react会将传入的参数对象与组件当前已有的状态合并，并触发所谓的调和过程（Reconciliation）.

2.经过调和之后，React会以相对高效地方式根据新的状态去构建新的React元素树，并着手重新渲染UI界面

3.React得到元素树后，React会自动计算出新树与老树节点间的差异，根据差异对界面进行最小化重渲染

4.在DIff算法中，React能够相对精确地知道哪些地方发生了变化以及如何改变，从而能够按需更新，而不是全部重新渲染。