1. RN是如何工作的
React的關(guān)鍵特點(diǎn)：Virtual DOM(虛擬DOM)俯萌。
為了更好地理解RN的工作原理，先需要了解一下Virtual DOM (虛擬DOM)。
執(zhí)行Virtual DOM計(jì)算牵啦，減少瀏覽器實(shí)際DOM的重復(fù)渲染。
Virtual DOM的功能：
- 減少了重復(fù)渲染妄痪，提升了性能哈雏。
-
提供了強(qiáng)大的抽象能力。
強(qiáng)大的抽象能力
RN調(diào)用Objective-C的API去渲染iOS組件
調(diào)用Java接口去渲染Android組件
而不是渲染到瀏覽器DOM上拌夏。
“橋接”令一切成為可能僧著，它使得React可調(diào)用宿主平臺(tái)開(kāi)放UI組件。
React組件通過(guò)render方法返回了描述界面的標(biāo)記代碼障簿。
- Web平臺(tái)：將標(biāo)記代碼解析成瀏覽器的DOM盹愚；
- RN平臺(tái)上：將標(biāo)記代碼解析成特定平臺(tái)的組件。
2. 渲染周期
生命周期基本與React相同站故，但渲染過(guò)程有些區(qū)別皆怕。
渲染周期始于React組件掛載之后，然后React進(jìn)入渲染周期西篓，根據(jù)需要渲染組件愈腾。
在渲染階段，React將開(kāi)發(fā)者在render方法中返回的HTML標(biāo)記直接按需渲染在頁(yè)面上岂津。
RN與React不同的是虱黄，JavaScript依賴(lài)于“橋接”，通過(guò)橋接的解析吮成，間接調(diào)用宿主平臺(tái)的基礎(chǔ)接口和UI元素（也發(fā)就是Objective-C和Java）橱乱。由于RN不是在UI主線(xiàn)程運(yùn)行，他可以在不影響用戶(hù)體驗(yàn)的前提下執(zhí)行異步調(diào)用粱甫。
3. 在RN中創(chuàng)建組件
3.1 編寫(xiě)視圖
在使用每一個(gè)組件之前泳叠，都需要明確的進(jìn)行導(dǎo)入。
| React | RN |
|---|---|
| < div > | < View > |
| < span > | < Text > |
| < ui >, < ul > | < ListView > |
| < img > | < Image > |
3.2 使用JSX
RN通過(guò)編寫(xiě)JSX來(lái)設(shè)計(jì)視圖茶宵，并將視圖標(biāo)記和控制邏輯組合在一起成為一個(gè)文件危纫。
使用JSX語(yǔ)法來(lái)編寫(xiě)RN項(xiàng)目，JSX認(rèn)為減少心智負(fù)擔(dān)比文件分離更有用。
RN中.js文件實(shí)際上就是JSX文件种蝶。
使用JS和JSX有啥區(qū)別契耿，如下例子所示:
var HelloMessage=React.createClass({
displayName:"HelloMessage",
render: function render(){
return React.createElement(
"div",
null,
"Hello",
this.props.name
);
}
});
React.render(React.createElement(HelloMessage,{name:"Bonnie"}),mountNode);
//----------------------------------
//通過(guò)使用JSX使其更為簡(jiǎn)潔，使用類(lèi)XML標(biāo)記來(lái)代替調(diào)用React.createElement方法并傳入一組HTML屬性的做法蛤吓。
var HelloMessage=React.createClass({
render:function(){
// 返回標(biāo)記而不是調(diào)用createElement方法
return <div> Hello {this.props.name}</div>;
}
});
//我們不再需要調(diào)用createElement方法
React.render(<HelloMessage name="Bonnie"/>,mountNode)
//------------------------------------
以上的兩段代碼最終被渲染成以下的HTML
<div> Hello Bonnie </div>
3.3 原生組件的樣式
React和宿主平臺(tái)之間的“橋接”包含了一個(gè)縮減版的CSS子集的實(shí)現(xiàn)宵喂。
這個(gè)CSS子集主要通過(guò)flexbox進(jìn)行布局，做到了盡量簡(jiǎn)單化会傲，而不是去實(shí)現(xiàn)所有的CSS規(guī)則锅棕。
RN做到了樣式規(guī)范的一致（因?yàn)橹恍枰m配安卓和iOS兩種類(lèi)型設(shè)備）。
RN也堅(jiān)持使用內(nèi)聯(lián)樣式淌山，通過(guò)JavaScript對(duì)象進(jìn)行樣式組織裸燎。
例子：
//定義一個(gè)樣式
var style={
backgroundColor:'white',
fontSize:'16px'
}
//然后使用它
var tv=(<Text style={style}> A styled Text </Text>);
4. 宿主平臺(tái)接口
使用Web環(huán)境的React與RN'''最大的不同'''應(yīng)該就在宿主平臺(tái)的接口了。
React Native的橋接不可能暴露宿主平臺(tái)全部的接口泼疑，如果你需要使用一個(gè)未支持的特性德绿，完全可以自己動(dòng)手添加到RN中。
RN中退渗，平臺(tái)特定的接口在提供優(yōu)秀原生的用戶(hù)體驗(yàn)方面發(fā)揮了巨大作用移稳。
