React Native 學(xué)習(xí)總結(jié)

React Native

  • 什么是React Native,它能做什么
  • 使用React Native開發(fā)跟我們?cè)鷳?yīng)用相比較優(yōu)勢(shì)在哪里
  • 使用RN進(jìn)行開發(fā)需要用到的只是都有哪些

React

React 是一套可以用簡(jiǎn)潔的語法高效繪制 DOM 的框架

  • 所謂的“高效”，是因?yàn)?React 獨(dú)創(chuàng)了 Virtual DOM 機(jī)制。Virtual DOM 是一個(gè)存在于內(nèi)存中的 JavaScript 對(duì)象，它與 DOM 是一一對(duì)應(yīng)的關(guān)系，也就是說只要有 Virtual DOM，我們就能渲染出 DOM,當(dāng)界面發(fā)生變化時(shí)，得益于高效的 DOM Diff 算法，我們能夠知道 Virtual DOM 的變化，從而高效的改動(dòng) DOM，避免了重新繪制 DOM。
  • React只是前端開發(fā)過程中的專注于UI部分的框架,對(duì)應(yīng)到 MVC 結(jié)構(gòu)中就是 View 層。要想實(shí)現(xiàn)完整的 MVC 架構(gòu)，還需要 Model 和 Controller 的結(jié)構(gòu)。在前端開發(fā)時(shí)，我們可以采用 Flux 和 Redux 架構(gòu)，這兩個(gè)架構(gòu)我目前還么接觸過
  • 對(duì)于React的學(xué)習(xí)可以到React官方網(wǎng)站或者阮一峰老師的技術(shù)博客進(jìn)行深入學(xué)習(xí)

什么是React Native

一句話概括rn就是一個(gè)基于 JavaScript，具備動(dòng)態(tài)配置能力，面向前端開發(fā)者的移動(dòng)端開發(fā)框架, 它的宗旨是讓前端開發(fā)者像用 React 寫網(wǎng)頁那樣，用 React Native 寫移動(dòng)端應(yīng)用。宗旨:Learn once，Write anywhere!,
React Native 希望前端開發(fā)者學(xué)習(xí)完 React 后，能夠用同樣的語法、工具等，分別開發(fā)安卓和 iOS 平臺(tái)的應(yīng)用并且不用一行原生代碼。

  • 使用rn編程的好處:

  • 無需編譯

  • 利用了React里面的分層和DOM diff機(jī)制,減少重復(fù)渲染

  • 相比于原生平臺(tái)，開發(fā)速度更快，支持熱更新,相比于 Hybrid 框架，性能更好。

  • 缺點(diǎn)

  • 做不到 Write once, Run everywhere，也就是說開發(fā)者依然需要為 iOS 和 Android 平臺(tái)提供兩套不同的代碼，比如參考官方文檔可以發(fā)現(xiàn)不少組件和API都區(qū)分了 Android 和 iOS 版本。即使是共用組件，也會(huì)有平臺(tái)獨(dú)享的函數(shù)。

  • 學(xué)習(xí)成本高

JSX語法

  • HTML 語言直接寫在 JavaScript 語言之中，不加任何引號(hào)，這就是 JSX 的語法，它允許 HTML 與 JavaScript 的混寫

  • JSX 的基本語法規(guī)則：遇到 HTML 標(biāo)簽（以 < 開頭），就用 HTML 規(guī)則解析；遇到代碼塊（以 { 開頭），就用 JavaScript 規(guī)則解析。

var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);

JavaScript

  • 要想熟練使用RN,javascript語法是必須熟悉的,建議先到 W3School上花幾分鐘時(shí)間快速地瀏覽一遍語法,然后在開發(fā)過程中遇到具體生疏語法的時(shí)候再仔細(xì)查看.
javascript中的Promise用法

在rn的網(wǎng)絡(luò)請(qǐng)求中常用的fetch方法發(fā)送http請(qǐng)求,fetch方法會(huì)返回一個(gè)promise類型的對(duì)象,所有對(duì)于我們js的初學(xué)者應(yīng)該理解這個(gè)對(duì)象

  • Promise在js中的使用類似OC中的block,但是實(shí)質(zhì)卻不同于block,可以理解為一個(gè)封裝了兩個(gè)block的特殊的對(duì)象.主要用于解決異步方法完成后的回調(diào),Promise允許我們將一個(gè)執(zhí)行異步操作

React Native component

  • React 允許將代碼封裝成組件（component），在rn中建議將具體小的UI組件都進(jìn)行封裝以便以后的復(fù)用.
    React.createClass 方法就用于生成一個(gè)組件類,當(dāng)然這是ES5中的語法規(guī)范,ES6之后的規(guī)范如下export default class ChoiceOptionView extends Component,ES5和ES6語法上發(fā)生了很大變化,但是對(duì)于我們來說直接上手使用最新的ES6以上的語法更好,不過在看示例代碼或者開源項(xiàng)目中的時(shí)候有很多舊的語法樣式,使我們感到疑惑,這里有一份ES5和ES6之間語法上的差異對(duì)照
  • 對(duì)于component的學(xué)習(xí)應(yīng)該放在重點(diǎn),以后的開發(fā)主要是面向組件開發(fā)
  • 在平時(shí)開發(fā)中View, Text,Image,學(xué)會(huì)了就可以進(jìn)行簡(jiǎn)單的界面編寫了,建議稍微過一下官網(wǎng)的教程就開始上手寫,寫到哪兒查到那兒.
  • component的學(xué)習(xí)要點(diǎn)大概分為
  1. props_& _state
  2. component的生命周期
  3. 布局!!!
  4. 屬性&style
props和 state
props

大多數(shù)組件在創(chuàng)建時(shí)就可以使用各種參數(shù)來進(jìn)行定制。用于定制的這些參數(shù)就稱為props（屬性）。

state

React靠一個(gè)state來維護(hù)狀態(tài)，當(dāng)state發(fā)生變化則更新DOM?？刂埔粋€(gè)組件，一般有兩種數(shù)據(jù)類型，一種是props，一種是state。props是在父組件中設(shè)置，一旦指定，它的生命周期是不可以改變的。對(duì)于組件中數(shù)據(jù)的變化，我們是通過state來控制的。一般情況下，我們初始化state狀態(tài)，是在construcor構(gòu)造函數(shù)中，然后如果需要改變時(shí)，我們可以調(diào)用setState方法。

一句話區(qū)分state和props就是: 外界傳遞過來的一般不會(huì)發(fā)生變化的屬性成為props,組建內(nèi)部用來控制組件更新的屬性成為state

生命周期方法

初始化方法

//這里一定要調(diào)用super的方法,這里還能拿到外界傳遞過來的props
constructor(props) {
super(props)
}


> 組件加載方法

* componentWillMount\(\)
* 會(huì)在組件render之前執(zhí)行，并且永遠(yuǎn)都只執(zhí)行一次。
* componentDidMount\(\)
* 這個(gè)方法會(huì)在組件加載完畢之后,render之前執(zhí)行。在這個(gè)時(shí)候之后組件已經(jīng)生成了對(duì)應(yīng)的DOM結(jié)構(gòu)，可以通過this.getDOMNode\(\)來進(jìn)行訪問。如果你想和其他JavaScript框架一起使用，可以在這個(gè)方法中執(zhí)行setTimeout, setInterval或者發(fā)送AJAX請(qǐng)求等操作\(防止異部操作阻塞UI\)。

> 組件更新:

* componentWillReceiveProps\(\)
* 在組件接收到一個(gè)新的prop時(shí)被執(zhí)行。這個(gè)方法在初始化render時(shí)不會(huì)被調(diào)用。這個(gè)方法很少用到,只有當(dāng)組件內(nèi)部的狀態(tài)映射于外界傳遞的屬性的時(shí)候使用,一般我們通過回調(diào)可以實(shí)現(xiàn)外界的對(duì)該組件的控制
* shouldComponentUpdate\(\)

* `boolean shouldComponentUpdate(object nextProps, object nextState)`,返回一個(gè)布爾值。在組件接收到新的props或者state時(shí)被執(zhí)行。在初始化時(shí)或者使用forceUpdate時(shí)不被執(zhí)行,可以在你確認(rèn)不需要更新組件時(shí)使用,注意:** 如果shouldComponentUpdate返回false, render\(\)則會(huì)在下一個(gè)state change之前被完全跳過。\(另外componentWillUpdate和 componentDidUpdate也不會(huì)被執(zhí)行\(zhòng)),使用這個(gè)方法可以在特殊情況下提高組件的性能**

* componentWillUpdate\(\)

* 在組件接收到新的state但還沒有render時(shí)被執(zhí)行。在初始化時(shí)不會(huì)被執(zhí)行。

一般用在組件發(fā)生更新之前。

* componentDidUpdate\(\)
* 在組件完成更新后立即執(zhí)行。在初始化時(shí)不會(huì)被執(zhí)行。一般會(huì)在組件完成更新后被使用。例如清除notification文字等操作

> 組件銷毀

* componentWillUnmount
* 組件從DOM樹remove后立即執(zhí)行.主要用來執(zhí)行一些必要的清理任務(wù)。例如清除setTimeout等函數(shù)

##### 布局

* rn的UI布局方面沿用了前端慣用的css的盒子模型

![css的盒子模型](https://sfault-image.b0.upaiyun.com/232/163/2321632176-57b429c424aac)

//margin/padding/border 相關(guān)布局屬性
margin 留白

marginBottom 底部留白

marginLeft 左外留白

marginRight 右外留白

marginTop 上外留白

marginVertical 上下外留白的簡(jiǎn)寫，如果marginTop與marginBottom一樣的話，可以直接用這個(gè)值代替

marginHorizontal 左右外留白的簡(jiǎn)寫

borderColor 整體邊框顏色

borderRadius 整體邊框的圓角

borderWidth 整體邊框的寬

borderStyle 邊框樣式 dotted solid double dashed等

borderBottomColor 底邊框顏色

borderBottomWidth 底邊框?qū)挾?/p>

borderLeftColor 左邊框顏色

borderLeftWidth 左邊框?qū)挾?/p>

borderRightColor 右邊框顏色

borderRightWidth 右邊框?qū)挾?/p>

borderTopColor 上邊框顏色

borderTopWidth 上邊框?qū)挾?/p>

borderBottomLeftRadius 左下角圓角邊框

borderBottomRightRadius 右下角圓角邊框

borderTopLeftRadius 上邊框左圓角

borderTopRightRadius 上邊框右圓角

padding 內(nèi)留白

paddingBottom

paddingTop

paddingLeft

paddingRight

paddingHorizontal

paddingVertical

height 元素高度，包含padding與border

width 元素寬度，包含padding與border
//定位相關(guān)
position

top

right

bottom

left

//文字相關(guān)
color

fontFamily

fontSize

fontStyle

fontWeight

textAlign

textDecorationColor

textDecorationLine

textDecorationStyle

letterSpacing

lineHeight

//陰影相關(guān)
shadowColor 陰影色I(xiàn)OS only

shadowOffset 陰影距離IOS only

shadowOpacity 陰影透明度IOS only

shadowRadius 陰影半徑 IOS only

elevation 仰角 android only

//其他
opacity

overflow

resizeMode

rotation

scaleX

scaleY

transform

transformMatrix

translateX

translateY

writingDirection


* 支持flex-box布局,強(qiáng)烈建議使用,一旦理解寫布局能大大地提高開發(fā)速度,適配性也不錯(cuò),前端的默認(rèn)布局是自上而下,自左向右的布局方式
學(xué)習(xí)flex布局建議看[阮一峰老師的博客](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
博客中主要介紹的flex布局在react中的使用,_注意在rn中使用flex與react中的flex主要區(qū)別是_`主軸`_默認(rèn)是column而不是row_

下面有幾張形象的圖片用來理解flex-box布局

![](http://upload-images.jianshu.io/upload_images/788734-bfd7f597e38e7f8c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](http://upload-images.jianshu.io/upload_images/788734-dbe612c184e6377c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](http://upload-images.jianshu.io/upload_images/788734-c809373f1445348d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](http://upload-images.jianshu.io/upload_images/788734-a722ed2433e41aad.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](http://upload-images.jianshu.io/upload_images/788734-000737e59cff2113.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

> **這里重點(diǎn)標(biāo)記一個(gè)東西:`position`屬性,`position屬性`she值`absluate`就會(huì)使當(dāng)前component脫離文檔流,比如現(xiàn)在設(shè)置該component為absluate以后left,top,等會(huì)依據(jù)父控件來進(jìn)行排版,如果設(shè)置margin那么會(huì)依據(jù)相鄰的兄弟控件進(jìn)行排版**
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

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