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

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

對于必須要在DOM加載之前運行的JavaScript腳本，我們需要把這些腳本放置在頁面的head中，而不是通過外部引用的方式，因為外部的引用方式增加了網絡的請求次數；

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

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

session會在一定時間內保存在服務器上。當訪問增多時，會占用服務器的資源，所以考慮服務器性能方面，可以使用cookie
cookie存儲容量有限制，單個cookie保存數據不能超過4k，且很多瀏覽器限制一個站點最多保存20個cookie。對于seesion，其默認大小一般是1024k
localStorage本地存儲和cookie都保存在瀏覽器端，且都是同源的。每個域5MB

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

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

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

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

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

全局變量的生存周期是永久的
對于函數內var聲明的局部變量，當退出函數時，這些局部變量會隨著函數調用結束而被摧毀

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

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

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

組件太大，學習成本太高，高度集中化無法將細化功能抽離出來

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

let string = "";
Boolean(string) //false
function 
return (
    
        {string&&前面的不會進行bool類型轉換}
     //會報錯
)

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

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

//不要在Redux這樣做，因為這樣會改變數組
function addAuthor(state, action) {
    return state.authors.push(action.author)
}
//保持不變，總是返回一個新對象
function addAuthor(state, action) {
    return [...state.authors, action.author]
}

state數據遵照標準化數據格式，可以保持state數據扁平化(flat state)和單一（身份）信息源(single source of truth) 。

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

Mobx既有面向對象編程，也有反應式編程。它將你的state包裹在可觀察(Observable)的狀態(tài)中。因此，你可以在state中獲得所有可觀察的功能。
在Mobx里state是可變。因此可以直接改變state：

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

數據結構state可以保持深層嵌套

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

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

例如：

//state內的list引用redux中的list
this.state={
    list:this.props.list||[]
}

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

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

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

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

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

why is setState asynchronous?

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

另一篇文章：從 setState promise 化的探討 體會 React 團隊設計思想

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

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

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

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

？

？？？

https://reactjs.org/versions/

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

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圖上的基礎寬度
  const _scaleWidth = screenW / defaultWidth;
  return size * _scaleWidth;
}

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

基本原理：
1.利用Object.defineProperty監(jiān)聽對象賦值動作
2.遍歷所有節(jié)點
3.使用觀察者模式對擁有v-model屬性的DOM節(jié)點訂閱上述時間
4.對擁有v-bind屬性的DOM節(jié)點進行發(fā)布事件
5.對表單標簽使用`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}}，我們會在{{day}}天之內通知面試結果。".render({name:"Niko",day:3})

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

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

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

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

禁止使用flex

請使用flex完成