基本知识

 

 

1. ****区分 ****Real ****DOM ****和 ****Virtual ****DOM

 

 

Real DOM Virtual DOM

 

 

 

 

 

 

1.  更新缓慢。 1.  更新更快。

 

 

2.  可以直接更新  HTML。 2.  无法直接更新  HTML。

 

 

3.  如果元素更新，则创建新 DOM。 3.  如果元素更新，则更新  JSX  。

 

 

4. DOM 操作代价很高。 4. DOM  操作非常简单。

 

 

5.  消耗的内存较多。 5.  很少的内存消耗。

 

 

2. ****什么是 ****React？

 

 

 

React  是  Facebook  在  2011  年开发的前端  JavaScript  库。

 

它遵循基于组件的方法，有助于构建可重用的 UI 组件。

 

它用于开发复杂和交互式的  Web  和移动  UI。

 

尽管它仅在  2015  年开源，但有一个很大的支持社区。

 

3. ****React ****有什么特点？

 

React 的主要功能如下：

 

 

它使用虚拟 DOM 而不是真正的 DOM。

 

它可以进行服务器端渲染。

 

它遵循单向数据流或数据绑定。

 

4. ****列出 ****React ****的一些主要优点。

 

React 的一些主要优点是：

 

 

它提高了应用的性能

 

可以方便地在客户端和服务器端使用

 

 

 

 

 

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

 

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

 

使用 React，编写 UI 测试用例变得非常容易

 

5. ****React ****有哪些限制？

 

React 的限制如下：

 

 

React 本身只是一个 V 而已，并不是一个完整的框架，所以如果是大型项目想要

 

一套完整的框架的话，基本都需要加上 ReactRouter 和 Flux 才能写大型应用。

 

6. ****什么是 ****JSX？

 

JSX  是 J  avaScript XML  的 简 写 。 是   React  使 用 的 一 种 文 件 ， 它 利 用

JavaScript  的表现力和类似  HTML  的模板语法。这使得  HTML  文件非常

容易理解。此文件能使应用非常可靠，并能够提高其性能。下面是 JSX 的一

个例子：

render(){  return(  

 );}

 

7. ****你了解 ****Virtual ****DOM ****吗？解释一下它的工作原理。

 

Virtual DOM  是一个轻量级的  JavaScript  对象，它最初只是  real DOM  的副

本。它是一个节点树，它将元素、它们的属性和内容作为对象及其属性。 React

的渲染函数从  React  组件中创建一个节点树。然后它响应数据模型中的变化来

更新该树，该变化是由用户或系统完成的各种动作引起的。

 

 

Virtual DOM  工作过程有三个简单的步骤。

 

 

每当底层数据发生改变时，整个  UI  都将在  Virtual DOM  描述中重新渲

染。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

然后计算之前  DOM  表示与新表示的之间的差异。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

完成计算后，将只用实际更改的内容更新  real DOM。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

8. ****为什么浏览器无法读取 ****JSX？

 

浏览器只能处理  JavaScript  对象，而不能读取常规  JavaScript  对象中的  JSX。

所以为了使浏览器能够读取  JSX，首先，需要用像  Babel  这样的  JSX  转换器

将  JSX  文件转换为  JavaScript  对象，然后再将其传给浏览器。

 

 

9. ****与 ****ES5 ****相比，React ****的 ****ES6 ****语法有何不同？

 

以下语法是  ES5  与  ES6  中的区别：

 

 

1.require  与  import

// ES5var React = require('react');// ES6mport React from 'react';

2.export  与  exports

// ES5module.exports = Component; // ES6export default Component;

3.component  和  function

// ES5var MyComponent = React.createClass({ render: function() { return

Hello Edureka!

; }});// ES6class MyComponent extends

React.Component { render() { return 

Hello Edureka!

; }}

props// ES5var App = React.createClass({ propTypes: { name:

React.PropTypes.string }, render: function() { return 

Hello,

{this.props.name}!

;}});// ES6class App extends React.Component

 

 

 

 

 

{ render() { return 

Hello, {this.props.name}!

; }}state// ES5var

App = React.createClass({getInitialState: function() { return { name:

'world' }; }, render: function() { retur 

Hello,

{this.state.name}!

; });// ES6class App extends React.Component

{ constructor() { super(); this.state = { name: 'world' }; } render() { return

Hello, {this.state.name}!

; }}

 

10. ****React ****与 ****Angular ****有何不同？

 

 

主题 React

 

 

1.  体系结构 只有  MVC  中的  View

 

 

2.  渲染 可以进行服务器端渲染

 

 

3. DOM 使用  virtual DOM

 

 

4.  数据绑定 单向数据绑定

 

 

5.  调试 编译时调试

 

 

6.  作者 Facebook

 

 

React ****组件

 

 

 

 

 

11. ****你怎样理解“在 ****React ****中，一切都是组件”这句话。

 

组件是  React  应用  UI  的构建块。这些组件将整个  UI  分成小的独立并可重用

的部分。每个组件彼此独立，而不会影响  UI  的其余部分。

 

 

12. ****怎样解释 ****React ****中 ****render() ****的目的。

 

每个 React 组件强制要求必须有一个 render()。它返回一个  React  元素，是原

 

 

 

 

 

生  DOM  组件的表示。如果需要渲染多个  HTML  元素，则必须将它们组合在

一个封闭标记内，例如 

、、 ); }});

 

24. ****React ****中的合成事件是什么？

 

合成事件是围绕浏览器原生事件充当跨浏览器包装器的对象。它们将不同浏览器

的行为合并为一个  API。这样做是为了确保事件在不同浏览器中显示一致的属

性。

 

 

25. ****你对 ****React ****的 ****refs ****有什么了解？

 

Refs  是  React  中引用的简写。它是一个有助于存储对特定的  React  元素或组

件的引用的属性，它将由组件渲染配置函数返回。用于对  render()  返回的

特定元素或组件的引用。当需要进行  DOM  测量或向组件添加方法时，它们

会派上用场。

class ReferenceDemo extends React.Component{

display() { const name = this.inputDemo.value;

document.getElementById('disp').innerHTML = name;

}render() {   return(   

 ); } }

 

 

 

 

 

26. ****列出一些应该使用 ****Refs ****的情况。

 

以下是应该使用  refs  的情况：

 

 

需要管理焦点、选择文本或媒体播放时

 

触发式动画

 

与第三方  DOM  库集成

 

27. ****如何模块化 ****React ****中的代码？

 

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

单独编写组件。

//ChildComponent.jsxexport   default class   ChildComponent   extends

React.Component   { render() {   return(   

 ); }

}//ParentComponent.jsximport ChildComponent from

'./childcomponent.js';class ParentComponent extends React.Component

{ render() { return( 

 ); }}

 

28. ****如何在 ****React ****中创建表单

 

React  表单类似于  HTML  表单。但是在  React  中，状态包含在组件的  state

属性中，并且只能通过 setState() 更新。因此元素不能直接更新它们的状态，

它们的提交是由  JavaScript  函数处理的。此函数可以完全访问用户输入到

表单的数据。

handleSubmit(event) { alert('A name was submitted: ' + this.state.value);

event.preventDefault();}render() { return ( <form

onSubmit={this.handleSubmit}>

Name: <input type="text" value={this.state.value}

onChange={this.handleSubmit} /> <input type="submit"

value="Submit" />

);}

 

 

 

 

 

29. ****你对受控组件和非受控组件了解多少？

 

 

受控组件

 

 

1.  没有维持自己的状态

 

 

2.数据由父组件控制

 

 

3.  通过  props  获取当前值，然后通过回调通知更改

 

 

30. ****什么是高阶组件（HOC）？

 

 

高阶组件是重用组件逻辑的高级方法，是一种源于  React  的组件模式。  HOC

是自定义组件，在它之内包含另一个组件。它们可以接受子组件提供的任何动态，

但不会修改或复制其输入组件中的任何行为。你可以认为  HOC  是“纯

（Pure）”组件。

 

 

31. ****你能用 ****HOC ****做什么？

 

HOC 可用于许多任务，例如

 

 

代码重用，逻辑和引导抽象

 

渲染劫持

 

状态抽象和控制

 

Props  控制

 

32. ****什么是纯组件？

 

纯（Pure） 组件是可以编写的最简单、最快的组件。它们可以替换任何只

有 render() 的组件。这些组件增强了代码的简单性和应用的性能。

 

 

 

 

 

33. ****React ****中 ****key ****的重要性是什么？

 

key  用于识别唯一的  Virtual DOM  元素及其驱动  UI  的相应数据。它们通过

回收  DOM  中当前所有的元素来帮助  React  优化渲染。这些  key  必须是唯一

的数字或字符串，React  只是重新排序元素而不是重新渲染它们。这可以提高

应用程序的性能。

 

 

React ****Redux

 

 

34. ****MVC ****框架的主要问题是什么？

 

以下是 MVC 框架的一些主要问题

 

 

对  DOM  操作的代价非常高

 

程序运行缓慢且效率低下

 

内存浪费严重

 

由于循环依赖性，组件模型需要围绕  models  和  views  进行创建

 

35. ****解释一下 ****Flux

 

 

 

 

 

 

 

 

 

Flux  是一种强制单向数据流的架构模式。它控制派生数据，并使用具有所有数

据权限的中心  store  实现多个组件之间的通信。整个应用中的数据更新必须只

能在此处进行。  Flux  为应用提供稳定性并减少运行时的错误。

 

 

36. ****什么是 ****Redux？

 

Redux  是当今最热门的前端开发库之一。它是  JavaScript  程序的可预测状态

容器，用于整个应用的状态管理。使用  Redux  开发的应用易于测试，可以在不

同环境中运行，并显示一致的行为。

 

 

 

 

 

37. ****Redux ****遵循的三个原则是什么？

 

单一事实来源：整个应用的状态存储在单个  store  中的对象/状态树里。单一状

态树可以更容易地跟踪随时间的变化，并调试或检查应用程序。

 

状态是只读的：改变状态的唯一方法是去触发一个动作。动作是描述变化的普通

JS  对象就像  state  是数据的最小表示一样，该操作是对数据更改的最小表

示。

 

使用纯函数进行更改：为了指定状态树如何通过操作进行转换，你需要纯函数。

纯函数是那些返回值仅取决于其参数值的函数。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

 

Redux  使用  “Store”  将程序的整个状态存储在同一个地方。因此所有组件的

状态都存储在  Store  中，并且它们从  Store  本身接收更新。单一状态树可以更

容易地跟踪随时间的变化，并调试或检查程序。

 

 

39. ****列出 ****Redux ****的组件。

 

Redux  由以下组件组成：

 

 

Action –  这是一个用来描述发生了什么事情的对象。

 

 

 

 

 

Reducer –  这是一个确定状态将如何变化的地方。

 

Store –  整个程序的状态/对象树保存在 Store 中。

 

View –  只显示  Store  提供的数据。

 

40. ****数据如何通过 ****Redux ****流动？

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

41. ****如何在 ****Redux ****中定义 ****Action？

 

React  中的  Action  必须具有  type  属性，该属性指示正在执行的  ACTION

的类型。必须将它们定义为字符串常量，并且还可以向其添加更多的属性。在

Redux  中，action  被名为  Action Creators  的函数所创建。以下是  Action  和

Action Creator  的示例：

function addTodo(text) {

return { type: ADD_TODO, text }}

 

42. ****解释 ****Reducer ****的作用。

 

Reducers  是纯函数，它规定应用程序的状态怎样因响应  ACTION  而改变。

Reducers  通过接受先前的状态和  action  来工作，然后它返回一个新的状态。

它根据操作的类型确定需要执行哪种更新，然后返回新的值。如果不需要完成任

务，它会返回原来的状态。

 

 

 

 

 

43. ****Store ****在 ****Redux ****中的意义是什么？

 

Store  是一个  JavaScript  对象，它可以保存程序的状态，并提供一些方法来访

问状态、调度操作和注册侦听器。应用程序的整个状态/对象树保存在单一存储

中。因此，Redux  非常简单且是可预测的。我们可以将中间件传递到  store  来

处理数据，并记录改变存储状态的各种操作。所有操作都通过  reducer  返回一

个新状态。

 

 

44. ****Redux ****与 ****Flux ****有何不同？

 

 

Flux

 

 

1. Store  包含状态和更改逻辑

 

 

2.  有多个  Store

 

 

3.  所有  Store  都互不影响且是平级的

 

 

4.  有单一调度器

 

 

5. React  组件订阅  store

 

 

6.  状态是可变的

 

 

45. ****Redux ****有哪些优点？

 

 

Redux  的优点如下：

 

结果的可预测性  - 由于总是存在一个真实来源，即  store  ，因此不存在如何将

当前状态作和应用的其他部分同步的问题。

 

可维护性  - 代码变得更容易维护，具有可预测的结果和严格的结构。

 

服务器端渲染  - 你只需将服务器上创建的  store  传到客户端即可。这对初始渲

染非常有用，并且可以优化应用性能，从而提供更好的用户体验。

 

 

 

 

 

开发人员工具  - 从操作到状态更改，开发人员可以实时跟踪应用中发生的所有

事情。

 

社区和生态系统  - Redux  背后有一个巨大的社区，这使得它更加迷人。一个由

才华横溢的

 

组成的大型社区为库的改进做出了贡献，并开发了各种应用。

 

易于测试  - Redux  的代码主要是小巧、纯粹和独立的功能。这使代码可测试且

独立。

 

组织  - Redux  准确地说明了代码的组织方式，这使得代码在团队使用时更加一

致和简单。

 

React ****路由

 

 

46. ****什么是 ****React ****路由？

 

React  路由是一个构建在  React  之上的强大的路由库，它有助于向应用程序添

加新的屏幕和流。这使  URL  与网页上显示的数据保持同步。它负责维护标准化

的结构和行为，并用于开发单页  Web  应用。  React  路由有一个简单的 API。

 

 

47. ****为什么 ****React ****Router ****v4 ****中使用 ****switch ****关键字 ****？

 

虽然