React面試題總結

React面試題總結內容主要包括基礎知識，React 組件，React Redux，React 路由，

基本知識

1. 區分Real DOM和Virtual 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面試題總結所有內容都已經整理成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面試題檔案，大廠面試題檔案，都可以免費領取！