一、插件或框架的好處
? ? ? ?從久遠的時代到現在,我們的網頁更加動態化與強大,大家在學習的過程中,發現或了解過很多很多的插件或框架,用過的都知道,方便、快速、簡單上手快、重用性高、維護成本低、兼容性好、穩定性強
? ? ? ?這些插件或框架的出現,是因為JavaScript的越來越強大,都成為服務端語言了。在之前我們開發大型的項目,由于業務邏輯非常復雜,html結構累贅,css樣式龐大,造成了資源的浪費,性能低下,速度慢體驗差,開發維護迭代成本大,沒有正規的項目組織形式,所以大佬們為了解決傳統開發項目導致的一系列問題,我們所熟知的這些框架就應運而生了,例如前端三大框架 angularJS,vueJS,reactJS等
二、React版本
- Facebook對市場上所有 JavaScript MVC 框架,都不滿意,就決定自己寫一套,用來架設Instagram 網站
- 2013 年5月開源了 React
- 2013 年 7 月 3 日
v0.3.0
- 2015年4月開源了 React Native
- 2016 年 4 月 9 日
v15.0.0
- 2017 年 9 月 27 日
v16.0.0
核心架構重寫 - 截止到目前:2018年10月9日
v16.5.2
三、前端三大框架對比
1.angularJS
- 是一個比較完善的前端MV*框架,后為Google所收購
- 包含模板,數據雙向綁定,路由,模塊化,服務,過濾器,依賴注入等等所有功能,依賴注入和自定義directive非常靈活,功能強大
- 框架【偏重】,太龐大了,學習路線長
- 主要提供更多的是一整套解決方案,vue和react更像是一個生態
2.reactJS和VueJS
有很多的相似之處:
使用 Virtual DOM
提供了響應式 (Reactive) 和組件化 (Composable) 的視圖組件
將注意力集中保持在核心庫,而將其他功能如路由和全局狀態管理交給相關的庫
react采用的JSX語法,angular推崇使用typescript,也可以直接用js寫。配合上ts還是很爽,后端的也能很快習慣ts的開發。react更注重的是在【view ui】層,用state的改變去re-render頁面。angular是雙向綁定,更加注重的是【model 數據】層,更加擅長對數據的處理和業務邏輯。
React和Vue都有
props
的概念,props
在組件中是一個特殊的屬性,允許父組件往子組件傳送數據React和Vue都有自己的構建工具,你可以使用它快速搭建開發環境
SSR(server side render) 服務器端渲染
VueJS:
- 都是組件化思想
- 模板的使用和數據渲染非常靈活,層次結構鮮明
- 簡單的語法并能夠簡單快速構建一個項目
- 輕量級,體積小渲染速度更快
- Vue采用的腳手架工具是:【vue-cli】 2.x版本,現在已經是3.x版本了,2.x和3.x構建項目的方式也不同了
cnpm i webpack webpack-cli -g
cnpm i vue-cli -g
vue init webpack projectName
npm run dev
- 初期是尤雨溪大神維護,現在有加入的團隊組織個人提供技術一同維護迭代更新
- Vue中指令和組件分得更清晰。指令只封裝 DOM 操作,而組件代表一個自給自足的獨立單元 —— 有自己的視圖樣式和數據邏輯
- 跨平臺:windows、android、IOS
安卓開發 IOS開發 原生APP (動畫流暢)
軟件打包APP
react-native開的APP 接近于原生APP
ReactJS:
React 是一個用于構建用戶界面的漸進式 JavaScript 庫,也可以說是 是一個采用聲明式,高效而且靈活的用來構建用戶界面的框架。
可以和你的其它技術棧組合到一起來使用,主要用于構建Ui,不用關注內在的實現原理,只要提供數據就可,也就是數據驅動視圖,不關注路由,不處理數據請求.說白了就是,React 提供了模板語法以及一些函數鉤子用于基本的 HTML 渲染第一個真正意義上把組件化思想移植到前端開發領域,angular 1.x是模塊化思想,從2.x開始也用組件化思想,但angular 一個版本一個樣。學習成本大! 后來vue也借鑒了react 和angular的思想和優點并簡化了,學習成本非常低
由于react設計思想獨特,性能出眾,靠近后端語言的面向對象編程思想強烈,并且從最早的ui引擎逐漸變成了一套前后端都能滿足的web App解決方案,所以越來越多的人使用。最后孵化出了 react native框架,目標很偉大,就算沒學android開發或ios開發,也能用開發web app的方式去寫 Native(原生的) app。這將是顛覆半個互聯網行業生態,那到時,只要寫一次ui,就能同時運行在瀏覽器,服務器,手機端。
龐大的生態系統,背后是強大的FB團隊,野心更大,angularJS和react是競爭對手,都想取代對方
但學了 react 就可以上react native框架 開發跨平臺app了,所以我看好react
組件有兩個核心概念:props,state。 一個組件就是通過這兩個屬性的值在 render 方法里面生成這個組件對應的 HTML 結構
數據流單向,為啥不是雙向呢?是因為技術不行嗎?NO!,存在即有意義!
react采用的是自己開發的腳手架:create-react-app,全局安裝
cnpm i create-react-app -g
npm run start
npm run eject
生成webpack的配置文件react推廣了Virtual DOM,并創造了新的語法——JSX,JSX允許開發者在JavaScript中書寫HTML
react 認為組件才是王道,而組件是和模板緊密關聯的,組件模板和組件邏輯分離讓問題復雜化了。所以就有了 JSX 這種語法,就是為了把 HTML 模板直接嵌入到 JS 代碼里面,這樣就做到了模板和組件關聯,但是 JS 不支持這種包含 HTML 的語法,所以需要通過工具將 JSX 編譯輸出成 JS 代碼才能使用(可以進行跨平臺開發的依據,通過不同的解釋器解釋成不同平臺上運行的代碼,由此才有RNAPP和React開發桌面客戶端)
特點:一切皆組件化思想
基于虛擬DOM性能高效
漸進式,專注ui,可以和其它的技術棧結合開發,很靈活
聲明式程序設計編程
-
JSX語法,允許JavaScript和XML混搭,類似于node 的模板引擎 jade ejs swig handl.. pug...
- JSX語法的誕生
都是組件間傳值通信,都是單向數據流
vue是一個mvvm框架,即數據雙向綁定,即當數據發生變化的時候,視圖也就發生變化,當視圖發生變化的時候,數據也會跟著同步變化。這也算是vue的精髓之處了。值得注意的是,我們所說的數據雙向綁定,一定是對于UI控件來說的,非UI控件不會涉及到數據雙向綁定。 單向數據綁定是使用狀態管理工具(如redux)的前提。如果我們使用vuex,那么數據流也是單向的
兩者并不互斥, 在全局性數據流使用單向,方便跟蹤
局部性數據流使用雙向,簡單易操作。處理表單,vue的雙向數據綁定用起來就特別舒服了
四、ReactJS學習
React基礎
- babelJS
2015年6月, ES2015(即 ECMAScript 6、ES6) 正式發布。雖然 ES6 提出了許多激動人心的新特性,但那時許多瀏覽器不支持或者支持不好,沒有普遍地推廣起來。
而 Babel 的出現,讓我們可以現在就使用最新的 JavaScript 語法,而不用等待瀏覽器提供支持。
Babel 是一個轉換編譯器,它能將 ES6 轉換成可以在瀏覽器中運行的代碼。Babel 可以處理 ES6 的所有新語法,并且內置了 React JSX 擴展及 Flow 類型注解支持。
在線語法轉換
- babel-standalone
由于 Babel 本身的設計是基于 node.js 環境下運行使用的,而這個名為 babel-standalone 的開源項目,則支持非 node.js 環境下使用 Babel。
babel-standalone 已經包含了 Babel 所有的插件,其體積還是很大的(目前版本 6.26.0,未壓縮的 js 文件 1.78MB,壓縮了則為 772kb)。
使用這個類庫,可以讓我們實時在線轉換 es6 為 js,同時支持 babel 提供的各種插件,而且最關鍵的是全特性支持,包括 amd 包裹,將 import 轉換為 amd 的 require 等等。
- 安裝react模塊
1.安裝nodeJS
? ? ? ?去官網下載
? ? ? ?node -v
? ? ? ?npm -v 包管理工具 國外的,下載極其慢
2.全局安裝cnpm,并設置淘寶鏡像
? ? ? ?國內的包管理工具,很快
? ? ? ?npm install -g cnpm --registry=https://registry.npm.taobao.org
3.卸載模塊
? ? ? ?npm uninstall Name
? ? ? ?cnpm uninstall Name
4.安裝react依賴模塊(測試環境,快速上手)
? ? ? ?cnpm init -y 定義項目所需要的各種模塊及配置信息
? ? ? ?cnpm i react react-dom babel-standalone -S
? ? ? ?-S => --save 表示生產環境也需要使用的模塊
? ? ? ?-D => --save-dev 表示只在開發環境用到的模塊
<script src="./node_modules/babel-standalone/babel.js"></script>
<script>
//手動使用babel轉換
// let es6 = 'const fn = () => "Hello World"';
// let es5 = Babel.transform(es6, {presets:['es2015']}).code;
// console.log(es5);
// let es6 = `let {name, age} = {
// name : '張三',
// age : 18
// }`;
// let es5 = Babel.transform(es6, {presets:['es2015']}).code;
// console.log(es5);
</script>
<script type="text/babel">
//瀏覽器能夠識別react語法是要在基于babel
let {name, age} = {
name:'張三',
age:18
}
console.log(name, age)
</script>
<!-- 入口-->
<div id="app"></div>
<script src="./node_modules/babel-standalone/babel.js"></script>
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">
//console.log( ReactDOM )
// 利用 babel 把h1標簽 渲染到 #app標簽里面
// 在講react腳手架前 都是利用此種方法 學習 react基本語法
ReactDOM.render(<h1>hello world</h1>,document.querySelector('#app'));
</script>