初識React

一、插件或框架的好處

? ? ? ?從久遠的時代到現在,我們的網頁更加動態化與強大,大家在學習的過程中,發現或了解過很多很多的插件或框架,用過的都知道,方便、快速、簡單上手快、重用性高、維護成本低、兼容性好、穩定性強
? ? ? ?這些插件或框架的出現,是因為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>
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 對Facebook推出的React仰慕已久,一直沒有找到合適的機會嘗試,而react早已經是最熱門的前端框架,co...
    liuwill閱讀 45,779評論 8 39
  • react 官網地址http://facebook.hithub.io/react/ 特點: 1、組件化(所有寫法...
    build1024閱讀 361評論 0 0
  • Foreword: 首先那要說明下,以下是我看到的一篇文章,但是原文是英文的,我只是做一個搬運工把他搬過來~主要也...
    Howie126313閱讀 10,868評論 4 41
  • react官網:https://facebook.github.io/react/內容來源:http://www....
    Lusia_閱讀 520評論 0 0
  • 老公是個本分的男人,賺錢不多,但顧家愛家更愛我,直到有一天將“黑美”領進家門,我的地位完全改變。 兩年前的冬天,老...
    塵埃KM閱讀 684評論 4 14