1. webpack的看法

webpack是一個打包工具，可以使用webpack管理你的模塊依賴可以分析各模塊之間的依賴關(guān)系蹂风，最后優(yōu)化合并后的資源
特色：

1. 利用loader處理各種類型的靜態(tài)文件
2. 對js,css,圖片等資源文件支持打包
3. 可以將代碼分割嗅绸，按需加載搞疗，
4. 具有強大的plugin接口嗤朴，擴展webpack功能

2.閉包

使用閉包主要是為了設(shè)計私有的方法和變量娱仔，閉包的優(yōu)點是可以避免全局變量的污染沐飘，缺點是閉包會常駐內(nèi)存，會增大內(nèi)存的使用牲迫，還會造成內(nèi)存泄漏
閉包的三大特點

1. 函數(shù)嵌套函數(shù)
2. 函數(shù)內(nèi)部可以使用外部的參數(shù)和變量
3. 參數(shù)和變量不會被垃圾回收機制回收

3. new 操作符具體干了什么

1. 創(chuàng)建一個空對象耐朴，并且this變量引用該對象，同時還繼承該函數(shù)的原型
2. 屬性和方法被加入到this引用的對象中
3. 新創(chuàng)建的對象由this所引用盹憎，并且最后隱式的返回thi
   s

var obj ={}
obj._proto_ = base.prototype;
base.call(obj)

4. 動態(tài)加載路由

這個模塊是一個高階組件筛峭，返回一個個新的組件，傳入一個參數(shù)陪每，即需要動態(tài)加載組件的方法影晓，在返回的asyncComponent組件內(nèi)部，先初始化一個state 為child=null,定義一個this.unmount = false,用于表示組件是否被卸載檩禾，用async定義異步方法挂签，await異步執(zhí)行傳入的參數(shù)，用于動態(tài)加載當(dāng)前路由的組件盼产。

}L)JX75EK`C$2$AU827T31M.png

5. 介紹Redux數(shù)據(jù)流的流程

View組件通過click等事件竹握，dispatch一個(actionCreator返回的)action，通過Store把當(dāng)前狀態(tài)state和action傳遞給訂閱者reducer函數(shù),reducer返回一個新的狀態(tài)存儲在Store中辆飘，Store又把新的State傳遞給View組件觸發(fā)組件更新啦辐。

為了將Redux和React聯(lián)系到一起。就需要用到React-Redux這個庫蜈项。

import { connect } from 'react-redux'
const containerComponent = connect(mapStateToProps, mapDispatchToProps)(presentationalComponent)

簡單來說芹关，mapStateToProps和mapDispatchToProps就是分別把Redux的state,和dispatch(action)映射到React組件中作為props。connect將展示組件(presentationalComponent)封裝成高階的容器組件(containerComponent)紧卒。state的更新意味著props更新侥衬。
https://segmentfault.com/a/1190000010407887?utm_source=tag-newest

6. Redux如何實現(xiàn)多個組件之間的通信，多個組件使用相同狀態(tài)如何進(jìn)行管理

react-redux(Provider 傳入到最外層組件store 在需要用到的地方 用 connect 獲取 (mapStateToProps, mapDispatchToProps) 在頁面中引用)
類似發(fā)布訂閱模式, 一個地方修改了這個值, 其他所有使用了這個相同狀態(tài)的地方也會更改

7. 多個組件之間如何拆分各自的state跑芳，每塊小的組件有自己的狀態(tài)轴总，它們之間還有一些公共的狀態(tài)需要維護，如何思考這塊

一個全局的 reducer , 頁面級別的 reducer , 然后redux 里有個 combineReducers 把所有的 reducer 合在一起,小組件的使用與全局的使用是分開的互不影響

8. react和vue的區(qū)別

相同點：

1. 都支持服務(wù)器端渲染
2. 都是Virtual Dom組件化開發(fā)博个，通過props參數(shù)進(jìn)行父子組件數(shù)據(jù)的傳遞
3. 數(shù)據(jù)驅(qū)動視圖
   不同點：
4. react嚴(yán)格上只正對MVC的view層怀樟，而vue則是mvvm模式
5. virtual dom 不一樣，vue會跟蹤每一個組件的依賴關(guān)系盆佣，不需要要渲染整個組件樹往堡，而react則是每當(dāng)應(yīng)用的狀態(tài)被修改時，全部組件都會重新渲染共耍，所以react中會需要shouldComponentUpdate這個生命周期函數(shù)來進(jìn)行控制
6. react推薦的*做法是JSX+ inline style 也就是把HTML和CSS都寫進(jìn)js中虑灰，即all in js/
   vue做法是webpack + vue-loader 的單文件組件格式 即 html, css, js都寫進(jìn)同一個文件 ？痹兜？穆咐？？
7. 數(shù)據(jù)綁定： vue實現(xiàn)數(shù)據(jù)的雙向綁定 字旭， react 數(shù)據(jù)流動是單向的
8. state對象在react中是不可變的对湃，需要調(diào)用setstate來更新操作。而在vue中谐算， state對象不是必須的熟尉，數(shù)據(jù)由data屬性在vue對象中管理

9. margin 重合問題

1. 元素的頂邊界和前面元素的底邊界發(fā)生疊加

   
   
   1410000.jpg
2. 元素的頂邊界與父元素的底邊界發(fā)生疊加
   1410001.jpg
   
   只有在普通文檔流中塊框垂直邊界才會發(fā)生邊界疊加問題，行內(nèi)框洲脂，浮動框或者絕對定位框之間的邊界不會疊加

• 補救方案：
• 外層padding
• 透明邊框 border: 1px solid transparent
• 外層div加overflow:hidden斤儿；zoom:1
• 內(nèi)層div用 float:left;display:inline;

10. css3新屬性

1. border

• border-radius:圓角
• box-shadow: 邊框陰影
• border-image: 邊框圖片

2. background

• background-size: 背景圖片尺寸
• background-origin: 背景圖片定位

3. 文字效果

• text-shadow: 文本陰影
• word-wrap: 文本換行{word-wrap:break-word}

4. 2d轉(zhuǎn)換

• transform:對元素進(jìn)行移動，旋轉(zhuǎn)恐锦，縮放往果，拉伸

1. translate(x,y):移動
2. rotate(xxxdeg)：旋轉(zhuǎn)給定角度3d轉(zhuǎn)換rotateX()/rotateY()
3. scale(xx):縮放；

• css3過渡 transition()
  將一種樣式逐漸改變?yōu)榱硗庖环N樣式

.div{
width:100px;
height:100px;
transition:width 2s ,height 2s
}
.div:hover{
width:200px;
height:200px;
}

• css3動畫
  @keyframes+animation

.div{
    animation:myfirst 1s ;
}
@keyframes myfirst{
  0% {xxxxxx}
50% {xxxxx}
100% {xxxxxx}
}

11. 變量的作用域/作用域鏈

1. 作用域
   分為：全局變量/局部變量
   特點：
   函數(shù)內(nèi)部可以讀取函數(shù)外部的全局變量一铅，但是函數(shù)外部無法讀取函數(shù)內(nèi)部的局部變量
2. 作用域鏈
   在js中一切皆對象陕贮，函數(shù)對象和其他對象一樣，擁有可以通過代碼訪問的屬性和乙烯類供js引擎訪問的內(nèi)部屬性潘飘，其中一個內(nèi)部屬性就是[[scope]]肮之，該屬性包含了函數(shù)被創(chuàng)建的作用域中對象的合集掉缺，這個合集被成為函數(shù)的作用域鏈
   例如

 function func() {
            var num = 1;
            alert(num);
        }
        func();

141656510578295.png

12. 垃圾回收機制

1. 標(biāo)記清除：(較為常用)當(dāng)變量進(jìn)入環(huán)境則標(biāo)記為‘進(jìn)入環(huán)境’，當(dāng)變量離開環(huán)境時戈擒，則標(biāo)記為‘離開環(huán)境’
2. 引用計數(shù)：就是變量的引用次數(shù)眶明，被引用一次則加1，當(dāng)這個引用計數(shù)為0時筐高，被視為準(zhǔn)備回收的對象搜囱。

13. $(document).ready()方法和window.onload有什么區(qū)別？

$(document).ready()：可以在dom載入就緒時對其進(jìn)行操作柑土，并調(diào)用執(zhí)行綁定的函數(shù)
window.onload：網(wǎng)頁中的所有元素完全加載到瀏覽器后才執(zhí)行

14. React組件中怎么做事件代理

在react內(nèi)通過onclick綁定的事件蜀肘，實際上并沒有把點擊事件綁定到對應(yīng)的元素上，而是統(tǒng)一放到document上處理稽屏。
注意
react在document上綁定了一個dispatchEvent事件扮宠，在執(zhí)行dispatchEvent過程中，其內(nèi)部會一次執(zhí)行父組件和子組件上的綁定事件诫欠，其出發(fā)過程類似于事件冒泡

15. react-router里的<Link>標(biāo)簽和<a>標(biāo)簽有什么區(qū)別

對比<a>,Link組件避免了不必要的重渲染

16.webpack優(yōu)化

1. css壓縮：minCssExtractPlugin({filename:'xxxxx'})
2. hash緩存

[hash] ： 整個項目有變動時涵卵，hash 變化。
[chunkhash] ： chunk 有變動荒叼，chunkhash 變化
[contenthash] ： 目前文檔沒有明確定義和說明轿偎，但是和文件內(nèi)容的變化相關(guān)

3.單獨打包業(yè)務(wù)代碼第三方類庫，runtime

optimization:{
splitChunks:{
  chunks:'all'  // 打包 node_modules里的代碼
  },
runtimeChunks // 打包 runtime 代碼
}

4. 懶加載/代碼分割

webpack 內(nèi)置方法 : require.ensure() 和 require.include()
es2015 定義的 動態(tài) import,import 返回 promise

5. 壓縮混淆代碼
   webpack4只需要設(shè)置mode:production
   如果用了css壓縮被廓，要自己使用uglifyjs壓縮js

  minimizer: [
      new OptimizeCssAssetsPlugin({}), // 壓縮 css,使用minimizer會自動取消webpack的默認(rèn)配置坏晦，所以記得用UglifyJsPlugin
      new UglifyJsPlugin({
        // 壓縮 js
        uglifyOptions: {
          ecma: 6,
          cache: true,
          parallel: true
        }
      })
    ]

6. 開啟gzip壓縮
   gzip壓縮有點：減小文件體積，傳輸速度更快

const CompressionWebpackPlugin = require('compression-webpack-plugin');

webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp('\\.(js|css)$'),
      threshold: 10240,
      minRatio: 0.8
    })
)

7. tree shaking
   tree shaking 的原理

• ES6 的模塊是靜態(tài)分析的嫁乘。所以在編譯時可以判斷哪些代碼沒有 exports
• 分析程序流昆婿，判斷哪些變量沒有被使用、從而刪除代碼
  https://segmentfault.com/a/1190000015836090

靜態(tài)資源最終訪問路徑 = output.publicPath + 資源loader或插件等配置路徑

• output.path只是指示輸出的目錄蜓斧，
• output.publicPath:該配置能幫助你為項目中的所有資源指定一個基礎(chǔ)路徑仓蛆，它被稱為公共路徑(publicPath)。
• webpack-dev-server打包的內(nèi)容是放在內(nèi)存中的挎春，這些打包后的資源對外的的根目錄就是publicPath看疙，換句話說，這里我們設(shè)置的是打包后資源存放的位置

17. react-motion

spring(val: number, config?: SpringHelperConfig)

• val：number, 終點值
• config: 用于生成動畫緩動效果的配置
• stiffness：默認(rèn)值170 - damping：默認(rèn)值26 - precision： 默認(rèn)值0.01直奋，用于配置val的精確度能庆，一般不需改動

1. <Motion>適合編寫單個組件的形變動畫
   例如：方塊移動
   屬性：
   style：Object，動畫樣式
   defaultStyle：Object脚线，初始樣式
   children：子元素
   onRest：動畫結(jié)束時觸發(fā)回調(diào)
2. <StaggeredMotion>用于編寫一串有相互關(guān)聯(lián)關(guān)系的實體的動畫搁胆。
   例如:跟隨鼠標(biāo)
   屬性：
   styles：Array，動畫樣式
   defaultStyles：Array，初始樣式
   children：子元素
3. <TransitionMotion>則是用來編寫組件mount和unmount的動畫
   例如：折疊
   屬性：
   styles：Array渠旁，動畫樣式
   defaultStyles：Array攀例，初始樣式
   children：子元素

18. js 數(shù)據(jù)類型

基本數(shù)據(jù)類型：number,string, bollean, undefined, null,Symbol
對象數(shù)據(jù)類型： object
三大引用類型

1. object類型
2. array類型
3. function類型

• 引用類型是存放在堆內(nèi)存中的對象，變量其實是保存在棧內(nèi)存中的一個指針（保存的是堆內(nèi)存中的引用地址）
• 簡單數(shù)據(jù)類型是存放在棧中的簡單數(shù)據(jù)段一死，他是直接按值存放的.
• symbol：解決字符串容易造成屬性名的沖突的問題肛度，時一種新的原始的數(shù)據(jù)類型，表示獨一無二的值投慈。
  基本類型和對象類型的區(qū)別
• 可變性：基本類型時不可變類型，無法添加屬性冠骄，即使添加屬性伪煤，解析器也無法在下一步讀取它，而對象類型是可變類型凛辣，支持添加和刪除屬性
• 比較和傳遞：基本類型一般按值比較抱既，按值傳遞。對象類型按引用比較扁誓，按引用傳遞

19. react 虛擬DOM實現(xiàn)原理防泵，以及為什么虛擬DOM會提高性能

1. 用js對象結(jié)構(gòu)表示DOM樹的結(jié)構(gòu)，然后用這個樹構(gòu)建一個真正DOM樹蝗敢，插入到文檔中
2. 當(dāng)狀態(tài)變更的時候捷泞，會重新構(gòu)建一棵樹的對象樹，然后對比新舊虛擬DOM,記錄兩顆樹差異
3. 把2狀態(tài)記錄的差異應(yīng)用到1步驟中所構(gòu)建的真正的DOM樹寿谴，視圖更新
   原因：虛擬DOM相當(dāng)于在js和dom中加了一個緩存锁右，利用diff算法減少了對真實dom的操作次數(shù)，從而提高性能

20. react 如何從虛擬dom中拿到真實dom

refs是react提供給我們的安全訪問dom元素或者某個組件實例的句柄
可以通過ref屬性然后在回掉函數(shù)中接受該元素在DOM樹中的句柄

21. react中的props和state

state是一種數(shù)據(jù)結(jié)構(gòu)讶泰，用于組件掛在時所需數(shù)據(jù)的默認(rèn)屬性咏瑟，可以發(fā)生改變
props是組件的配置。props由負(fù)組件傳遞給子組件痪署，并且就子組件而言,props是不可變的

22. react中setState的原理及用法

當(dāng)調(diào)用setstate時码泞，它并不會立即改變，二十會把要修改的狀態(tài)放入一個任務(wù)隊列狼犯，等到事件循環(huán)結(jié)束時余寥，再合并更新
所以setstate有異步，合并更新兩個特性
setstate為什么異步

• 保持內(nèi)部的一致性
• 性能優(yōu)化
• 支持state在幕后渲染

23. react性能優(yōu)化

1. 利用shouldComponentUpdate辜王，需要組件盡量最小化
2. dom遍歷時加上唯一的key
3. 盡量使用const聲明
4. 減少對真實的dom操作
5. 代碼分割/異步加載