初識React及React開發依賴詳解

2022-10-10 14:00:03

初識React

React介紹

React是什麼呢?

相信每個做開發的人對它都或多或少有一些印象;

這裡我們來看一下官方對它的解釋:用於構建使用者介面的 JavaScript 庫;

目前對於前端開發來說，幾乎很少直接使用原生的JavaScript來開發應用程式，而是選擇一個JavaScript庫(框架)。

在過去的很長時間內，jQuery是被使用最多的JavaScript庫;

在過去的一份調查中顯示，全球前10,000個存取最高的網站中，有65%使用了jQuery，是當時最受歡迎的JavaScript庫;

但是，目前甚至已經處於淘汰的邊緣了;

而無論是國內外，最流行的其實是三大框架:Vue、React、Angular。

React由Facebook來更新和維護，它是大量優秀程式設計師的思想結晶:

React的流行不僅僅侷限於普通開發工程師對它的認可;

大量流行的其他框架借鑑React的思想;

Vue.js框架設計之初，有很多的靈感來自Angular和React。

包括Vue3很多新的特性，也是借鑑和學習了React;

比如React Hooks是開創性的新功能(也是我們課程的重點);

Vue Composition API學習了React Hooks的思想;

Flutter的很多靈感都來自React，來自官網的一段話:(SwiftUI呢)

事實上Flutter中的Widget – Element – RenderObject;

對應React的就是JSX – 虛擬DOM – 真實DOM;

所以React可以說是前端的先驅者，它總是會引領整個前端的潮流。

React:用於構建使用者介面的 JavaScript 庫;

React的官網檔案:https://zh-hans.reactjs.org/

React特點

宣告式程式設計

宣告式程式設計是目前整個大前端開發的模式:Vue、React、Flutter、SwiftUI;

它允許我們只需要維護自己的狀態，當狀態改變時，React可以根據最新的狀態去渲染我們的UI介面;

元件化開發:

元件化開發頁面目前前端的流行趨勢，我們會將複雜的介面拆分成一個個小的元件;

如何合理的進行元件的劃分和設計也是後面我會講到的一個重點;

多平臺適配

2013年，React釋出之初主要是開發Web頁面;

2015年，Facebook推出了ReactNative，用於開發行動端跨平臺;(雖然目前Flutter非常火爆，但是還是有很多公司在使用 ReactNative);

2017年，Facebook推出ReactVR，用於開發虛擬現實Web應用程式;(VR也會是一個火爆的應用場景);

React的依賴介紹

React的開發依賴

開發React必須依賴三個庫:

react:包含react所必須的核心程式碼

react-dom:react渲染在不同平臺所需要的核心程式碼

babel:將jsx轉換成React程式碼的工具, jsx語法瀏覽器是不識別的

第一次接觸React會被它繁瑣的依賴搞蒙，居然依賴這麼多東西: (直接放棄?)

對於Vue來說，我們只是依賴一個vue.js檔案即可，但是react居然要依賴三個包。

其實呢，這三個庫是各司其職的，目的就是讓每一個庫只單純做自己的事情;

在React的0.14版本之前是沒有react-dom這個概念的，所有功能都包含在react裡;

為什麼要進行拆分呢?原因就是推出react-native

react包中包含了react web和react-native所共同擁有的核心程式碼。

react-dom針對web和native所完成的事情不同:
web端:react-dom會將jsx最終渲染成真實的DOM，顯示在瀏覽器中native端:react-dom會將jsx最終渲染成原生的控制元件(比如Android中的Button，iOS中的UIButton)。

Babel和React的關係

babel是什麼呢?

Babel ，又名 Babel.js。

是目前前端使用非常廣泛的編譯器、轉移器。

比如當下很多瀏覽器並不支援ES6的語法，但是確實ES6的語法非常的簡潔和方便，我們開發時希望使用它。

那麼編寫原始碼時我們就可以使用ES6來編寫，之後通過Babel工具，將ES6轉成大多數瀏覽器都支援的ES5的語法。

React和Babel的關係:

預設情況下開發React其實可以不使用babel。

但是前提是我們自己使用 React.createElement 來編寫原始碼，它編寫的程式碼非常的繁瑣和可讀性差。

那麼我們就可以直接編寫jsx(JavaScript XML)的語法，並且讓babel幫助我們轉換成React.createElement。

後續文章還會詳細講到;

React的依賴引入

所以，我們在編寫React程式碼時，這三個依賴都是必不可少的。

那麼，如何新增這三個依賴:

方式一:直接CDN引入

方式二:下載後，新增本地依賴

方式三:通過npm管理(後續腳手架再使用)

暫時我們直接通過CDN引入，來演練下面的範例程式:

這裡有一個crossorigin的屬性，這個屬性的目的是為了拿到跨域指令碼的錯誤資訊

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> 
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

到此這篇關於初識React及React開發依賴介紹的文章就介紹到這了,更多相關React開發依賴內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！