React面試題總結，一文說清！

前言

JavaScript是面向 Web 的編程語言，獲得了所有網頁瀏覽器的支持，是目前使用最廣泛的腳本編程語言之一，也是網頁設計和 Web 應用必須掌握的基本工具。

JavaScript主要用途

嵌入動態文本與HTML頁面
對瀏覽器時間做出相應
讀寫HTML元素
在數據被提交到服務器之前驗證數據
檢測訪客的瀏覽器信息
控制cookies，包括創建和修改等。
基于node.js技術進行服務器端編程。

二.技術基礎知識

基礎知識一直都是重點考察的內容，包含有HTML（5）、CSS（3）、JavaScript到Vue，React等等所有可能考察的知識。

基礎知識不僅僅要知道是什么，更要明白怎么用，為什么這么用。死記硬背能應付一時，如果你遇到了想深入聊聊的面試官，死記硬背就沒用了。所以每個知識點都要理解透徹，講的清楚。

每次面試都要提前做好準備，下面是一些常考的面試知識點，大家可以提前準備

HTML(5)：

1）H5的新特性有哪些？
2）Label的作用是什么？是怎么用的？
3）HTML5的form如何關閉自動完成功能
4）實現不使用 border 畫出1px高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果
5）title與h1的區別、b與strong的區別、i與em的區別？
6）每個HTML文件里開頭都有個很重要的東西，Doctype，知道這是干什么的嗎？
7）img的alt與title有何異同？ strong與em的異同？
8）簡述一下src與href的區別？
9）知道的網頁制作會用到的圖片格式有哪些？
10）你如何理解HTML結構的語義化？
11）html5有哪些新特性、移除了那些元素？
12）如何處理HTML5新標簽的瀏覽器兼容問題
13）…

CSS:

1）css盒模型
（1）css盒模型基本概念？
（2）標準模型和IE模型的區別：計算高度和寬度的不同，怎么不同，高度寬度是怎么計算的？
（3）js如何設置獲取盒模型對應的寬和高？
（4）…
2）BFC（邊距重疊解決方案）
（1）BFC的基本概念？
（2）BFC原理/ BFC渲染規則？
（3）如何創建BFC？
（4）BFC的使用場景？
3）css浮動
（1）css浮動原理？
（2）浮動元素引起的問題？
（3）css清除浮動的方法？
4）css經典布局
（1）三欄布局：左右各300px,中間自適應？
（2）圣杯布局
（3）雙飛翼布局
（4）css水平、垂直居中的寫法，請至少寫出4種？
5）css兼容
（1）經常遇到的css兼容性的問題在哪些？如何解決的？
6）css hack
（1）什么是CSS hack？
（2）CSS hack的原理？
（3）CSS hack分類？
（4）CSS hack書寫順序？
7）…

因為篇幅有限，面試題沒有全部列出，所有的面試題包括HTML面試題總結，CSS面試題總結，JavaScript面試題總結，Vue面試題總結，React面試題總結等等面試題都有整理成PDF文檔，有需要的伙伴可以看文末，免費領取！

JavaScript：

1）原型鏈
（1）創建對象有幾種方法？
（2）instanceof的原理？
2）類
（1）類的聲明？
（2）,生成實例？聲明一個類，怎么生成類的實例？
3）繼承
（1）call、apply的共同點與區別?
（2）用javascript實現對象的繼承/ 繼承的幾種方式，這幾種方式的優缺點?
4）作用域
（1）說說你對作用域鏈的理解？
（2）this？
（3）…
5）閉包
（1）閉包的特征？
（2）閉包應用場景？
（3）實際開發中閉包的應用？
（4）…
6）運行機制/ 單線程/ 異步
（1）如何理解js的單線程？
（2）js為什么是單線程的？
（3）同步和異步的區別是什么？分別舉一個同步和異步的例子？
（4）何時需要異步？
（5）什么是任務隊列？
（6）棧和隊列的區別？
（7）棧和堆的區別？
7）數據類型
（1）js使用typeof能得到的哪些類型？
（2）如何準確判斷一個變量是數組類型？
（3）js變量按照存儲方式區分為哪些類型，并描述其特點？
（4）null和undefined的區別？
（5）undefined的典型用法？
（6）null的典型用法？
（7）…
8）內置函數/內置對象
（1）js中有哪些內置函數/ 數據封裝類對象？
（2）js中有哪些內置對象？
（3）js變量按照存儲方式區分為哪些類型，并描述其特點？
（4）字符串方法/ String對象方法?
（5）數組方法/ Array對象方法？
9）數組去重
（1）數組怎么去重？（方法）
（2）對上述數組去重方法速度比較？（性能）
（3）一句話數組去重？
（4）保留數組中非重復元素？
10）邏輯判斷
11）內存泄漏
（1）哪些操作會造成內存泄漏？
（2）js內存泄漏的解決方式
12）dom
（1）dom是哪種基本的數據結構？
（2）dom操作的常用api有哪些？
（3）dom節點的attribute和property有何區別？
（4）dom結構操作/ 怎樣添加、移除、移動、復制、創建和查找節點/ dom操作的
（5）常用api？
（6）dom事件的級別？
（7）dom事件模型？
（8）dom事件流？
（9）…
13）通信
（1）什么是同源策略及限制？
（2）前后端如何通信？
（3）跨域通信的幾種方式？
14）ajax
（1）ajax請求的原理，手寫一個ajax請求？
（2）readyState？
（3）ajax異步與同步的區別？

Vue:

1）vue-cli工程
（1）構建的 vue-cli 工程都到了哪些技術，它們的作用分別是什么？
（2）vue-cli 工程常用的 npm 命令有哪些？
（3）請說出vue-cli工程中每個文件夾和文件的用處
（4）config文件夾下 index.js 的對于工程開發環境和生產環境的配置
（5）請你詳細介紹一些 package.json 里面的配置
2）vue核心知識點
（1）對于Vue是一套漸進式框架的理解
（2）vue.js的兩個核心是什么？
（3）請問 v-if 和 v-show 有什么區別
（4）vue常用的修飾符
（5）v-on可以監聽多個方法嗎？
（6）vue中 key 值的作用
（7）vue事件中如何使用event對象？
（8）$nextTick的使用
（9）Vue 組件中 data 為什么必須是函數
（10）v-for 與 v-if 的優先級
（11）vue中子組件調用父組件的方法
（12）vue中 keep-alive 組件的作用
（13）什么是vue生命周期？
（14）vue生命周期鉤子函數有哪些？
（15）vue如何監聽鍵盤事件中的按鍵？
（16）vue更新數組時觸發視圖更新的方法
（17）解決非工程化項目初始化頁面閃動問題
（18）v-model語法糖的組件中的使用
（19）…
3）vue-router
（1）vue-router如何響應路由參數的變化？
（2）完整的 vue-router 導航解析流程
（3）vue-router有哪幾種導航鉤子（導航守衛）？
（4）vue-router傳遞參數的幾種方式
（5）…
4）vuex
（1）什么是vuex？
（2）使用vuex的核心概念
（3）vuex在vue-cli中的使用
（4）在vue中使用vuex，修改state的值
5）http請求
（1）Promise對象是什么？
（2）axios、fetch與ajax有什么區別？
（3）…
6）UI樣式
（1） .vue組件的scoped屬性的作用
（2）如何讓CSS只在當前組件中起作用？
（3）vue中常用的UI組件庫
（4）如何適配移動端？【經典】
（5）…
7）MVVM設計模式
（1）MVC、MVP與MVVM模式
（2）MVP
（3）MVVM的實現原理
（4）Object.defineProperty()方法

React

1）基本知識
（1）什么是React？
（2）React有什么特點？
（3）列出React的一些主要優點。
（4）React有哪些限制？
（5）什么是JSX？
（6）…
2）React 組件
（1）你理解“在React中，一切都是組件”這句話。
（2）解釋 React 中 render() 的目的。
（3）如何將兩個或多個組件嵌入到一個組件中？
（4） React中的狀態是什么？它是如何使用的？
（5）區分狀態和 props
（6）如何更新組件的狀態？
（7）React 中的箭頭函數是什么？怎么用？
（8）區分有狀態和無狀態組件。
（9）React組件生命周期的階段是什么？
（10）詳細解釋 React 組件的生命周期方法。
（11）React中的事件是什么？
（12）如何在React中創建一個事件？
（13）React中的合成事件是什么？
（14）你對 React 的 refs 有什么了解？
（15）…
3）React Redux
（1）MVC框架的主要問題是什么？
（2）解釋一下 Flux
（3）什么是Redux？
（4）Redux遵循的三個原則是什么？
（5）列出 Redux 的組件
（6）…
4）React 路由
（1）什么是React 路由？
（2）為什么React Router v4中使用 switch 關鍵字？
（3）為什么需要 React 中的路由？