如果你是一位有理想的前端開發(fā)人員，并且正在準備面試蜂莉，那么這篇文章就是為你準備的。本文收集了 React 面試中最常見的面試問題窖张，這是一份理想的指南蚁滋，讓你為 React 相關的面試做好充分的準備工作。
React面試題：
React面試題總結內(nèi)容主要包括基礎知識睦霎，React 組件踏拜，React Redux，React 路由肮塞。
基礎知識姻锁、React組件
1.什么是虛擬DOM？
虛擬 DOM (VDOM)是真實 DOM 在內(nèi)存中的表示拷窜。UI 的表示形式保存在內(nèi)存中涧黄，并與實際的 DOM 同步。這是一個發(fā)生在渲染函數(shù)被調(diào)用和元素在屏幕上顯示之間的步驟懊昨，整個過程被稱為調(diào)和春宣。
2.什么是React？
- React 是 Facebook 在 2011 年開發(fā)的前端 JavaScript 庫躏惋。
- 它遵循基于組件的方法嚷辅，有助于構建可重用的UI組件。
- 它用于開發(fā)復雜和交互式的 Web 和移動 UI款熬。
- 盡管它僅在 2015 年開源攘乒，但有一個很大的支持社區(qū)。
3.類組件和函數(shù)組件之間的區(qū)別是啥殉簸？
- 類組件可以使用其他特性沽讹，如狀態(tài) state 和生命周期鉤子。
- 當組件只是接收 props 渲染到頁面時蝠检，就是無狀態(tài)組件挚瘟，就屬于函數(shù)組件，也被稱為啞組件或展示組件焰檩。
4.在 React 中如何處理事件
為了解決跨瀏覽器的兼容性問題骨杂，SyntheticEvent 實例將被傳遞給你的事件處理函數(shù)雄卷，SyntheticEvent是 React 跨瀏覽器的瀏覽器原生事件包裝器，它還擁有和瀏覽器原生事件相同的接口妒潭，包括 stopPropagation() 和 preventDefault()。
比較有趣的是漠酿，React 實際上并不將事件附加到子節(jié)點本身谎亩。React 使用單個事件偵聽器偵聽頂層的所有事件。這對性能有好處夫凸，也意味著 React 在更新 DOM 時不需要跟蹤事件監(jiān)聽器阱持。
5.如何創(chuàng)建 refs
Refs 是使用 React.createRef() 創(chuàng)建的衷咽，并通過 ref 屬性附加到 React 元素。在構造組件時兵罢，通常將 Refs 分配給實例屬性卖词，以便可以在整個組件中引用它們。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <p ref={this.myRef} />;
}
}
或者這樣用：
class UserForm extends Component {
handleSubmit = () => {
console.log("Input Value is: ", this.input.value)
}
render () {
return (
<form onSubmit={this.handleSubmit}>
<input
type='text'
ref={(input) => this.input = input} /> // Access DOM input in handle submit
<button type='submit'>Submit</button>
</form>
)
}
}
6.什么是高階組件即横？
高階組件(HOC)是接受一個組件并返回一個新組件的函數(shù)裆赵≌绞冢基本上，這是一個模式植兰，是從 React 的組合特性中衍生出來的楣导，稱其為純組件，因為它們可以接受任何動態(tài)提供的子組件噩凹，但不會修改或復制輸入組件中的任何行為。
const EnhancedComponent = higherOrderComponent(WrappedComponent);
HOC 可以用于以下許多用例
- 代碼重用驮宴、邏輯和引導抽象
- 渲染劫持
- state 抽象和操作
- props 處理
7.列出React的一些主要優(yōu)點幻赚。
React的一些主要優(yōu)點是：
- 它提高了應用的性能
- 可以方便地在客戶端和服務器端使用
- 由于 JSX，代碼的可讀性很好
- React 很容易與 Meteor，Angular 等其他框架集成
- 使用React离熏，編寫UI測試用例變得非常容易
8.React有哪些限制滋戳？
React的限制如下：
- React 只是一個庫，而不是一個完整的框架
- 它的庫非常龐大咪笑，需要時間來理解
- 新手程序員可能很難理解
- 編碼變得復雜娄涩，因為它使用內(nèi)聯(lián)模板和 JSX
9.什么是JSX？
JSX 是JavaScript XML 的簡寫扬虚。是 React 使用的一種文件球恤，它利用 JavaScript 的表現(xiàn)力和類似 HTML 的模板語法。這使得 HTML 文件非常容易理解堪置。此文件能使應用非痴湃牵可靠诵叁，并能夠提高其性能。下面是JSX的一個例子：
render(){
return(
<div>
<h1> Hello World from Edureka!!</h1>
</div>
);
}
10.為什么瀏覽器無法讀取JSX？
瀏覽器只能處理 JavaScript 對象彪腔，而不能讀取常規(guī) JavaScript 對象中的 JSX进栽。所以為了使瀏覽器能夠讀取 JSX快毛，首先，需要用像 Babel 這樣的 JSX 轉(zhuǎn)換器將 JSX 文件轉(zhuǎn)換為 JavaScript 對象屯掖，然后再將其傳給瀏覽器襟衰。
11.與 ES5 相比，React 的 ES6 語法有何不同绍坝？
以下語法是 ES5 與 ES6 中的區(qū)別：
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>;
}
}
12.React與Angular有何不同轩褐？
13.什么是控制組件把介？
在 HTML 中竹宋，表單元素如<input>、<textarea>
和<select>通常維護自己的狀態(tài)秒拔，并根據(jù)用戶輸入進行更新飒硅。當用戶提交表單時，來自上述元素的值將隨表單一起發(fā)送庵芭。
而 React 的工作方式則不同雀监。包含表單的組件將跟蹤其狀態(tài)中的輸入值眨唬，并在每次回調(diào)函數(shù)(例如onChange)觸發(fā)時重新渲染組件匾竿，因為狀態(tài)被更新蔚万。以這種方式由 React 控制其值的輸入表單元素稱為受控組件。
14.如何 React.createElement 昵慌？
問題：
const element = (
<h1 className="h=greeting">
Hello, world!
</h1>
)
上述代碼如何使用 React.createElement 來實現(xiàn):
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
15.React 組件生命周期有哪些不同階段斋攀？
在組件生命周期中有四個不同的階段：
Initialization：在這個階段礁芦，組件準備設置初始化狀態(tài)和默認屬性。
Mounting：react 組件已經(jīng)準備好掛載到瀏覽器 DOM 中。這個階段包括componentWillMount和componentDidMount生命周期方法未状。
Updating：在這個階段析桥，組件以兩種方式更新，發(fā)送新的 props 和 state 狀態(tài)埋虹。此階段包括shouldComponentUpdate娩怎、componentWillUpdate和componentDidUpdate生命周期方法。
Unmounting：在這個階段爬泥，組件已經(jīng)不再被需要了崩瓤，它從瀏覽器 DOM 中卸載下來却桶。這個階段包含 componentWillUnmount生命周期方法。
除以上四個常用生命周期外嗅剖，還有一個錯誤處理的階段：
Error Handling：在這個階段，不論在渲染的過程中窗悯，還是在生命周期方法中或是在任何子組件的構造函數(shù)中發(fā)生錯誤蒋院，該組件都會被調(diào)用。這個階段包含了 componentDidCatch 生命周期方法姑丑。
16.這段代碼有什么問題嗎辞友？
this.setState((prevState, props) => {
return {
streak: prevState.streak + props.count
}
})
答案：
沒有什么問題。這種方式很少被使用留拾，咱們可以將一個函數(shù)傳遞給setState痴柔，該函數(shù)接收上一個 state 的值和當前的props疫向，并返回一個新的狀態(tài)，如果咱們需要根據(jù)以前的狀態(tài)重新設置狀態(tài)谈火，推薦使用這種方式舌涨。
17.如何有條件地向 React 組件添加屬性？
對于某些屬性谍肤，React 非常聰明哗伯，如果傳遞給它的值是虛值焊刹，可以省略該屬性恳蹲。例如：
var InputComponent = React.createClass({
render: function() {
var required = true;
var disabled = false;
return (
<input type="text" disabled={disabled} reqyired={reqyired} />
);
}
});
渲染結果：
<input type="text" reqyired>
另一種可能的方法是：
var condition = true;
var component = (
<p
value="foo"
{ ...( condition && { disabled: true } ) } />
);
18.react性能優(yōu)化方案
- 重寫
shouldComponentUpdate來避免不必要的dom操作 - 使用
production版本的react.js - 使用
key來幫助React識別列表中所有子組件的最小變化
Redux
19.MVC框架的主要問題是什么嘉蕾？
- 解釋一下 Flux
- 什么是Redux霜旧？
- Redux遵循的三個原則是什么？
- 你對“單一事實來源”有什么理解以清？
- 列出 Redux 的組件崎逃。
- 數(shù)據(jù)如何通過 Redux 流動个绍？
- 如何在 Redux 中定義 Action？
- 解釋 Reducer 的作用凛虽。
- Store 在 Redux 中的意義是什么广恢？
- Redux與Flux有何不同？
-
Redux 有哪些優(yōu)點？
React 路由
31.什么是React 路由篷牌？
32.為什么React Router v4中使用 switch 關鍵字 枷颊？
33.為什么需要 React 中的路由该面？
34.列出 React Router 的優(yōu)點。
