前端面试题——React

#React部分

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

• 从项目的整体看
  • 用户的使用方式复杂
  • 不同身份的用户有不同的使用方式
  • 多个用户之间可以协作
  • 与服务器大量交互，或使用WebSocket
  • View要从多个来源获取数据
• 从组件角度看
  • 某个组件的状态，需要共享
  • 某个状态需要在任何地方都可以拿到
  • 一个组件需要改变全局状态
  • 一个组件需要改变另一组件的状态
• 组件有相当大量的，随着时间变化的数据
• state 需要有一个单一可靠数据源
• 所有state放在顶层组件已经无法满足需求了

2、优点

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

3、特点

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

4、什么是JSX

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

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组件生命周期的阶段

• 三个不同的阶段：
  • 初始渲染阶段：这是组件即将开始其生命之旅并进入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做什么

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

16、react中key的重要性

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

17、MVC框架

• key用于对DOM操作的代价非常高
• 程序运行缓慢且效率低下
• 内存浪费严重
• 由于循环依赖性，组件模型需要围绕models和views进行创建

18、Flux

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

19、对“单一事实来源”的理解

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

20、 redux组件

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

21、store在redux的意义

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

22、优点

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

23、 react路由

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

24、 react的渲染原理

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

25、 react中三种构建组件的方式

• React.createClass()、ES6 class和无状态函数