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.onhashchange=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等數據管理工具