欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

初識(shí)React及React開(kāi)發(fā)依賴詳解

 更新時(shí)間:2022年10月08日 16:39:10   作者:林有酒  
React由Facebook來(lái)更新和維護(hù),它是大量?jī)?yōu)秀程序員的思想結(jié)晶,React的流行不僅僅局限于普通開(kāi)發(fā)工程師對(duì)它的認(rèn)可,大量流行的其他框架借鑒React的思想,接下來(lái)通過(guò)本文介紹React基礎(chǔ)及React開(kāi)發(fā)依賴介紹,需要的朋友可以參考下

初識(shí)React

React介紹

React是什么呢?

相信每個(gè)做開(kāi)發(fā)的人對(duì)它都或多或少有一些印象;

這里我們來(lái)看一下官方對(duì)它的解釋:用于構(gòu)建用戶界面的 JavaScript 庫(kù);

目前對(duì)于前端開(kāi)發(fā)來(lái)說(shuō),幾乎很少直接使用原生的JavaScript來(lái)開(kāi)發(fā)應(yīng)用程序,而是選擇一個(gè)JavaScript庫(kù)(框架)。

在過(guò)去的很長(zhǎng)時(shí)間內(nèi),jQuery是被使用最多的JavaScript庫(kù);

在過(guò)去的一份調(diào)查中顯示,全球前10,000個(gè)訪問(wèn)最高的網(wǎng)站中,有65%使用了jQuery,是當(dāng)時(shí)最受歡迎的JavaScript庫(kù);

但是,目前甚至已經(jīng)處于淘汰的邊緣了;

而無(wú)論是國(guó)內(nèi)外,最流行的其實(shí)是三大框架:Vue、React、Angular

React由Facebook來(lái)更新和維護(hù),它是大量?jī)?yōu)秀程序員的思想結(jié)晶:

React的流行不僅僅局限于普通開(kāi)發(fā)工程師對(duì)它的認(rèn)可;

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

Vue.js框架設(shè)計(jì)之初,有很多的靈感來(lái)自Angular和React。

包括Vue3很多新的特性,也是借鑒和學(xué)習(xí)了React;

比如React Hooks是開(kāi)創(chuàng)性的新功能(也是我們課程的重點(diǎn));

Vue Composition API學(xué)習(xí)了React Hooks的思想;

Flutter的很多靈感都來(lái)自React,來(lái)自官網(wǎng)的一段話:(SwiftUI呢)

事實(shí)上Flutter中的Widget – Element – RenderObject;

對(duì)應(yīng)React的就是JSX – 虛擬DOM – 真實(shí)DOM;

所以React可以說(shuō)是前端的先驅(qū)者,它總是會(huì)引領(lǐng)整個(gè)前端的潮流。

React:用于構(gòu)建用戶界面的 JavaScript 庫(kù);

React的官網(wǎng)文檔:https://zh-hans.reactjs.org/

在這里插入圖片描述

React特點(diǎn)

聲明式編程

聲明式編程是目前整個(gè)大前端開(kāi)發(fā)的模式:Vue、React、Flutter、SwiftUI;

它允許我們只需要維護(hù)自己的狀態(tài),當(dāng)狀態(tài)改變時(shí),React可以根據(jù)最新的狀態(tài)去渲染我們的UI界面;

組件化開(kāi)發(fā):

組件化開(kāi)發(fā)頁(yè)面目前前端的流行趨勢(shì),我們會(huì)將復(fù)雜的界面拆分成一個(gè)個(gè)小的組件;

如何合理的進(jìn)行組件的劃分和設(shè)計(jì)也是后面我會(huì)講到的一個(gè)重點(diǎn);

多平臺(tái)適配

2013年,React發(fā)布之初主要是開(kāi)發(fā)Web頁(yè)面;

2015年,F(xiàn)acebook推出了ReactNative,用于開(kāi)發(fā)移動(dòng)端跨平臺(tái);(雖然目前Flutter非?;鸨?,但是還是有很多公司在使用 ReactNative);

2017年,F(xiàn)acebook推出ReactVR,用于開(kāi)發(fā)虛擬現(xiàn)實(shí)Web應(yīng)用程序;(VR也會(huì)是一個(gè)火爆的應(yīng)用場(chǎng)景);

React的依賴介紹

React的開(kāi)發(fā)依賴

開(kāi)發(fā)React必須依賴三個(gè)庫(kù):

react:包含react所必須的核心代碼

react-dom:react渲染在不同平臺(tái)所需要的核心代碼

babel:將jsx轉(zhuǎn)換成React代碼的工具, jsx語(yǔ)法瀏覽器是不識(shí)別的

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

對(duì)于Vue來(lái)說(shuō),我們只是依賴一個(gè)vue.js文件即可,但是react居然要依賴三個(gè)包。

其實(shí)呢,這三個(gè)庫(kù)是各司其職的,目的就是讓每一個(gè)庫(kù)只單純做自己的事情;

在React的0.14版本之前是沒(méi)有react-dom這個(gè)概念的,所有功能都包含在react里;

為什么要進(jìn)行拆分呢?原因就是推出react-native

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

react-dom針對(duì)web和native所完成的事情不同:

web端:react-dom會(huì)將jsx最終渲染成真實(shí)的DOM,顯示在瀏覽器中native端:react-dom會(huì)將jsx最終渲染成原生的控件(比如Android中的Button,iOS中的UIButton)。

Babel和React的關(guān)系

babel是什么呢?

Babel ,又名 Babel.js。

是目前前端使用非常廣泛的編譯器、轉(zhuǎn)移器。

比如當(dāng)下很多瀏覽器并不支持ES6的語(yǔ)法,但是確實(shí)ES6的語(yǔ)法非常的簡(jiǎn)潔和方便,我們開(kāi)發(fā)時(shí)希望使用它。

那么編寫(xiě)源碼時(shí)我們就可以使用ES6來(lái)編寫(xiě),之后通過(guò)Babel工具,將ES6轉(zhuǎn)成大多數(shù)瀏覽器都支持的ES5的語(yǔ)法。

React和Babel的關(guān)系:

默認(rèn)情況下開(kāi)發(fā)React其實(shí)可以不使用babel。

但是前提是我們自己使用 React.createElement 來(lái)編寫(xiě)源代碼,它編寫(xiě)的代碼非常的繁瑣和可讀性差。

那么我們就可以直接編寫(xiě)jsx(JavaScript XML)的語(yǔ)法,并且讓babel幫助我們轉(zhuǎn)換成React.createElement。

后續(xù)文章還會(huì)詳細(xì)講到;

React的依賴引入

所以,我們?cè)诰帉?xiě)React代碼時(shí),這三個(gè)依賴都是必不可少的

那么,如何添加這三個(gè)依賴:

方式一:直接CDN引入

方式二:下載后,添加本地依賴

方式三:通過(guò)npm管理(后續(xù)腳手架再使用)

暫時(shí)我們直接通過(guò)CDN引入,來(lái)演練下面的示例程序:

這里有一個(gè)crossorigin的屬性,這個(gè)屬性的目的是為了拿到跨域腳本的錯(cuò)誤信息

<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)于初識(shí)React及React開(kāi)發(fā)依賴介紹的文章就介紹到這了,更多相關(guān)React開(kāi)發(fā)依賴內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • React?UI組件庫(kù)之快速實(shí)現(xiàn)antd的按需引入和自定義主題

    React?UI組件庫(kù)之快速實(shí)現(xiàn)antd的按需引入和自定義主題

    react入門學(xué)習(xí)告一段路,下面這篇文章主要給大家介紹了關(guān)于React?UI組件庫(kù)之快速實(shí)現(xiàn)antd的按需引入和自定義主題的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-07-07
  • React實(shí)現(xiàn)動(dòng)態(tài)輪播圖的使用示例

    React實(shí)現(xiàn)動(dòng)態(tài)輪播圖的使用示例

    輪播組件是常見(jiàn)的一種方式,用來(lái)展示圖像、信息或者是廣告,本文就來(lái)介紹一下React實(shí)現(xiàn)動(dòng)態(tài)輪播圖的使用示例,具有一定的參考價(jià)值,感興趣的可以了解一下
    2023-12-12
  • React實(shí)現(xiàn)pc端的彈出框效果

    React實(shí)現(xiàn)pc端的彈出框效果

    這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)pc端的彈出框效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • 一文詳解手動(dòng)實(shí)現(xiàn)Recoil狀態(tài)管理基本原理

    一文詳解手動(dòng)實(shí)現(xiàn)Recoil狀態(tài)管理基本原理

    這篇文章主要為大家介紹了一文詳解手動(dòng)實(shí)現(xiàn)Recoil狀態(tài)管理基本原理實(shí)例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-05-05
  • React實(shí)現(xiàn)卡片拖拽效果流程詳解

    React實(shí)現(xiàn)卡片拖拽效果流程詳解

    這篇文章主要介紹了React Web開(kāi)發(fā)實(shí)戰(zhàn)示例,實(shí)現(xiàn)卡片拖拽效果,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
    2022-11-11
  • React實(shí)現(xiàn)單向數(shù)據(jù)流的方法

    React實(shí)現(xiàn)單向數(shù)據(jù)流的方法

    本文主要介紹了React實(shí)現(xiàn)單向數(shù)據(jù)流的方法
    2023-04-04
  • React封裝CustomSelect組件思路詳解

    React封裝CustomSelect組件思路詳解

    小編需要封裝一個(gè)通過(guò)Popover彈出框里可以自定義渲染內(nèi)容的組件,渲染內(nèi)容暫時(shí)有: 單選框, 復(fù)選框,接下來(lái)通過(guò)本文給大家分享React封裝CustomSelect組件思路,需要的朋友可以參考下
    2022-07-07
  • react項(xiàng)目如何運(yùn)行在微信公眾號(hào)

    react項(xiàng)目如何運(yùn)行在微信公眾號(hào)

    這篇文章主要介紹了react項(xiàng)目如何運(yùn)行在微信公眾號(hào),幫助大家更好的理解和學(xué)習(xí)使用react,感興趣的朋友可以了解下
    2021-04-04
  • 使用React.forwardRef傳遞泛型參數(shù)

    使用React.forwardRef傳遞泛型參數(shù)

    這篇文章主要介紹了使用React.forwardRef傳遞泛型參數(shù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • 30分鐘精通React今年最勁爆的新特性——React Hooks

    30分鐘精通React今年最勁爆的新特性——React Hooks

    這篇文章主要介紹了30分鐘精通React今年最勁爆的新特性——React Hooks,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-03-03

最新評(píng)論