摘要：對(duì)于，其默認(rèn)大小一般是本地存儲(chǔ)和都保存在瀏覽器端，且都是同源的。把變量放在閉包中和放在全局作用域，對(duì)內(nèi)存的影響是一致的，這里并不能說成是內(nèi)存泄露。將新的樹和之前的虛擬樹進(jìn)行相比較，根據(jù)結(jié)果對(duì)進(jìn)行精準(zhǔn)響應(yīng)。

https://zhuanlan.zhihu.com/p/...

對(duì)于必須要在DOM加載之前運(yùn)行的JavaScript腳本，我們需要把這些腳本放置在頁面的head中，而不是通過外部引用的方式，因?yàn)橥獠康囊梅绞皆黾恿司W(wǎng)絡(luò)的請(qǐng)求次數(shù)；

async表示異步加載JavaScript文件，它的下載過程可以在HTML的解析過程中運(yùn)行，加載完成之后立即執(zhí)行這個(gè)文件的代碼，執(zhí)行文件代碼的過程中會(huì)阻塞HTML的解析，它不保證文件加載的順序。
defer表示在HTML文檔解析之后再執(zhí)行加載完成JavaScript文件，JavaScript文件的下載過程可以在HTML的解析過程中進(jìn)行，它是按照script標(biāo)簽的先后順序來加載文件的。

map返回一個(gè)新數(shù)組
forEach遍歷數(shù)組，返回值為undefined
reduce累加器，遍歷時(shí)避開創(chuàng)建新數(shù)組減少冗(rong)余，返回值由參數(shù)callback決定

session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上。當(dāng)訪問增多時(shí)，會(huì)占用服務(wù)器的資源，所以考慮服務(wù)器性能方面，可以使用cookie
cookie存儲(chǔ)容量有限制，單個(gè)cookie保存數(shù)據(jù)不能超過4k，且很多瀏覽器限制一個(gè)站點(diǎn)最多保存20個(gè)cookie。對(duì)于seesion，其默認(rèn)大小一般是1024k
localStorage本地存儲(chǔ)和cookie都保存在瀏覽器端，且都是同源的。每個(gè)域5MB

apply
接受2個(gè)參數(shù)：一個(gè)是在其中運(yùn)行的函數(shù)作用域(Scope)，另一個(gè)可以是arguments也可以是Array的實(shí)例，經(jīng)典案例:#獲取數(shù)組中最大的值#；#使用push合并數(shù)組#；
call
和apply用法相同，只是除了第一個(gè)都是作用域之外，其余參數(shù)必須逐個(gè)列舉出來。經(jīng)典用例：#使用call調(diào)用匿名函數(shù)#
bind
接受1個(gè)參數(shù)，返回一個(gè)新函數(shù)，這個(gè)新函數(shù)的this值來自bind(context)函數(shù)傳遞的context

Function.prototype.bind = function(context){
    var self = this;      //原函數(shù)
    return function(){    //返回一個(gè)新函數(shù)
        return self.apply(context, arguments)
    }
}

https://segmentfault.com/a/11...

思路一：
1.雙層循環(huán)，外層循環(huán)元素，內(nèi)存循環(huán)時(shí)比較值
2.如果有相同的值則跳過（break），不相同則push近數(shù)組
思路二：利用splice直接在原數(shù)組進(jìn)行操作（刪除元素時(shí)，需要更新數(shù)組長度）
思路三：利用對(duì)象的屬性不能相同的特點(diǎn)進(jìn)行去重
思路四：數(shù)組遞歸去重
1.運(yùn)用遞歸的思想
2.先排序，然后從最后開始比較，遇到相同，則刪除
思路五：利用indexOf以及forEach
思路六：利用indexOf以及sort
思路七：利用ES6的set

當(dāng)在函數(shù)內(nèi)搜索一個(gè)變量時(shí)，如果函數(shù)內(nèi)沒有這個(gè)變量，那么此次搜索過程會(huì)隨著代碼執(zhí)行環(huán)境創(chuàng)建的作用域鏈往外逐層搜索

全局變量的生存周期是永久的
對(duì)于函數(shù)內(nèi)var聲明的局部變量，當(dāng)退出函數(shù)時(shí)，這些局部變量會(huì)隨著函數(shù)調(diào)用結(jié)束而被摧毀

局部變量所在的執(zhí)行環(huán)境還能被外界訪問，那么這個(gè)局部變量就有了不被摧毀的理由

使用閉包的動(dòng)機(jī)：主動(dòng)將一些變量封裝在閉包中，以便未來還需要使用到它們。
把變量放在閉包中和放在全局作用域，對(duì)內(nèi)存的影響是一致的，這里并不能說成是內(nèi)存泄露。如果將來需要回收這些變量，我們可以手動(dòng)把這些變量設(shè)為null

包裝函數(shù)嵌套太深，且被不推薦使用mixins模式

組件太大，學(xué)習(xí)成本太高，高度集中化無法將細(xì)化功能抽離出來

有時(shí)候不知道使用classes還是function創(chuàng)建函數(shù)
有時(shí)在lifecycle內(nèi)注冊完事件后，又需要在摧毀階段手動(dòng)注銷事件
注冊監(jiān)聽事件后，又需要在組件變化時(shí)手動(dòng)發(fā)布事件

let string = "";
Boolean(string) //false
function 
return (
    
        {string&&前面的不會(huì)進(jìn)行bool類型轉(zhuǎn)換}
     //會(huì)報(bào)錯(cuò)
)

具體參考：https://www.robinwieruch.de/r...

Redux受函數(shù)式編程影響，它總是返回一個(gè)新狀態(tài)，而不是改變狀態(tài)。

//不要在Redux這樣做，因?yàn)檫@樣會(huì)改變數(shù)組
function addAuthor(state, action) {
    return state.authors.push(action.author)
}
//保持不變，總是返回一個(gè)新對(duì)象
function addAuthor(state, action) {
    return [...state.authors, action.author]
}

state數(shù)據(jù)遵照標(biāo)準(zhǔn)化數(shù)據(jù)格式，可以保持state數(shù)據(jù)扁平化(flat state)和單一（身份）信息源(single source of truth) 。

{
  post: {
    id: "a",
    authorId: "b",
    ...
  },
  author: {
    id: "b",
    postIds: ["a", ...],
    ...
  }
}

Mobx既有面向?qū)ο缶幊蹋灿蟹磻?yīng)式編程。它將你的state包裹在可觀察(Observable)的狀態(tài)中。因此，你可以在state中獲得所有可觀察的功能。
在Mobx里state是可變。因此可以直接改變state：

function addAuthor(author){
    this.authors.push(author)
}

數(shù)據(jù)結(jié)構(gòu)state可以保持深層嵌套

在Redux中，狀態(tài)是只讀的，只能使用顯示操作actions來更改狀態(tài)。相反，在Mobx中，狀態(tài)允許讀寫，可以直接改變狀態(tài)without actions

https://stackoverflow.com/que...

例如：

//state內(nèi)的list引用redux中的list
this.state={
    list:this.props.list||[]
}

//component內(nèi)修改list值
this.setState({list:[1,2,3]})

//此時(shí)redux中的list也被改變，只是沒有將變化傳遞到action
console.log(this.props.list)    //[1,2,3]

redux的核心概念之一是 #state是不可變的#；使用Object.assign()合并對(duì)象無法實(shí)現(xiàn)深拷貝

https://stackoverflow.com/que...

無法知道數(shù)據(jù)是在什么時(shí)候改變（或update）的，并且很難跟蹤（參照redux-logger和mobx-logger）

why is setState asynchronous?

回答這個(gè)問題首先要闡述：調(diào)用setState時(shí)會(huì)發(fā)生什么？
調(diào)用setState時(shí)，React會(huì)將setState()的對(duì)象以“和解”(reconciliation)的過程合并到組件的當(dāng)前狀態(tài)（）并以此創(chuàng)建一個(gè)新的React元素樹（我理解為虛擬DOM樹）。
將新的DOM樹和setState之前的虛擬DOM樹進(jìn)行相比較（diff），根據(jù)結(jié)果對(duì)UI進(jìn)行精準(zhǔn)響應(yīng)。
因此個(gè)人理解為：對(duì)比過程需要消耗一定時(shí)間，為了防止阻塞所以將setState設(shè)置為異步

另一篇文章：從 setState promise 化的探討 體會(huì) React 團(tuán)隊(duì)設(shè)計(jì)思想

https://github.com/livoras/bl...

算法實(shí)現(xiàn)
步驟一：用JS對(duì)象模擬DOM樹
步驟二：比較兩棵虛擬DOM樹的差異
這兩個(gè)樹的完全diff算法是一個(gè)時(shí)間復(fù)雜度O(n^3)的問題，但是在前端當(dāng)中，很少會(huì)跨越層級(jí)地移動(dòng)DOM元素。所以Virtual DOM只會(huì)對(duì)同一個(gè)層級(jí)的元素進(jìn)行對(duì)比：
1.深度優(yōu)先遍歷，記錄差異
2.可能會(huì)有的差異類型
2.1 替換掉原來的節(jié)點(diǎn)
2.2 移動(dòng)、刪除、新增子節(jié)點(diǎn)
2.3 修改節(jié)點(diǎn)的屬性
2.4 文本節(jié)點(diǎn)被改變

var REPLACE = 0
var REORDER = 1
var PROPS = 2
var TEXT = 3

3.列表對(duì)比算法
關(guān)鍵算法：#字符串的最小編輯距離#(Edition Distance); #Levenshtein Distance#; O(M * N)
步驟三：把差異應(yīng)用到真正的DOM樹上

？

？？？

https://reactjs.org/versions/

收到這個(gè)問題前我還從來沒關(guān)心過每次發(fā)布新版本更新了哪些，這個(gè)問題讓我成長很多。

function scaleSize(size) {
  let screenW = Dimensions.get("window").width>Dimensions.get("window").height?Dimensions.get("window").height:Dimensions.get("window").width;
  const defaultWidth =375;    // 在UI圖上的基礎(chǔ)寬度
  const _scaleWidth = screenW / defaultWidth;
  return size * _scaleWidth;
}

https://www.jianshu.com/p/e42...

基本原理：
1.利用Object.defineProperty監(jiān)聽對(duì)象賦值動(dòng)作
2.遍歷所有節(jié)點(diǎn)
3.使用觀察者模式對(duì)擁有v-model屬性的DOM節(jié)點(diǎn)訂閱上述時(shí)間
4.對(duì)擁有v-bind屬性的DOM節(jié)點(diǎn)進(jìn)行發(fā)布事件
5.對(duì)表單標(biāo)簽使用`addEventListener("input",function(e){/.../})監(jiān)聽事件

Object.defineProperty(vModelList, key, {
    enumerable: true,
    configurable: true,
    set: function (newVal) {
        // 發(fā)布
        _observer.trigger(key, newVal)
    }
});

https://segmentfault.com/a/11...

String.prototype.render = function(context){
    return this.replace(/{{([^}]+)}}/g, (match, key) => (context[key]||match));
}

"你好，{{name}}，我們會(huì)在{{day}}天之內(nèi)通知面試結(jié)果。".render({name:"Niko",day:3})

https://www.zhihu.com/questio...

很簡單，就是利用 并提供一個(gè)回調(diào)函數(shù)來接收數(shù)據(jù)（函數(shù)名可約定，或通過地址參數(shù)傳遞）。 第三方產(chǎn)生的響應(yīng)為json數(shù)據(jù)的包裝（故稱之為jsonp，即json padding），形如： callback({"name":"hax","gender":"Male"}) 這樣瀏覽器會(huì)調(diào)用callback函數(shù)，并傳遞解析后json對(duì)象作為參數(shù)。本站腳本可在callback函數(shù)里處理所傳入的數(shù)據(jù)。 補(bǔ)充：“歷史遺跡”的意思就是，如果在今天重新設(shè)計(jì)的話，也許就不會(huì)允許這樣簡單的跨域了嘿，比如可能像XHR一樣按照CORS規(guī)范要求服務(wù)器發(fā)送特定的http頭。

https://segmentfault.com/a/11...

1.DNS解析
2.TCP連接
3.發(fā)生HTTP請(qǐng)求
4.服務(wù)器處理請(qǐng)求并返回HTTP報(bào)文
5.瀏覽器解析渲染頁面
6.連接結(jié)束

禁止使用flex

請(qǐng)使用flex完成