React面試題總結內容主要包括基礎知識，React 組件，React Redux，React 路由。
基本知識
1. 區分Real DOM和Virtual DOM
| Real DOM | Virtual DOM |
|---|---|
| 更新緩慢。 | 更新更快。 |
| 可以直接更新 HTML。 | 無法直接更新 HTML。 |
| 如果元素更新，則創建新DOM。 | 如果元素更新，則更新 JSX 。 |
| DOM操作代價很高。 | DOM 操作非常簡單。 |
| 消耗的內存較多。 | 很少的內存消耗。 |
2. 什麼是React？
- React 是 Facebook 在 2011 年開發的前端 JavaScript 庫。
- 它遵循基於組件的方法，有助於構建可重用的UI組件。
- 它用於開發複雜和交互式的 Web 和移動 UI。
- 儘管它僅在 2015 年開源，但有一個很大的支持社區。
3. React有什麼特點？
React的主要功能如下：
1）它使用虛擬DOM 而不是真正的DOM。
2）它可以用服務器端渲染。
3）它遵循單向數據流或數據綁定。
4. 列出React的一些主要優點。
React的一些主要優點是：
1）它提高了應用的性能
2）可以方便地在客戶端和服務器端使用
3）由於 JSX，代碼的可讀性很好
4）React 很容易與 Meteor，Angular 等其他框架集成
5）使用React，編寫UI測試用例變得非常容易
5. React有哪些限制？
React的限制如下：
1）React 只是一個庫，而不是一個完整的框架
2）它的庫非常龐大，需要時間來理解
3）新手程序員可能很難理解
4）編碼變得複雜，因爲它使用內聯模板和 JSX
6. 什麼是JSX？
JSX 是J avaScript XML 的簡寫。是 React 使用的一種文件，它利用 JavaScript 的表現力和類似 HTML 的模板語法。這使得 HTML 文件非常容易理解。此文件能使應用非常可靠，並能夠提高其性能。下面是JSX的一個例子：
render(){
return(
<div>
<h1> Hello World from Edureka!!</h1>
</div>
);
}
7. 你瞭解 Virtual DOM 嗎？解釋一下它的工作原理。
Virtual DOM 是一個輕量級的 JavaScript 對象，它最初只是 real DOM 的副本。它是一個節點樹，它將元素、它們的屬性和內容作爲對象及其屬性。 React 的渲染函數從 React 組件中創建一個節點樹。然後它響應數據模型中的變化來更新該樹，該變化是由用戶或系統完成的各種動作引起的。
Virtual DOM 工作過程有三個簡單的步驟。
1）每當底層數據發生改變時，整個 UI 都將在 Virtual DOM 描述中重新渲染。
2）然後計算之前 DOM 表示與新表示的之間的差異。
3）完成計算後，將只用實際更改的內容更新 real DOM。
8. 爲什麼瀏覽器無法讀取JSX？
瀏覽器只能處理 JavaScript 對象，而不能讀取常規 JavaScript 對象中的 JSX。所以爲了使瀏覽器能夠讀取 JSX，首先，需要用像 Babel 這樣的 JSX 轉換器將 JSX 文件轉換爲 JavaScript 對象，然後再將其傳給瀏覽器。
9. 與 ES5 相比，React 的 ES6 語法有何不同？
以下語法是 ES5 與 ES6 中的區別：
1）require 與 import
// ES5
var React = require('react');
// ES6
import React from 'react';
2）export 與 exports
// ES5
module.exports = Component;
// ES6
export default Component;
3）component 和 function
// ES5
var MyComponent = React.createClass({
render: function() {
return
<h3>Hello Edureka!</h3>;
}
});
// ES6
class MyComponent extends React.Component {
render() {
return
<h3>Hello Edureka!</h3>;
}
}
4）props
// ES5
var App = React.createClass({
propTypes: { name: React.PropTypes.string },
render: function() {
return
<h3>Hello, {this.props.name}!</h3>;
}
});
// ES6
class App extends React.Component {
render() {
return
<h3>Hello, {this.props.name}!</h3>;
}
}
5）state
// ES5
var App = React.createClass({
getInitialState: function() {
return { name: 'world' };
},
render: function() {
return
<h3>Hello, {this.state.name}!</h3>;
}
});
// ES6
class App extends React.Component {
constructor() {
super();
this.state = { name: 'world' };
}
render() {
return
<h3>Hello, {this.state.name}!</h3>;
}
}
10. React與Angular有何不同？
| 主題 | React | Angular |
|---|---|---|
| 體系結構 | 只有 MVC 中的 View | 完整的 MVC |
| 渲染 | 可以在服務器端渲染 | 客戶端渲染 |
| DOM | 使用 virtual DOM | 使用 real DOM |
| 數據綁定 | 單向數據綁定 | 雙向數據綁定 |
| 調試 | 編譯時調試 | 運行時調試 |
| 作者 |
React面試題總結所有內容都已經整理成PDF文檔，需要可以點擊這裏免費領取，還包括前端CSS面試題文檔，JavaScript面試題文檔，Vue面試題文檔，大廠面試題文檔，都可以免費領取！
React 組件
1. 你理解“在React中，一切都是組件”這句話。
2. 解釋 React 中 render() 的目的。
3. 如何將兩個或多個組件嵌入到一個組件中？
4. 什麼是 Props?
5. React中的狀態是什麼？它是如何使用的？
6. 區分狀態和 props
7. 如何更新組件的狀態？
8. React 中的箭頭函數是什麼？怎麼用？
9. 區分有狀態和無狀態組件。
10. React組件生命週期的階段是什麼？
11. 詳細解釋 React 組件的生命週期方法。
12. React中的事件是什麼？
13. 如何在React中創建一個事件？
14. React中的合成事件是什麼？
15. 你對 React 的 refs 有什麼瞭解？
16. 列出一些應該使用 Refs 的情況。
17. 如何模塊化 React 中的代碼？
18. 如何在 React 中創建表單
19. 你對受控組件和非受控組件瞭解多少？
20. 什麼是高階組件（HOC）？
21. 你能用HOC做什麼？
22. 什麼是純組件？
23. React 中 key 的重要性是什麼？
React Redux
1. MVC框架的主要問題是什麼？
2. 解釋一下 Flux
3. 什麼是Redux？
4. Redux遵循的三個原則是什麼？
5. 你對“單一事實來源”有什麼理解？
6. 列出 Redux 的組件。
7. 數據如何通過 Redux 流動？
8. 如何在 Redux 中定義 Action？
9. 解釋 Reducer 的作用。
10. Store 在 Redux 中的意義是什麼？
11. Redux與Flux有何不同？
12. Redux 有哪些優點？
React 路由
1. 什麼是React 路由？
2. 爲什麼React Router v4中使用 switch 關鍵字 ？
3. 爲什麼需要 React 中的路由？
4. 列出 React Router 的優點。
5. React Router與常規路由有何不同？
需要可以點擊這裏免費領取，還包括前端CSS面試題文檔，JavaScript面試題文檔，Vue面試題文檔，大廠面試題文檔，都可以免費領取！
