react入門篇

時間 2019-11-24

標籤 react 入門欄目 React 简体版

原文原文鏈接

React參考--最近公司開發新系統要使用react，可是又不許備招聘專門的前端，因此根據我以前開發過react的經驗讓我寫一篇入門文檔。帶java開發人員入坑javascript

1 基礎知識介紹

1.1 前端發展史

靜態頁面階段 AJAX 階段前端 MVC 階段 SPA 階段css

Mvc：View Model 是簡化的 Controller，全部的數據邏輯都放在這個部分。它的惟一做用就是爲 View 提供處理好的數據，不含其餘邏輯。也就是說，Model 拿到數據之後，View Model 將數據處理成視圖層（View)須要的格式，在視圖層展現出來。這個模型的特色是 View 綁定 View Model。若是 View Model 的數據變了，View（視圖層)也跟着變了；反之亦然，若是用戶在視圖層修改了數據，也馬上反映在 View Model。整個過程徹底不須要手工處理。
Spa：前端能夠作到讀寫數據、切換視圖、用戶交互，這意味着，網頁實際上是一個應用程序，而不是信息的純展現。這種單張網頁的應用程序稱爲 SPA（single-page application)。所謂 SPA，就是指在一張網頁（single page)上，經過良好的體驗，模擬出多頁面應用程序（application)。用戶的瀏覽器只須要將網頁載入一次，而後全部操做均可以在這張頁面上完成，帶有迅速的響應和虛擬的頁面切換。隨着 SPA 的興起，2010年後，前端工程師從開發頁面（切模板)，逐漸變成了開發「前端應用」（跑在瀏覽器裏面的應用程序)。目前，最流行的前端框架 Vue、Angular、React 等等，都屬於 SPA 開發框架。

1.2 前端模塊化

a) 第一階段：無模塊化 b) 第二階段： CommonJS規範 c) 第三階段： AMD規範 d) 第四階段：CMD規範 e) 第五階段： ES6模塊化 Javascript不是一種模塊化編程語言，它不支持"類"（class)，更遑論"模塊"（module)了，隨着前端發展對模塊需求愈來愈大，模塊也是經歷了從最初的簡單模塊寫法到AMD和CMD規範的出現，再到ES6發佈，目前已經能夠很方便的在Javascript中使用"類"和"模塊"了。詳見：www.jianshu.com/p/f2cf62c66…html

1.3 Node.js

1.3.1 Node.js介紹

Node.js是一個javascript運行環境。它讓javascript能夠開發後端程序，實現幾乎其餘後端語言實現的全部功能，能夠與PHP、Java、Python、.NET、Ruby等後端語言分庭抗禮。前端

Nodejs是基於V8引擎，V8是Google發佈的開源JavaScript引擎，自己就是用於Chrome瀏覽器的js解釋部分，可是Ryan Dahl 這哥們，鬼才般的，把這個V8搬到了服務器上，用於作服務器的軟件。詳情見：www.cnblogs.com/liubingyjui… 開發單頁面應用主要是把node當作工具使用給咱們提供一個可以執行js的環境；vue

1.4 Webpack

爲了實現模塊化，出現了用於JavaScript模塊管理的兩大流行規範：CommonJS和AMD。前者定義的是模塊的同步加載，主要用於Node.js。同步加載在前端會致使整個頁面等待，對前端並不適用，便出現了AMD。AMD採用異步加載方式，經過RequireJS等工具適用於前端。以RequireJS爲例，這是一種在線「編譯」模塊的方案，至關於在瀏覽器中先加載一個AMD解釋器，使瀏覽器認識define、exports、module等相關命令，來實現模塊化。後來ES 6提供了對模塊的原生支持，它的目標是建立一種CommonJS和AMD使用者都願意接受的方式，既擁有簡潔的語法，又支持異步加載和配置模塊加載。html5

而目前更通用的是browserify、webpack等技術，是一個預編譯模塊的方案。這個方案更加智能，由於它是在發佈前預編譯好的，不須要在瀏覽器中加載解釋器。另外，直接寫AMD或ES 6的模塊化代碼，它都能編譯成瀏覽器識別的JavaScript代碼。甚至CommonJS規範的模塊化，browserify、webpack也能夠轉換成瀏覽器使用的形式。webpack至關於增強版browserify，誕生伊始，瞄準的就是大型單頁應用，並且其對React的支持是最好的，因此在本書中主要介紹webpack。java

webpack是一個供瀏覽器環境使用的模塊打包工具。webpack將項目中用到的一切靜態資源都視爲模塊，模塊之間能夠互相依賴，webpack對它們進行統一的管理及打包發佈。下面引用webpack官方圖片來講明webpack的做用。node

從圖中能夠看出，webpack的做用是對項目中的靜態資源進行統一管理，爲項目的發佈提供最優的打包和部署方案，能夠把應用中的js、css、圖片等資源集中打成一個或多個包文件。它具有編譯打包css、預處理css、編譯js和處理圖片等許多功能，支持AMD和CommonJS規範，以及多種系統模塊，如今已成爲前端打包的主流工具。react

webpack的主要特性以下：webpack

（1)同時支持CommonJS和AMD模塊。

（2)串聯式模塊加載器及插件機制，具備更好的靈活性和擴展性，例如對CoffeeScript、ES 6的支持。

（3)能夠基於配置或者智能分析打包成多個文件，實現分別知足公共模塊和按需加載的須要。

（4)支持對css、圖片等資源進行打包，無須依靠grunt或gulp等構建工具，簡化工程配置。

（5)開發時在內存中完成打包，性能更高，徹底能夠支持開發過程的實時打包需求。

（6)對sourcemap有很好的支持，易於調試

1.5 Npm/yarn

npm是node的包管理工具，定義明確就是用來管理node的包，包括安裝，卸載，更新，發佈等,至關於java的包管理工具gradle、gant、maven。腳本文件爲package.json (一) 淘寶npm鏡像

搜索地址：npm.taobao.org/ registry地址：registry.npm.taobao.org/ (二) cnpmjs鏡像搜索地址：cnpmjs.org/ registry地址：r.cnpmjs.org/

2 React介紹（僅供參考，若有錯誤請糾正)

2.1 入門前提條件

a) 掌握es6/es7語法 b) 掌握前端經常使用工具（node、yarn/npm、webpack等) c) 掌握css三、js、html5基本語法而後就能夠開整

2.2 基本介紹

React主要概念就是虛擬dom、組件化、單項數據流、jsx

2.2.1 Jsx

搞懂react掌握jsx就基本掌握50%了。以下圖圖表1所示通過ReactDOM.render()函數就會產生一個h1標籤內容爲hello,world!掛載到id爲app的dom上而後通過瀏覽器渲染。最下面那個babel.min.js庫會把<h1>Hello,world!</h1> 轉譯爲createElement('h1',{ clssName: 'greeting'},'Hello, world!'); 這個函數又會返回一個通過檢查過的js對象 { type: 'h1', props: { className: 'greeting', children: 'Hello, world!' } }; 這個對象而後通過render函數react會把這個對象轉換成<h1>Hello,world!</h1>原生的dom字符串並掛載到dom上渲染出來。實際上jsx就是爲了咱們方便書寫，用原生dom的語法（可是有些不一樣，好比被js佔用了的關鍵字class，jsx是用的className來表示類)實際上咱們寫react組件的時候就是在書寫一個一個的特殊的js對象，咱們不可能構建ui的時候去寫一個一個的createElement(),而是經過轉譯工具讓jsx轉譯成一個一個的js對象。而後經過react的方法渲染成dom，這個js對象也就是react中的另外一個概念——虛擬dom。若是數據有變更react就會對比這個js對象（虛擬dom)和新產生的對象的區別，而後最小的更新已經渲染過得dom樹。不會從新繪製整個頁面而致使性能瓶頸。到這裏咱們應該對react有個初步認識了。

圖表 1 react的例子圖對比vue，就是經過原生模版來生產虛擬dom對象，經過對象生成dom渲染掛載到id爲app的div下面，react和，以下圖所示

圖表 2 vue的例子下面爲vue編譯過程：

圖表 3 vue使用模版編譯後的js對象理解這個就很快可以對框架掌握了能夠去查看官方文檔，如今文檔有中文了並且愈來愈詳細愈來愈人性化應該一看就能懂

2.3 開發框架搭建

如圖一咱們開發不可能基於原始的頁面開發，須要藉助node搭建一個node環境實現前端工程化開發。以前開發都是基於webpack和一些插件來幫助開發，本身搭建很麻煩。Facebook官方推出了一個腳手架create-react-app，直接就搭建好了一個react的環境，2.0後支持typescript和javascript。可是一些配置還不能定製化，須要藉助三方插件來覆蓋腳手架原有的配置。