初識React及React開發(fā)依賴詳解
初識React
React介紹
React是什么呢?
相信每個做開發(fā)的人對它都或多或少有一些印象;
這里我們來看一下官方對它的解釋:用于構(gòu)建用戶界面的 JavaScript 庫;
目前對于前端開發(fā)來說,幾乎很少直接使用原生的JavaScript來開發(fā)應(yīng)用程序,而是選擇一個JavaScript庫(框架)。
在過去的很長時間內(nèi),jQuery是被使用最多的JavaScript庫;
在過去的一份調(diào)查中顯示,全球前10,000個訪問最高的網(wǎng)站中,有65%使用了jQuery,是當時最受歡迎的JavaScript庫;
但是,目前甚至已經(jīng)處于淘汰的邊緣了;
而無論是國內(nèi)外,最流行的其實是三大框架:Vue、React、Angular
。
React由Facebook來更新和維護,它是大量優(yōu)秀程序員的思想結(jié)晶:
React的流行不僅僅局限于普通開發(fā)工程師對它的認可;
大量流行的其他框架借鑒React的思想;
Vue.js框架設(shè)計之初,有很多的靈感來自Angular和React。
包括Vue3很多新的特性,也是借鑒和學習了React;
比如React Hooks是開創(chuàng)性的新功能(也是我們課程的重點);
Vue Composition API學習了React Hooks的思想;
Flutter的很多靈感都來自React,來自官網(wǎng)的一段話:(SwiftUI呢)
事實上Flutter中的Widget – Element – RenderObject;
對應(yīng)React的就是JSX – 虛擬DOM – 真實DOM;
所以React可以說是前端的先驅(qū)者
,它總是會引領(lǐng)整個前端的潮流。
React:用于構(gòu)建用戶界面的 JavaScript 庫;
React的官網(wǎng)文檔:https://zh-hans.reactjs.org/
React特點
聲明式編程
聲明式編程是目前整個大前端開發(fā)的模式:Vue、React、Flutter、SwiftUI;
它允許我們只需要維護自己的狀態(tài),當狀態(tài)改變時,React可以根據(jù)最新的狀態(tài)去渲染我們的UI界面;
組件化開發(fā):
組件化開發(fā)頁面目前前端的流行趨勢,我們會將復雜的界面拆分成一個個小的組件;
如何合理的進行組件的劃分和設(shè)計也是后面我會講到的一個重點;
多平臺適配
2013年,React發(fā)布之初主要是開發(fā)Web頁面;
2015年,F(xiàn)acebook推出了ReactNative,用于開發(fā)移動端跨平臺;(雖然目前Flutter非?;鸨沁€是有很多公司在使用 ReactNative);
2017年,F(xiàn)acebook推出ReactVR,用于開發(fā)虛擬現(xiàn)實Web應(yīng)用程序;(VR也會是一個火爆的應(yīng)用場景);
React的依賴介紹
React的開發(fā)依賴
開發(fā)React必須依賴三個庫
:
react:包含react所必須的核心代碼
react-dom:react渲染在不同平臺所需要的核心代碼
babel:將jsx轉(zhuǎn)換成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的關(guān)系
babel是什么呢?
Babel ,又名 Babel.js。
是目前前端使用非常廣泛的編譯器、轉(zhuǎn)移器。
比如當下很多瀏覽器并不支持ES6的語法,但是確實ES6的語法非常的簡潔和方便,我們開發(fā)時希望使用它。
那么編寫源碼時我們就可以使用ES6來編寫,之后通過Babel工具,將ES6轉(zhuǎn)成大多數(shù)瀏覽器都支持的ES5的語法。
React和Babel的關(guān)系:
默認情況下開發(fā)React其實可以不使用babel。
但是前提是我們自己使用 React.createElement 來編寫源代碼,它編寫的代碼非常的繁瑣和可讀性差。
那么我們就可以直接編寫jsx(JavaScript XML)的語法,并且讓babel幫助我們轉(zhuǎn)換成React.createElement。
后續(xù)文章還會詳細講到;
React的依賴引入
所以,我們在編寫React代碼時,這三個依賴都是必不可少的。
那么,如何添加這三個依賴:
方式一:直接CDN引入
方式二:下載后,添加本地依賴
方式三:通過npm管理(后續(xù)腳手架再使用)
暫時我們直接通過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>
到此這篇關(guān)于初識React及React開發(fā)依賴介紹的文章就介紹到這了,更多相關(guān)React開發(fā)依賴內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React?UI組件庫之快速實現(xiàn)antd的按需引入和自定義主題
react入門學習告一段路,下面這篇文章主要給大家介紹了關(guān)于React?UI組件庫之快速實現(xiàn)antd的按需引入和自定義主題的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07一文詳解手動實現(xiàn)Recoil狀態(tài)管理基本原理
這篇文章主要為大家介紹了一文詳解手動實現(xiàn)Recoil狀態(tài)管理基本原理實例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-05-05React實現(xiàn)單向數(shù)據(jù)流的方法
本文主要介紹了React實現(xiàn)單向數(shù)據(jù)流的方法2023-04-0430分鐘精通React今年最勁爆的新特性——React Hooks
這篇文章主要介紹了30分鐘精通React今年最勁爆的新特性——React Hooks,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-03-03