1，寫(xiě)在前面
在web開(kāi)發(fā)中，以往結(jié)構(gòu)、樣式、行為的開(kāi)發(fā)通常是分離的，也就是所謂的“關(guān)注點(diǎn)分離（separation of concerns）”，它的意思是，各種技術(shù)只負(fù)責(zé)自己的領(lǐng)域（html、css、js），不要混合在一起，形成耦合。
HTML 語(yǔ)言：負(fù)責(zé)網(wǎng)頁(yè)的結(jié)構(gòu)，又稱(chēng)語(yǔ)義層
CSS 語(yǔ)言：負(fù)責(zé)網(wǎng)頁(yè)的樣式，又稱(chēng)視覺(jué)層
JavaScript 語(yǔ)言：負(fù)責(zé)網(wǎng)頁(yè)的邏輯和交互，又稱(chēng)邏輯層或交互層
這在往日都是好的實(shí)踐推薦。但是這幾年組件化和模塊化開(kāi)發(fā)思維漸行其道（特別是React出來(lái)后，打破了這一原則，React的基礎(chǔ)組織單元是組件，強(qiáng)制要求把html、css、js寫(xiě)在一起），特性或者功能粒度成為一種軟件設(shè)計(jì)和開(kāi)發(fā)上的選擇。
那么，在實(shí)際開(kāi)發(fā)中，有沒(méi)有一種超集可以貫穿三者呢？ 有，jsx和typescript就是，jsx與typescript是兩個(gè)不同的概念，但都是一種語(yǔ)法糖，都是JavaScript的超集合，typescript1.6版本是支持jsx的，在react中會(huì)用jsx（write css in js、write “html” in js）來(lái)開(kāi)發(fā)組件，React-native是react的擴(kuò)展，在組件開(kāi)發(fā)上也是用的jsx。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? component in react-native
2，樣式
2.1，樣式定義
在RN中，并不需要學(xué)習(xí)什么特殊的語(yǔ)法來(lái)定義樣式，使用JavaScript來(lái)寫(xiě)樣式。樣式名（屬性）基本上遵循的是CSS的命名 和規(guī)則（比如后定義覆蓋原則、樣式表現(xiàn)等），只是按照J(rèn)S的語(yǔ)法要求，某些樣式名需要用駝峰命名法（比如css中的background-color 需寫(xiě)成“backgroundColor”）。
樣式的定義有兩種方式：
內(nèi)聯(lián)方法： style={{color: red}}
樣式生成器: : styleSheet.creat({textColor: {color: red}})
2.2，樣式用法
在RN中，核心組件都有一個(gè)名為style的屬性，樣式在RN中的應(yīng)用就是給該屬性賦值。屬性的值可為JavaScript中的對(duì)象（｛color：red｝），或者數(shù)組([{color: red}, {color: blue}])。
2.3，樣式應(yīng)用范疇（組件可用樣式和識(shí)別）
RN中的組件（基礎(chǔ)組件、RN中提供的組件）所能應(yīng)用的樣式有一定的范疇，比如color樣式不能應(yīng)用在View組件中。識(shí)別哪些組件有哪些可用的樣式有兩種方法：1，去網(wǎng)上或者官網(wǎng)查。2，調(diào)試時(shí)打開(kāi)warn提醒，應(yīng)用一個(gè)樣式，如果該組件沒(méi)有該樣式，則會(huì)有告警。告警里面會(huì)列出該組件所能應(yīng)用到的樣式集合。
3，布局
在React Native中使用flexbox規(guī)則來(lái)指定某個(gè)組件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局結(jié)構(gòu)。RN中的Flexbox規(guī)則和Web中Css FlexBox基本一致，主要的不同就是flex-direction默認(rèn)不同，css中默認(rèn)是水平方向，rn中默認(rèn)是垂直方向。具體的flexbox布局相關(guān)的知識(shí)可以參考我之前寫(xiě)的一篇文章《盒模型與布局》
4，繪制
Web中頁(yè)面的繪制是瀏覽器器UI后端做的，而在RN中則是交由原生去繪制（例如ios中的UIkits，具體RN和原生的交互和通訊可以參考我之前寫(xiě)的另外一篇文章《React-Native原理解析與通訊機(jī)制闡述（Eg：ios）》），這里只做簡(jiǎn)單的淺析和對(duì)比。
4.1，web 頁(yè)面繪制
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 4.1.1，webkite解析網(wǎng)頁(yè)的過(guò)程
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 4.1.2，瀏覽器的內(nèi)部過(guò)程
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? UI Backend就是繪制頁(yè)面圖層的模塊。
4.2，RN視圖繪制
4.2.1，啟動(dòng)渲染（從組件的角色剖析--android）
簡(jiǎn)單說(shuō)就是Native初始化 -> 加載JS，JS端注冊(cè)組件 ->端上調(diào)用JS端run方法，傳入入口組件名稱(chēng) -> JS端啟動(dòng)渲染流程。
4.2.2，組件渲染--View
創(chuàng)建： ReactNative的UI組件通過(guò)requireNativeComponent->createReactNativeComponentClass->ReactNativeBaseComponent下mountComponent的調(diào)用關(guān)系，最終在mountComponent中調(diào)用UIManager（Native Module）組件創(chuàng)建View：UIManager.createView(tag, this.viewConfig.uiViewClassName, nativeTopRootTag, updatePayload);，在Native端，UIManager調(diào)用對(duì)應(yīng)組件類(lèi)型的ViewManager（單例，管理類(lèi)）創(chuàng)建實(shí)例。
更新：屬性--樣式同步，也就是re-render的過(guò)程，在這過(guò)程中會(huì)調(diào)用ReactNativeBaseComponent下receiveComponent->UIManager.updateView完成。
參考： https://github.com/facebook/react-native/? ? ? ? ? ? http://facebook.github.io/react-native/? ? ? ? ? ? http://www.itdecent.cn/p/17d6f6c57a5c
