前端知識儲備

非原創，是本身在找資料的時候的一些彙總，本身的一些總結

CSS篇

一、盒模型

標準盒模型

標準盒模型 width = contentWidth

對應 box-sizing: content-box;

IE盒模型 width = contentWidth + padding + border

對應 box-sizing: border-box;

2.清浮動

一、父層加overflow:hidden;

二、父層添加:after

.parent:after {
    clear:both;
    display:block;
    content:'';
}
.parent {
    *zoom:1;//爲了兼容IE6/7
}
複製代碼

三、添加一個空div，設置

clear:both
複製代碼

3.關於居中

一、適合定寬的，水平居中

{
    marin:0 auto;
}
複製代碼

二、絕對定位,定寬不定寬都適合，垂直居中

{
    position:absloute;
    top:50%;
    left：50%;
    transform: translate(-50%,-50%);
}
複製代碼

{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:0 auto;
}
複製代碼

三、flex (IE10及以上)，垂直居中

.parent{
    display:flex;
    justify-content:center;
    align-item:center
}
複製代碼

四、水平居中

.parent {
    text-align:center;
}
.child{
    display:inline-block;
}
複製代碼

五、垂直居中

{
    text-align:center;
    line-height:20px;//line-height=height
}
複製代碼

六、絕對定位，定高寬的

{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-50px;
    margin-left:-50px;
}
複製代碼

四、css hack

一、條件註釋法

<!--[if !IE]><!--> 除IE外均可識別 <!--<![endif]-->
<!--[if IE]> 全部的IE可識別 <![endif]-->
<!--[if IE 8]> 僅IE6可識別 <![endif]-->
<!--[if lt IE 8]> IE8如下版本可識別 <![endif]-->
<!--[if gte IE 8]> IE8以及IE8以上版本可識別 <![endif]-->

複製代碼

二、類內屬性前綴法

三、選擇器前綴法

五、佈局

一、左定寬，又自適應

一、float+margin-left

.left{
    float:left;
    width:200px;
}
.right {
    margin-left:200px
}
複製代碼

二、雙inline-block/雙float

.left{
    width:200px;
}
.right{
    width: calc(100% - 200px);
}
複製代碼

三、float+bfc

.left{
    float:left;
    margin-right:20px;
}
.right{
    overflow:auto;
}
複製代碼

四、flex

.container {
    disply:flex;
}
.right{
    flex:1;
}
複製代碼

二、聖盃

<div class="container">
    <div class="middle">測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
  .container{
            padding: 0 200px;
        }
        .middle{
            width: 100%;
            background: paleturquoise;
            height: 200px;
            float: left;
        }
        .left{
            background: palevioletred;
            width: 200px;
            height: 200px;
            float: left;
            font-size: 40px;
            color: #fff;
            margin-left:-100%;
            position: relative;
            left:-200px;

        }
        .right {
            width: 200px;
            height: 200px;
            background: purple;
            font-size: 40px;
            float: left;
            color: #fff;
            margin-left: -200px;
            position: relative;
            left:200px;
        }
複製代碼

二、用flex

三、雙飛翼

在聖盃佈局的基礎上，在mian外面加一層main-container,在main 上設置margin:0 200px;

.middle-container{
            width: 100%;
            background: paleturquoise;
            height: 200px;
            float: left;
        }
        .middle {
            margin:0 200px;
        }
        .left{
            background: palevioletred;
            width: 200px;
            height: 200px;
            float: left;
            font-size: 40px;
            color: #fff;
            margin-left:-100%;
        }
        .right {
            width: 200px;
            height: 200px;
            background: purple;
            font-size: 40px;
            float: left;
            color: #fff;
            margin-left: -200px;
        }
複製代碼

六、top和translate來移動的區別

top是cpu經過計算來進行渲染的；translate是GPU計算渲染的，CPU能夠同時作其餘的一些計算；因此translate的性能優於top

七、animation 有哪幾個屬性,transition有哪幾個參數

animation-name 動畫名稱 
animation-duration 動畫時間
animation-timing-function 速度曲線，開始結束的方式
animation-delay 開始播放前的延遲時間
animation-iteration-count 播放次數
animation-direction 是否反向播放
複製代碼

transition: property（css屬性名） duration（時間） timing-function（速度曲線） delay（延遲時間）;

八、bfc的做用

一、包含浮動元素； 二、不被浮動元素覆蓋； 三、阻止margin摺疊的問題

九、offsetWidth/offsetHeight,clientWidth/clientHeight與scrollWidth/scrollHeight的區別

offsetWidth/offsetHeight返回值包含content + padding + border，效果與e.getBoundingClientRect()相同
clientWidth/clientHeight返回值只包含content + padding，若是有滾動條，也不包含滾動條
scrollWidth/scrollHeight返回值包含content + padding + 溢出內容的尺寸
複製代碼

css權重

一、!important，加在樣式屬性值後，權重值爲 10000 二、內聯樣式，如：style=」」，權重值爲1000 三、ID選擇器，如：#content，權重值爲100 四、類，僞類和屬性選擇器，如： content、:hover 權重值爲10 五、標籤選擇器和僞元素選擇器，如：div、p、:before 權重值爲1 六、通用選擇器（*）、子選擇器（>）、相鄰選擇器（+）、同胞選擇器（~）、權重值爲0

sass和scss區別

scss是sass的升級版，一、擴展名不一樣，一個是以.scss 結尾，一個是以.sass結尾；二、sass有嚴格的縮進語法，且不帶{}和;而scss須要{}和；，對空格也不敏感

網絡

一、跨域（同源策略是瀏覽器的一個安全功能，不一樣源的客戶端腳本在沒有明確受權的狀況下，不能讀寫對方資源。若地址裏面的協議、域名和端口號均相同則屬於同源。）

解決辦法：一、jsonp(只能get,沒法適用於post)。原理：利用script標籤沒有跨域限制的「漏洞」來達到與第三方通信的目的

二、服務器端設代理；

三、後端在服務器上設置cors，在Access-Control-Allow-Origin中設置容許的請求源。cors請求分爲簡單請求和非簡單請求。

若是是簡單請求，瀏覽器會直接發送cors請求，即若瀏覽器發現此次跨域爲簡單請求，就會在頭信息（Request Header）中添加一個Origin字段，表示本次請求來自於哪一個源。判斷Origin是否在容許源（由服務端決定）範圍以內，若是驗證經過，服務端會在Response Header 添加 Access-Control-Allow-Origin（必選，表示服務器端容許的請求源）、Access-Control-Allow-Credentials等字段。瀏覽器收到Respnose後會判斷本身的源是否存在 Access-Control-Allow-Origin容許源中，若是不存在，會拋出「同源檢測異常」。

總結：簡單請求只須要CORS服務端在接受到攜帶Origin字段的跨域請求後，在response header中添加Access-Control-Allow-Origin等字段給瀏覽器作同源判斷。

非簡單請求須要CORS服務端對OPTIONS類型的請求作處理，其餘與簡單請求一致

zhuanlan.zhihu.com/p/24411090

二、瀏覽器緩存

cookie/localStorage/sessionStorage

生命週期：

cookie: 可設置失效時間，沒有設置的話，默認關閉瀏覽器後失效；

localstorage:除非手動刪除，不然永久保存；

sessionstorage: 僅在當前網頁會話下有效。關閉頁面或瀏覽器會失效

存放的數據大小

cookie: 4kb左右；local~/session~:5mb左右

cookie每次都會攜帶在http頭中，若是使用cookie保存過多的數據會帶來性能問題；

local~/session~：僅在客戶端（瀏覽器）中保存，不參與和服務器通訊

三、http常見狀態碼

200 OK 請求沒問題實體的主體部分包含了所請求的資源。

202 Accept 接受請求，處理還沒有完成

204 no content 服務器成功處理了請求，但沒有返回任何內容

304 not modified 未修改自動上次請求後，請求的網頁未修改過。服務器返回此響應，不會返回網頁的內容

400 錯誤請求 服務器不理解請求的語法

401 未受權 請求要求身份驗證。對於須要登陸的網頁，服務器可能返回此響應

403 禁止 服務器拒絕請求

404 未找到 服務器找不到請求的網頁

405 方法禁用 禁用請求中指定的方法

500 服務器內部錯誤 服務器遇到錯誤，沒法完成請求

501 還沒有實施 服務器不具有完成請求的功能。例如，服務器沒法識別請求方法時可能會返回此代碼

四、http/https

HTTP缺點

通訊使用明文，可能被竊聽
不驗證通訊方的身份，可能遭遇假裝
沒法證實報文的完整性，有可能遭遇篡改
複製代碼

https = http + TLS/SSL(具備身份驗證、信息加密和完整性校驗的功能)

HTTPS開發的主要目的，是提供對網站服務器的身份認證，保護交換數據的隱私與完整性,加密數據包。

juejin.im/post/5af557…

五、dns解析順序

dns解析順序

JS

1.原型，原型鏈，做用域鏈

做用域鏈的做用是保證執行環境裏有權訪問的變量和函數是有序的，做用域鏈的變量只能向上訪問，變量訪問到window對象即被終止，做用域鏈向下訪問變量是不被容許的 做用域就是變量與函數的可訪問範圍，即做用域控制着變量與函數的可見性和生命週期

juejin.im/post/59de25…

原型是繼承過程當中的基礎對象，是爲了共享多個對象之間的一些共有特性（屬性或方法）

每一個函數都有一個prototype屬性，這個屬性就是原型。原型鏈就是對象之間的繼承鏈，一個對象經過的prototype指向一個父對象，父對象的prototype又指向另外一個對象，最終指向Object對象。這一個關係鏈就是原型鏈

1.對象有屬性__proto__,指向該對象的構造函數的原型對象。 2.方法除了有屬性__proto__,還有屬性prototype，prototype指向該方法的原型對象

__proto__是每一個對象都有的一個屬性，而prototype是函數纔會有的屬性!!!

JavaScript中的對象，都有一個內置屬性[[Prototype]]，指向這個對象的原型對象。當查找一個屬性或方法時，若是在當前對象中找不到定義，會繼續在當前對象的原型對象中查找；若是原型對象中依然沒有找到，會繼續在原型對象的原型中查找（原型也是對象，也有它本身的原型）；如此繼續，直到找到爲止，或者查找到最頂層的原型對象(Object.prototype)中也沒有找到，就結束查找，返回undefined。

原型鏈做用：對象屬性的訪問修改和刪除。

訪問。優先在對象自己查找，沒有則順着原型鏈向上查找
修改。只能修改跟刪除自身屬性，不會影響到原型鏈上的其餘對象。
複製代碼

二、閉包

閉包就是指有權訪問另外一個函數做用域中的變量的函數，閉包的做用域鏈包含着它本身的做用域，以及包含它的函數的做用域和全局做用域。

閉包只能取得包含函數中任何變量的最後一個值，這是由於閉包所保存的是整個變量對象，而不是某個特殊的變量。

使用場景：一個是能夠讀取函數內部的變量，另外一個就是讓這些變量始終保持在內存中，封裝對象的私有屬性和私有方法，實現對象的數據私有化；代替一些全局變量；

壞處：就是消耗內存、不正當使用會形成內存溢出的問題

function test(){
  var arr = [];
  for(var i = 0;i < 10;i++){
    arr[i] = function(){
      return i;
    };
  }
  for(var a = 0;a < 10;a++){
    console.log(arr[a]());
  }
}
test(); // 連續打印 10 個 10 

function test(){
  var arr = [];
  for(let i = 0;i < 10;i++){
    arr[i] = function(){
      return i;
    };
  }
  for(var a = 0;a < 10;a++){
    console.log(arr[a]());
  }
}
test(); // 0-9
複製代碼

緣由 ：

函數1做用域
for(var i = 0; i < 10; i++) { 函數1做用域
        我在函數1做用域中
        arr[i] = function() { 函數2做用域
          我在函數2做用域中
          return i;
        };
}
函數1做用域
console.log(i); 毫無疑問，執行到這裏的時候，i是10，既然這裏是10
                那麼在函數2做用域中訪問i也是10也就不足爲奇了
                由於函數2做用域中沒有，向上去函數1做用域中找
                同一做用域中同一變量名的變量值確定是相同的(未修改的狀況下)

複製代碼

當你換成let的時候，讀取i的時候，在當前做用域（塊3）中沒有找到，向上一個做用域（塊2）尋找，在塊2中發現i，因而拿到值。

塊1做用域
for(let i = 0; i < 10; i++) { 塊2做用域
    我在塊2做用域中
    console.log(i); // 毫無疑問，這裏的i從0依次增長到10  
    arr[i] = function() { 塊3做用域
      我在塊3做用域中
      return i;
    };
}
塊1做用域
複製代碼

三、變量提高和函數提高

包括變量和函數在內的全部聲明都會在任何代碼被執行前首先
被處理
函數聲明比變量聲明優先提高
只有聲明會被提高，變量的賦值或者其餘運行邏輯會留在本地
複製代碼

四、算法

一、冒泡排序

function bubbleSort(arr){
   for(var i=0;i<a.length;i++){
            for(var j=0;j<a.length-i-1;j++){
                var index;
                if( a[j]>a[j+1]){
                    index = a[j];
                    a[j] = a[j+1];
                    a[j+1] = index;
                }
                console.log(a);
            }
        } 
        return arr;
}

複製代碼

二、選擇排序

function quickSort(arr){
        var minIndex,temp;
        for(var i=0;i<arr.length;i++){
            minIndex = i
            for(var j=i+1;j<arr.length;j++){
                if( arr[j]<arr[minIndex]) {
                    minIndex = j;
                }
            }
            if(i!=minIndex){
                temp = arr[minIndex];
                arr[minIndex] = arr[i];
                arr[i]=temp
            }
        } 
        return arr
}

複製代碼

三、統計字符串中次數最多字母

function findMaxDuplicateChar(str) {
  if(str.length == 1) {
    return str;
  }
  var charObj = {};
  for(var i = 0; i < str.length; i++) {
    if(!charObj[str.charAt(i)]) {
      charObj[str.charAt(i)] = 1;
    } else {
      charObj[str.charAt(i)] += 1;
    }
  }
  var maxChar = '',
      maxValue = 1;
  for(var k in charObj) {
    if(charObj[k] >= maxValue) {
      maxChar = k;
      maxValue = charObj[k];
    }
  }
  return maxChar + '：' + maxValue;
}
複製代碼

四、數組去重 juejin.im/post/5aed61…

五、Event Loop

JS 是單線程的，全部任務都須要排隊執行。任務分爲同步任務和異步任務，同步任務是在主線程上進行，而異步任務是先進入事件隊列，等主線程中的任務執行完了，再進入主線程執行。

一、主線程運行的時候產生堆（heap）和棧（stack）

二、棧中的代碼調用各類外部API，它們在"任務隊列"中加入各類事件（click，load，done）

三、只要棧中的代碼執行完畢，主線程就會去讀取"任務隊列"，將隊列中的事件放到執 行棧中依次執行。

四、主線程繼續執行，當再調用外部API時又加入到任務隊列中，等主線程執行完畢又會接着將任務隊列中的事件放到主線程中。 上面整個過程是循環不斷的。

事件隊列（quene）是一個存儲着待執行任務的隊列，其中的任務嚴格按照時間前後順序執行，排在隊頭的任務將會率先執行，而排在隊尾的任務會最後執行。事件隊列每次僅執行一個任務，在該任務執行完畢以後，再執行下一個任務。

六、值類型和引用類型

堆：隊列優先,先進先出；由操做系統自動分配釋放 ，存放函數的參數值，局部變量的值等。其操做方式相似於數據結構中的棧。
棧：先進後出；動態分配的空間 通常由程序員分配釋放， 若程序員不釋放，程序結束時可能由OS回收，分配方式卻是相似於鏈表。
複製代碼

www.cnblogs.com/leiting/p/8…

值類型：boolen, string,number,null,undefined,symbol。保存在棧中，佔用的空間規定。

引用類型：object,function。保存在堆中（引用變量存儲在棧中的是一個指針，指向堆中的數組或者對象的地址），佔用空間不固定

七、js事件綁定

事件綁定及事件委託

一、dom直接綁定：

在dom上直接綁定onclick、onmouseover、onmouseout等等。dom事件

二、在javascript代碼中綁定：

在script標籤中進行綁定

<input type="button" value="click me" id="btn">
<script>
document.getElementById("btn").onclick = function(){
	alert("hello world!");
}
</script>
複製代碼

三、使用事件監聽綁定

關於事件監聽，W3C規範中定義了3個事件階段，依次是捕獲階段、目標階段、冒泡階段。

element.addEventListener(event, function, useCapture)
複製代碼

event : （必需）事件名，支持全部DOM事件。

function：（必需）指定要事件觸發時執行的函數。

useCapture：（可選）指定事件是否在捕獲或冒泡階段執行。true，捕獲。false，冒泡。默認false。

優勢：1.能夠綁定多個事件。2.能夠解除相應的綁定

四、關於事件委託

事件委託就是利用冒泡的原理，把事件加到父元素或祖先元素上，觸發執行效果。

傳統寫法
<ul id="list">
  <li id="item1" >item1</li>
  <li id="item2" >item2</li>
  <li id="item3" >item3</li>
</ul>
<script>
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");
item1.onclick = function(){
	alert("hello item1");
}
item2.onclick = function(){
	alert("hello item2");
}
item3.onclick = function(){
	alert("hello item3");
}
</script>
複製代碼

事件委託
<ul id="list">
  <li id="item1" >item1</li>
  <li id="item2" >item2</li>
  <li id="item3" >item3</li>
</ul>
<script>
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");
document.addEventListener("click",function(event){
	var target = event.target;
	if(target == item1){
		alert("hello item1");
	}else if(target == item2){
		alert("hello item2");
	}else if(target == item3){
		alert("hello item3");
	}
})
</script>
複製代碼

八、ES6相關知識

一、Promise

new Promise((resolved, rejected) => {
  resolved(1);
}).then(data => {
  console.log(data);
}, err => {
  console.log(err);
}).catch(err => {
  console.log(err);
});  // 1
複製代碼

Promise解決了原先用ajax發送多個異步請求時，多層嵌套的一個問題，改成以.then（）這種鏈式的形式進行屢次異步請求，更直觀更方便維護。

Promise有3個狀態：pending(進行中)，fulfilled(成功)，rejected(失敗)

2個過程：pending———>fulfilled (resolve)請求成功 pending——>rejected (reject)請求失敗

1個方法：.then()

Promise.all 用來包裝多個異步請求，只有當裏面全部請求都成功（resolve）時，纔會被調用執行

Promise.race：也是用於將多個Promise實例包裝成一個新的Promise實例，若是這個函數中，有一個Promise變成Fulfilled時，它就會將結果傳遞給下一個Promise

Promise.resolve：它會將一個當前對象轉化爲Promise對象

Promise.reject：返回一個出錯的Promise對象

二、const定義一個空數組，而後往數組中添加元素，會報錯嗎？

不會。當const 定義的是一個值類型時，修改會報錯；當const定義的是一個引用類型（對象）時，修改不會報錯

let是更完美的var，不是全局變量，具備塊級函數做用域,大多數狀況不會發生變量提高。const定義常量值，不可以從新賦值，若是值是一個對象，能夠改變對象裏邊的屬性值

關於變量提高

var a = 10;
function hello(){
    console.log(a)；//undefined
      var a = 11;
      console.log(a);//11
}
hello();

function hello(){
    console.log(a);
      let a = 11;
      console.log(a);
}
hello();//報錯：a is not defined
複製代碼

三、關於箭頭函數

一、箭頭函數的this指向的事定義時所在上下文中的this，而不是使用時的對象；

二、不可以使用arguments對象，可使用擴展符...

三、不可以用做構造函數，這就是說，不可以使用new命令，不然就會拋出一個錯誤

四、import 和 require的區別；import {} 和沒有{}的區別

遵循規範

require 是 AMD規範引入方式
import是es6的一個語法標準，若是要兼容瀏覽器的話必須轉化成es5的語法
複製代碼

調用時間

require是運行時調用，因此require理論上能夠運用在代碼的任何地方
import是編譯時調用，因此必須放在文件開頭
複製代碼

本質

require是賦值過程，其實require的結果就是對象、數字、字符串、函數等，再把require的結果賦值給某個變量
import是解構過程，可是目前全部的引擎都尚未實現import，咱們在node中使用babel支持ES6，也僅僅是將ES6轉碼爲ES5再執行，import語法會被轉碼爲require
複製代碼

模塊輸出時 export { onlyOne }，對應引入時 import { onlyOne } form 。。。

export default 命令，爲模塊指定了默認輸出，讓他們不用閱讀文檔就能用任意自定義模塊名加載模塊。import 「隨意」 form 。。。

es6.ruanyifeng.com/#docs/modul…

九、判斷是否爲數組

一、 isArray()

二、

三、instanceof 運算符是用來測試一個對象是否在其原型鏈原型構造函數的屬性

var arr = []; 
arr instanceof Array; // true

複製代碼

四、constructor屬性返回對建立此對象的數組函數的引用，就是返回對象相對應的構造函數

var arr = []; 
arr.constructor == Array; //true

複製代碼

十、關於this

十一、關於setTimeout、Promise、Async/Await 的區別

async用於聲明一個函數是異步的，async函數返回一個promise blog.csdn.net/lunahaijiao…

十二、關於js的操做

數組轉字符串：join(),toString(), 字符串轉數組：split()

一、數組

二、字符串

三、函數

四、dom操做

1三、ajax

ajax是一種異步請求數據的web開發技術，再不刷新頁面的狀況下，更新頁面局部內容 ajax建立過程 step1. 建立XMLHttpRequest對象，也就是建立一個異步調用對象； step2. 建立一個新的HTTP請求，並指定改HTTP請求的方法、URL以及驗證信息； step3. 設置響應HTTP狀態變化的函數； step4. 發送HTTP請求； step5. 獲取異步調用返回的數據； step6. 使用javascript和DOM實現局部刷新； www.imooc.com/article/352…

get/post區別

1四、值類型和引用類型

值類型（原始數據類型）：Number String Boolean Undefined Null Symbol(es6) 引用類型：object （array function Date） 區別：值類型 保存在棧中， 引用類型保存在堆中，可是不能夠直接訪問堆內存空間中的位置和操做堆內存空間。只能操做對象在棧內存中的引用地址。引用對象的賦值其實是堆內存對象再棧中的引用地址複製，實際二者指向的是同一個堆內存對象

堆和棧是兩種數據結構，堆是先進先出，棧是先進後出。

1五、深拷貝淺拷貝

深淺拷貝是相對於引用類型來講的 淺拷貝：子對象和父對象在淺拷貝的時候他們指向同一個內存的數組，因此子對象修改，父對象也會被修改 深拷貝：深度拷貝就是把父對象拷貝到子對象上，並且二者的內存和之後的操做都互不影響的拷貝 深拷貝方法一：

function deepCopy(obj) {
        return JSON.parse(JSON.stringify(obj));
    }
複製代碼

深拷貝方法二：

function deepCopy(obj){
            var newobj, obj;
            if (obj.constructor == Object){
                newobj = new obj.constructor();
            }else{
                newobj = new obj.constructor(obj.valueOf());//valueOf()方法返回 Array 對象的原始值
            }
            for(var key in obj){
                if ( newobj[key] != obj[key] ){
                    if ( typeof(obj[key]) == 'object' ){
                        newobj[key] = deepCopy(obj[key]);
                    }else{
                        newobj[key] = obj[key];
                    }
                }
            }
            newobj.toString = obj.toString;
            newobj.valueOf = obj.valueOf;
            return newobj;
        }
複製代碼

1六、=== 和 == 的區別

== 只要求值相等，=== 是更嚴格的相等，要求值和類型都相等

框架

一、mvc mvp mvvm

MVC：用戶操做->View（用戶界面，負責接收用戶的輸入操做）->Controller（業務邏輯處理）->Model（數據保存，數據持久化）->View（將結果反饋給View）。

mvp:

mvvm:採用數據雙向綁定，視圖的數據的變化會同時修改數據源，而數據源數據的變化也會當即反應到View上

二、react

Virtual DOM是一個映射真實DOM的JavaScript對象，若是須要改變任何元素的狀態，那麼是先在Virtual DOM上進行改變，而不是直接改變真實的DOM。

react 和vue的一個區別：對於react而言，應用狀態的改變會引發全部子組件的從新渲染，可是能夠經過shouldComponentUpdate來控制子組件是否須要從新渲染。可是對於vue而言，這是一個默認的優化，它在渲染過程當中，會跟蹤每個組件的依賴關係，不須要從新渲染整個組件樹。因此它能夠更快的計算出virtual dom的差別。

react的數據傳遞：

一、父到子：經過props傳遞；
二、子到父：父組件傳一個callback回調函數給子組件調用，父組件定義一個函數看成props傳遞給子組件，在子組件中調用該函數，並將相關數據傳進去，父組件中就能夠拿到
三、同級之間的組件：先callback拿到其中一個子組件的數據，在經過props傳給另外一個子組件
四、context
複製代碼

const PropTypes = require('prop-types');

class Children extends React.Component {
  static contextTypes = {
    text: PropTypes.string
  }
  render() {
    return (
      <div>{ this.context.text }</div>
    )
  }
}

class Parent extends React.Component {
  render() {
    return (
      <Children/>
    )
  }
}

class GrandParent extends React.Component {
  static childContextTypes = {
    text: PropTypes.string,
  }
  getChildContext() {
    return {
      text: 'Hi, my baby'
    }
  }
  render() {
    return (
      <Parent text="Hi, my baby" />	
    )
  }
}
複製代碼

在 GrandParent 上經過 getChildContext 給 context 對象添加了 text 的屬性，這個屬性能夠在 GrandParent 的任何一個子孫（子組件）中訪問。

Redux 解決的是大型軟件架構中數據流傳輸的問題；context 解決的是子孫之間方便數據交互的問題。有必定的類似性，但不屬於同等性質。

三、redux（嚴格的單向數據流）

三大原則：一、單一的數據源：整個應用的state都被儲存在一棵樹中，而且這棵狀態樹只存在於惟一一個store中；

二、只讀的state:惟一改變state的方法就是出發一個action;

三、使用純函數修改state:爲每一個action用純函數編寫reducer來描述如何修改state樹.reducer接受 Action 和當前 State 做爲參數，返回一個新的 State。

純函數：一、有傳入的值就有返回的新值，二、不依賴外部的狀態、變量或常量，三、不修改傳入的值 store的職責：維持應用的 state；

提供 getState() 方法獲取 state；

提供 dispatch(action) 方法更新 state；

經過 subscribe(listener) 註冊監聽器;

經過 subscribe(listener) 返回的函數註銷監聽器。

經過store.getState()來了解工廠中商品的狀態，使用store.dispatch（接收action做爲參數）發送action指令

react-redux 提供了兩個重要的對象， Provider 和 connect ，前者使 React 組件可被鏈接（connectable），後者把 React 組件和 Redux 的 store 真正鏈接起來。

首先在最外層容器中，把全部內容包裹在 Provider 組件中，將以前建立的 store做爲 prop 傳給 Provider 。

const App = () => {
  return (
    <Provider store={store}>
      <Comp/>
    </Provider>
  )
};
複製代碼

Provider 內的任何一個組件（好比這裏的 Comp ），若是須要使用 state 中的數據，就必須是「被 connect 過的」組件——使用 connect 方法對「你編寫的組件（ MyComp ）」進行包裝後的產物。

class MyComp extends Component {
  // content...
}

const Comp = connect(...args)(MyComp);
複製代碼

react-redux中的connect方法將store上的getState 和 dispatch包裝成組件的props。

connect將方法和組件進行綁定。connect() 接收四個參數，它們分別是 mapStateToProps ， mapDispatchToProps， mergeProps 和 options 。

第一個參數將 store 中的數據做爲 props 綁定到組件上。

第二個參數將 action 做爲props 綁定到 MyComp 上。 blog.csdn.net/u010977147/…

三、react的相關問題

一、在構造函數中定義一個id=1,setState修改成id=2,接着打印id，值是多少？

答案是：1

二、連續三次調用setState，render會渲染幾回

答案是： 1

以上兩題，由於setState是異步的，他會先進入事件隊列中等待，並非立刻出結果

webpack

webpack是把項目看成一個總體，經過一個給定的主文件(入口文件)，webpack將從這個文件開始找到你的項目的全部依賴文件，使用loaders處理它們，最後打包成一個或多個瀏覽器可識別的js文件

webpack詳解

vue

核心：一、響應式的數據綁定系統（雙向數據綁定）；二、組建系統。 仔細看原理，戳我

數據雙向綁定原理

經過Object.defineProperty( )實現對屬性的劫持，給每一個屬性對象都加上 setter和getter，已達到數據變更監聽的目的，再結合發佈者-訂閱者，讓多個觀察者同時監聽某一個主題對象，這個主題對象的狀態發生改變時就會通知全部觀察者對象。

發佈者發出通知 => 主題對象收到通知並推送給訂閱者 => 訂閱者執行相應操做
複製代碼

爲何vue中的data必須是個函數？

優化方法

減小重繪(repaint)和迴流（reflow），迴流指dom結構發生變化，或尺寸、佈局發生變化，重繪指不影響佈局的外觀樣式發生變化，如background-color.迴流必定會引發重繪，重繪不必定引發迴流