ReactNative與傳統(tǒng)前端Html+Css+JS的區(qū)別


圖片發(fā)自簡書App

一、標(biāo)簽不同

? ? 1.容器? ? div——View

? ? 2.圖片? ? img——Image

? ? 3.文字? ? 所有雙標(biāo)簽——Text

? ? 4.背景? ? background——ImageBackground


? ? 注意:

? ? 1.react native中所有的標(biāo)簽首字母必須大寫,而html標(biāo)簽標(biāo)準(zhǔn)都是小寫

? ? 2.react native中所有需要輸出的文字必須使用<Text></Text>包裹,而HTML里面的雙標(biāo)簽都可以包裹文字

3.HTML中的圖片:<img src=“a.jpg”/>,react native中的圖片必須指定寬高:<Image source={require(“a.png”)} style={{width:100,height:100}}/>

4.react native的style中不支持使用background來定義背景,如果想要用圖片做背景,必須使用<ImageBackground source={require("bg.png")}></ImageBackground>標(biāo)簽包裹,而html中的css中可以使用background:url("../images/bg.png")

5.

二、布局樣式不同

react native中不存在float,也不支持position:fixed,而是采用的flex布局,雖然react native支持position中的absolute和realative以及flex,都是和html中css有所不同:

1.react native中的absolute默認(rèn)相對于父級,就算父級沒有定位,而css中的absolute是向上尋找的相對點,如果父級沒有定位,一直往上找定位參考點

2.react native中的flex的flexDirection默認(rèn)值是:column而css中的默認(rèn)值是row

3.react native中的高度等于父級高度使用flex:1 ,而web的css中使用height:100%,react native中沒有百分比的概念

注意:react native支持的屬性參考屬性

三、結(jié)構(gòu)不同

html加載的時候是自上而下的阻塞式加載,而react native根據(jù)生命周期來渲染,跟寫的位置無關(guān),而且react native文件一切皆js,無論是結(jié)構(gòu)還是css還是JS邏輯,下面是react native的生命周期:

1.constructor:組件被創(chuàng)建之前初始化數(shù)據(jù)

2.componentWillMount組件已創(chuàng)建但是未被渲染,可以在這里面請求數(shù)據(jù)

3.render:組件渲染,組件結(jié)構(gòu)都寫在這里

4.componentDidMount:組件已渲染完,可以在這里請求數(shù)據(jù)并使用setState改變數(shù)據(jù)來觸發(fā)視圖自動更新

5.componentWillReceiveProps:如果組件收到新的屬性(props),就會調(diào)用此函數(shù),并使用setState改變數(shù)據(jù)來觸發(fā)視圖自動更新

6.shouldComponentUpdate當(dāng)組件接收到新的屬性和狀態(tài)改變的話,都會觸發(fā)調(diào)用 shouldComponentUpdate來判斷組件是否應(yīng)該更新

7.componentWillUpdate如果組件狀態(tài)或者屬性改變,并且上的 shouldComponentUpdate(...) 返回為 true,就會開始準(zhǔn)更新組件,并調(diào)用 componentWillUpdate()

8.componentDidUpdate調(diào)用了 render() 更新完成界面之后,會調(diào)用 componentDidUpdate() 來得到通知

9.componentWillUnmount當(dāng)組件要被從界面上移除的時候,就會調(diào)用此函數(shù),一般在這里取消定時器,remove監(jiān)聽事件

四、頁面跳轉(zhuǎn)不同

html中使用a標(biāo)簽或者window.location.href來跳轉(zhuǎn)頁面,react native的路由跳轉(zhuǎn)有多種方案,可以根據(jù)自身選擇,官方推薦react-navigation,還有react-native-router-flux,navigator等

五、js運(yùn)行環(huán)境不同

web中的js運(yùn)行在瀏覽器,最上級是window,而react native里沒有window的概念,組件化最上級是global,掛在global下面是跨組件的,例如global.a=1,那么在所有組件都能使用a,所以一般登錄成功后把token掛在global上面,在其他任何頁面請求數(shù)據(jù)的時候可以直接使用token,注銷登錄就清除token

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容