React學習筆記（持續更新）

2.2頁面加載過程

1.資源加載過程：URL->DNS查詢->資源請求->瀏覽器解析

①URL結構：http://www.hhh.com:80/getdata?pid=1#title[協議://域名：端口/路徑?參數#哈希]

②DNS查詢：瀏覽器<--（ip）（域名）-->DNS緩存+DNS服務器? ?（dns-prefetch緩存）

③資源請求：瀏覽器<--（status+response-header+body）（request-header+參數（url、body））-->后端服務器

④瀏覽器解析：DOM--JS執行-->DOM-->渲染樹-->布局-->繪制

2.3ES6常用語法

1.let變量，const常量（不能重復定義，塊級作用域，不變量提升）

2.箭頭函數：參數=> 表達式/語句、繼承外層作用域、不能用作構造函數、沒有prototype屬性

3.反引號標識``、支持多行字符串、支持變量和表達式

4.Promise：Promise對象、關鍵詞：resolve、reject、then

?5.面向對象-類：關鍵詞：class、語法糖：function、構造函數：constructor

? 面向對象-類的繼承：extends：類的繼承，super：調用父類構造函數，

面向對象-對象：對象里屬性簡寫，對象方法簡寫，屬性可以為表達式，其它擴展

2.5本地存儲

1.cookie：①用戶端保存請求信息的機制。②分號分隔的多個key-value字段。③存儲在本地的加密文件里。④域名和路徑限制。

? ?字段：name:cookie名稱，domain:cookie生效的域名，path:cookie生效的路徑，expires:cookie過期時間，HttpOnly：用戶端不可更改

2.session：①服務端保存請求信息的機制。②sessionId通常存放在cookie里。③會話由瀏覽器控制，會話結束，session結束。

3.localStorage：①H5新特性。②有域名限制，不存在作用域概念。③只有key-value。④沒有過期時間。⑤瀏覽器關閉后不消失。

4.sessionStorage：①和localStorage相似。②瀏覽器關閉消失。

?

3-2前端框架要解決的問題

1.傳統的原生開發方式的不足：代碼層面、效率問題、多頁應用問題

2.框架開發的不足：兼容性問題，SEO不友好、有場景要求，開發自由度降低、黑盒開發，框架本身有出錯風險、有學習成本。

3.三大框架對比：angular：09年發布，Google；主要版本：1.x，2.x，4.x，5.x（beta）；基于html的大而全的MVC框架；

? ?react：13開源，Facebook；最新版本：16.x；基于js的視圖層框架；

? ?vue：14開源，尤雨溪，阿里weex團隊；主要版本：0.1x，1.x，2.x；基于html的視圖層框架；

框架對比：angular ? ? ? ? ? ?react ? ? ? ? ? ? ? ? ? ? vue

組織方式：MVC ? ? ? ? ? ? ? ?模塊化 ? ? ? ? ? ? ? ? ?模塊化

數據綁定：雙向 ? ? ? ? ? ? ? ? 單向 ? ? ? ? ? ? ? ? ? ? ?雙向

模板能力：強大 ? ? ? ? ? ? ? ? 自由 ? ? ? ? ? ? ? ? ? ? ?簡潔

自由度 ： ?較小 ? ? ? ? ? ? ? ? 大 ? ? ? ? ? ? ? ? ? ? ? ? ? 較大

路由： ?靜態路由 ? ? ? ? ? ? ?動態路由 ? ? ? ? ? ? ? ?動態路由

app方案：Ionic ? ? ? ? ? ? ? ? RN ? ? ? ? ? ? ? ? ? ? ? ? Weex

適用場景：后端開發構建CURD ? ? ? ? ? ? 前端開發構建復雜web ? ? ? ? ? ? ? ? ? 前端開發快速構建web

?

4.2git項目建立及配置：https://www.cnblogs.com/GuliGugaLiz/p/9484525.html

?

4.4webpack配置

1.需要處理的文件類型

html-->html-webpack-plugin

腳本-->babel+babel-preset-react

樣式-->css-loader+sass-loader

圖片/字體-->url-loader+file-loader

2.webpack常用模塊

html-webpack-plugin,html單獨打包成文件

extract-text-webpack-plugin,樣式打包成單獨文件

CommonsChunkPlugin,提出通用模塊

3.webpack-dev-server

為webpack項目提供web服務；使用不便2.9.7；更改代碼自動刷新，路徑轉發；yarn add webpack-dev-server@2.9.7 --dev;解決多版本共存問題

?

5.2初識react

1.視圖層框架（只關注顯示，不關注數據層）、組件化（不是繼承模式）、JSX表達式（在html中加入了邏輯處理）、虛擬DOM（減少低效操作提高性能）

視圖層框架：①一個構建用戶界面的框架②聲明式的框架③數據驅動DOM，再用事件反饋給數據

組件化開發：①組件組合而不是繼承②state&&props③生命周期

JSX：①一直js擴展的表達式②帶有邏輯的html

虛擬DOM:①對DOM進行模擬②比較操作前后的數據差異③如果數據差異，統一操作dOM

2優點：簡潔、靈活、高效

3.缺點：思維轉換、依賴生態、變動頻繁

?

5.5React的生命周期

1.加載過程：constructor-->componentWillMount-->componentDidMount

2.更新過程：shouldComponentUpdate-->componentWillUpdate-->componentDidUpdate;如果是props更新組件執行componentWillReceiveProps來接受父組件傳過來的props

3.組件銷毀：componentWillUnmount

?

5.6Router原理及React-Router

1.Router原理：歷史-->跳轉-->事件

2.常見Router：頁面Router(window.location.href='http://www.baidu.com')-->Hash Router(1.(window.location.href='#test1';2.window.οnhashchange=function(){console.log(''current hash:),window.location.hash})-->H5 Router(1.history.pushState('test','Title','/index/test');2.history.replaceState('test','Title','/index/test) =>跳轉到localhost：8080/index/test)

3.React-Router:<BrowserRouter>/<HashRouter>，路由方式；<Route>,路由規則；<Swithch>,路由選項；<Link/><NavLink>,跳轉導航；<Redirect>,自動跳轉

?

5.7React數據管理

1.依靠狀態提升來和兄弟元素進行數據交互；通過發布訂閱模式做數據交互；Redux等數據管理工具

?