A. react如何根據字元串生成組件
使用React元素處理事件與處理DOM元素上的事件非常相似。不過有一些語法上的差異：
react事件使用駝峰命名法，而不是全部小寫命名。
使用JSX你傳遞一個函數作為事件處理程序，而不是一個字元串。
例如，HTML：
<button onclick="activeLasers()">
Active Lasers
</button>
在React中略有不同：
<button onClick={activateLasers}>
Active Lasers
</button>
另一個區別是，你不能返回false來防止React中的默認行為。 您必須顯式調用preventDefault。 例如，使用純HTML，為了防止打開新頁面的默認鏈接行為，您可以寫：
<a href="#" onclick="console.log('The link was clicked'); return false;">
Click me
</a>
在React中，這可以改為：
function ActiveLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked');
}
return (
<a href='#' onClick={handleClick}>
click me
</a>
);
}
B. vue jsx 循環創建組件為什麼不顯示
vue 調用子組件，傳遞一個方法，這個方法該怎麼傳遞event
可以用 v-on 指令監聽 DOM 事件：
<div id="example">
<button v-on:click="greet">Greet</button>
</div>
綁定了一個單擊事件處理器到一個方法 greet。下面在 Vue 實例中定義這個方法：
var vm = new Vue({
el: '#example',
data: {
name: 'Vue.js'
},
// 在 `methods` 對象中定義方法
methods: {
greet: function (event) {
// 方法內 `this` 指向 vm
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
alert(event.target.tagName)
}
}
})
// 也可以在 javaScript 代碼中調用方法
vm.greet() // -> 'Hello Vue.js!'
C. react vue選哪一個
個人推薦選擇vue
先給你上一個二者對比;
1、Vue上手更簡單，特別是從dom和jquery時代過來的程序員，或者習慣模板語言的後端開發，更容易接受Vue。
2、Vue從設計上講，跟趨向於簡化使用，就是說Vue從骨子裡面就是想用起來簡單，但React更多的是為大型工程考慮。
3、React上手稍微難一點，除了Vue那些基礎，你還得學習，純函數組件，函數式編程，JSX，css-in-js，高階組件，Rex等。
4、在組件化上，React更純粹，也可以說更強大一些，而Vue不是完全組件化，應對一些復雜組件，可能會有些麻煩。
5、React的設計，配合TypeScript，更適合大型或者超大型的多人協作項目，管理起來更規范，不容易出錯。
6、對於移動端跨平台的支持，React的兄弟項目ReactNative已經佔了半壁江山，雖然React和ReactNative可以看成兩個東西，但是也有很多關聯性。而Vue在移動端開發上，目前來看，有阿里的Weex基於Vue，據說也很強大，但是肯定不如ReactNative那麼主流和穩定，具體Vue在移動端的表現如何，需要時間觀察。
7、雖然Vue在中國、日本、韓國、法國等地區熱度很高，在美國也有一定影響力，但在全世界范圍看，React的社區比Vue要更大，資源也更豐富，React的背景Facebook，實力強於個人開發者-尤雨溪(背靠了阿里和一些小贊助公司)。但實力是相對的，實際上，兩者實力都很強，不用擔心Vue的實力不足或穩定性，Vue足夠優秀，3、5年內應該都會是主流，只能說React在全世界范圍內的資源更多，影響更大而已。
8、Vue和React本身只是一個基礎庫，對於稍微復雜一點的項目來說，大多數用戶都不會自己搭框架。所以說，選擇Vue還是React，要重點比較兩者的第三方開發框架、UI框架、組件庫及各種資源是否豐富、有活力。
9、就我目前看到的情況而言，Vue體系較熱的UI框架有ElementUI、iView/ViewUI、Ant Design Vue、vant、mint-ui、vux等，Vue Admin（後台管理系統）相關資源比較豐富，很多中小公司都在用；React熱門UI框架有Material-UI、Ant Design、Element-react等，比較集中。可以這樣說，Vue的生態就像是游擊隊，而React更像是正規軍。ElementUI和Ant Design都是阿里系的，如果沒有Ant Design的話，感覺Vue在國內要強盛一些，但有了阿里Ant Design強勢介入，許多中間派就倒向React了，特別是一些稍微大一點的公司。
10、其他因素：Vue的核心開發團隊只有尤雨溪一人（大概90%的代碼都是他寫的），假如他休假了、生病了，主要開發就暫停了，Vue想要健康的發展，應該要增加1~2個核心開發（每個人都深度參與開發，並可以推動開源生態發展）。
11、其他因素：React從一開始就抱上了TypeScript的大腿，而Vue目前仍以ES為主，不得不說，在很長一段時間內，TS都是優於ES的，而Vue社區要切換TS生態，還有一段路要走。這註定了大公司、大項目選React+TS的概率要大一些。中小公司多少也會受到大公司的影響。
總結：
1、如果只是做項目，兩者都很好，都是主流，都能極大的增強前端開發能力，選任何一個都沒有錯（做選擇時，可考慮其他一些因素，比如自身能力、第三方組件）。
2、如果想抱大腿、跳槽大公司，建議選React + TypeScript練手。
3、5年以後的長遠考慮？這兩個的生命力，足以支撐5年，但你要說5年之後，它們是否還是主流，這個真不好說。現在前端技術發展太快。
4、作為一個專業前端，建議前期學Vue，後期再學React；反之，如果之前直接學的React，則一般不需要再去學Vue了，做項目，選一個就行了。
希望看完我的觀點後，能對你有些幫助！
D. vuejs 返回json數據怎麼循環渲染到頁面
Vue中computed就是實時計算使用。Vue檢測到數據發生變動時就會執行對相應數據有引用的函數。
下面是一個demo。引用自己的vue.js就可以看效果。利用computed可以做一些監控之類的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
<title>title</title>
<link href="" rel="stylesheet">
<script src="js/vue.js"></script>
</head>
<body>
E. 為什麼瀏覽器不將類似react.js的虛擬DOM在其內部實現
React 起源於 Facebook 的內部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設 Instagram 的網站。做出來以後，發現這套東西很好用，就在2013年5月開源了。由於 React 的設計思想極其獨特，屬於革命性創新，性能出眾，代碼邏輯卻非常簡單。所以，越來越多的人開始關注和使用，認為它可能是將來 Web 開發的主流工具。 前幾天寫的那個拖拽，自己留下的疑問。。。這次在熱心博友的提示下又修正了一些小小的bug，也加了拖拽的邊緣檢測部分。。。就再聊聊拖拽吧 一、不要直接操作dom元素 react中使用了虛擬dom的概念，目地就是要盡量避免直接操作dom元素，所以我們在對dom元素進行操作的時候需要注意，我之前為了獲取form的參數就直接用了var dragBox=document.getElementById('form')去找dom，但是其實記錄from的初始位置，可以在其子組件更新父組件參數的時候調用。即在MyFrom組件中獲取，如下代碼： onChildChanged:function(newState){ /*以下為修改處*/ var computedStyle=document.defaultView.getComputedStyle(ReactDOM.findDOMNode(this.refs.dragBox),null); newState.left=computedStyle.left; newState.top=computedStyle.top; /*以上為修改處*/ this.setState(newState); }, 這樣就可以直接在父組件中操作自己，而不是在子組件中調用。 二、onmousemove和onmouseup事件應該綁定到document上 拖拽事件中，當滑鼠在DragArea中按下後，就應該檢測滑鼠在document中移動的距離及何時彈起。否則直接綁定在form的話會有一個不雅的地方，就是拖動條拖動邊緣附近的時候,如果滑鼠速度快一點會失效,滑鼠再回來拖動條會自動吸上滑鼠。因此利用react初始化階段的componentDidMount函數，這個函數是組件被裝載後才會被調用，也就是說調用這個方法的時候，組件已經被渲染到了頁面上，這個時候可以修改DOM。也就是說此時把相應事件再綁定到document上面，如下代碼： componentDidMount:function(){ document.addEventListener('mousemove',(e)=>{this.move(e);},false);/*ES6新特性，箭頭函數，需要依賴jsx編譯工具才能正確運行*/ document.addEventListener('mouseup',(e)=>{this.endDrag(e);},false); }, 這樣就可以消除那個小小的bug啦！ 三、增加邊緣檢測 一般情況下的拖拽，我們都是不希望能夠拖出可視窗口之外的，因此這就需要檢測。檢測四個方向上的位置，即上、下、左、右。顯然，上的距離top和左邊left的距離必須要大於等於0，下邊和右的距離必須要小於視口大小減去from本身的元素寬高。 具體代碼： move:function(event){ var e = event ? event : window.event; var dBox=ReactDOM.findDOMNode(this.refs.dragBox); if (this.state.flag) { var nowX = e.clientX, nowY = e.clientY; var disX = nowX - this.state.currentX, disY = nowY - this.state.currentY; /*增加拖拽范圍檢測*/ var currentLeft=parseInt(this.state.left) + disX; var currentTop=parseInt(this.state.top) + disY; var docX=document.documentElement.clientWidthdocument.body.clientWidth; var docY=document.documentElement.clientHeightdocument.body.clientHeight; if(currentLeft<=250){//檢測屏幕左邊，因為我這里的初始居中是利用了負1/2的盒子寬度的margin，所以用250px判斷邊界 dBox.style.left=250+"px"; }else if(currentLeft>=(docX-dBox.offsetWidth+250)){ //檢測右邊 dBox.style.left=(docX-this.state.offsetX)+"px"; }else{ dBox.style.left =currentLeft+ "px"; } if(currentTop<=200){ //檢測屏幕上邊，因為我這里的初始居中是利用了負1/2的盒子高度的margin，所以用200px判斷邊界 <br> dBox.style.top=200+"px"; <br> }else if(currentTop>=(docY-dBox.offsetHeight+200)){ //檢測下邊<br> dBox.style.top=(docY-this.state.offsetY)+"px";<br> }else{<br> dBox.style.top = currentTop + "px"; <br> }<br> } PS：新的代碼已經更新在我的github上面，大家可以研究一下。 ReactJS的背景和原理 在Web開發中，我們總需要將變化的數據實時反應到UI上，這時就需要對DOM進行操作。而復雜或頻繁的DOM操作通常是性能瓶頸產生的原因（如何進行高性能的復雜DOM操作通常是衡量一個前端開發人員技能的重要指標）。React為此引入了虛擬DOM（Virtual DOM）的機制：在瀏覽器端用Javascript實現了一套DOM API。基於React進行開發時所有的DOM構造都是通過虛擬DOM進行，每當數據變化時，React都會重新構建整個DOM樹，然後React將當前整個DOM樹和上一次的DOM樹進行對比，得到DOM結構的區別，然後僅僅將需要變化的部分進行實際的瀏覽器DOM更新。而且React能夠批處理虛擬DOM的刷新，在一個事件循環（Event Loop）內的兩次數據變化會被合並，例如你連續的先將節點內容從A變成B，然後又從B變成A，React會認為UI不發生任何變化，而如果通過手動控制，這種邏輯通常是極其復雜的。盡管每一次都需要構造完整的虛擬DOM樹，但是因為虛擬DOM是內存數據，性能是極高的，而對實際DOM進行操作的僅僅是Diff部分，因而能達到提高性能的目的。這樣，在保證性能的同時，開發者將不再需要關注某個數據的變化如何更新到一個或多個具體的DOM元素，而只需要關心在任意一個數據狀態下，整個界面是如何Render的。 如果你像在90年代那樣寫過伺服器端Render的純Web頁面那麼應該知道，伺服器端所要做的就是根據數據Render出HTML送到瀏覽器端。如果這時因為用戶的一個點擊需要改變某個狀態文字，那麼也是通過刷新整個頁面來完成的。伺服器端並不需要知道是哪一小段HTML發生了變化，而只需要根據數據刷新整個頁面。換句話說，任何UI的變化都是通過整體刷新來完成的。而React將這種開發模式以高性能的方式帶到了前端，每做一點界面的更新，你都可以認為刷新了整個頁面。至於如何進行局部更新以保證性能，則是React框架要完成的事情。 借用Facebook介紹React的視頻中聊天應用的例子，當一條新的消息過來時，傳統開發的思路如上圖，你的開發過程需要知道哪條數據過來了，如何將新的DOM結點添加到當前DOM樹上；而基於React的開發思路如下圖，你永遠只需要關心數據整體，兩次數據之間的UI如何變化，則完全交給框架去做。可以看到，使用React大大降低了邏輯復雜性，意味著開發難度降低，可能產生Bug的機會也更少。
F. 原來Babel 能直接編譯 JSX.官方用的是哪個
習慣了WebStorm的話..我就假設題主會用Node.js和npm啦～一句話總結：用WebStorm自帶的FileWatcher功能+Babel實現自動轉換ECMAScript6代碼為ES5代碼我是這么配置的..就先新建一個EmptyProject，然後在src目錄下新建了一個main.js；//這一步不是必須的只是剛上手的話從空項目開始自己配置會少很多干擾Then..進入設置，把JavaScriptlanguageversion改成ECMAScript6；再Then..寫一段ES6代碼'usestrict';//node直接運行ES6代碼時，如使用了ES6的一些關鍵字，比如let，就需要嚴格模式，否則會報錯//這是沒有嚴格模式時候的錯誤提示//SyntaxError:Block-scopeddeclarations(let,const,function,class)*fibs(){//GeneratorFunctionleta=0;letb=1;while(true){yielda;//[a,b]=[b,a+b];b=a+b;a=b-a;}}let[first,second,third,fourth,fifth,sixth]=fibs();console.log(first,second,third,fourth,fifth,sixth);現在IDE會出現一個Filewatcher提示條先別點Addwatcher！我們要先去裝babel～首先在根目錄新建一個package.json{"name":"test-project","version":"1.0.0"}然後打開IDE的Terminal，安裝babel-clinpminstall--save-devbabel-cliGood!現在可以去點Addwatcher啦，點完之後會彈出一個框，其中大部分設置IDE都幫你搞定了下面第三行，Program那一項，填$ProjectFileDir$/node_moles/.bin/babel然後點OK，這個時候你就會發現左邊多出來一個main-compiled.js文件啦但是還沒搞定！現在只是搞定了自動轉換的功能，系統默認把ES6compile成了ES6..（你應該會發現compile出來的東西跟原來的一樣..Generator函數並沒有被轉換成ES5的格式）所以我們需要安裝Babel的preset以正確識別ES6代碼；和剛才一樣，在npm安裝babel的ES6的presetnpminstall--save-devbabel-preset-es2015在根目錄下新建一個.babelrc文件（就是babel在當前項目的配置文件），寫上{"presets":["es2015"]}OK搞定！保存再回去看一下main-compiled.js應該就變成這個樣子啦，現在你在main.js里直接寫ES6代碼，IDE都會自動compile成ES5的代碼在這里啦～注意：想直接用Node.js運行ES6代碼還是有些問題..因為這段代碼用的ES6的解構賦值Node.js還未完全支持，需要在運行的時候加入一些tags（以開啟Node.js的相關試驗特性），具體可以參考Node.js官網對ES6的說明：ECMAScript2015(ES6)。
G. Adobe bridge cc 2022 安裝成功 但是有一個錯誤 bridge-12.jsx 腳
摘要
H. 在react jsx中，為什麼使用箭頭函數和bind容易出現問題
在創作上，《三國演義》繼承了傳統史學的實錄精神，「七實三虛」可以說是該書取材的基本原則，小說中雖有不少虛構成分，但大的歷史事件皆取之於史冊，主要人物的性格、經歷也基本符合史實。
I. 請問怎麼學習react.js
一、JSX介紹
①定義
JSX=JavaScript XML，是一種在React組件內部構建標簽的類XML語法。React在不使用JSX的情況下一樣可以工作，但是使用JSX可以提高組件的可讀性，增強JS語義，結構清晰，抽象程度高，代碼模塊化。因此推薦在React中使用JSX。
②特點
1、元素名首字母大寫
2、符合嵌套規則
3、可以寫入求值表達式
4、駝峰式命名
5、不能使用javascript原生函數的一些關鍵詞，如for和class。需要替換成htmlFor和className
③使用方法
1、使用動態值：JSX將兩個花括弧之間的內容{...}渲染為動態值，花括弧指明了一個javascript上下文環境,花括弧裡面可以是一個變數，也可以是函數。 例如：
var name=「winty」;
<p>{name}</p>
function date(d){
return [
d.getFullYear(),
d.getMonth()+1,
d.getDate()
].join('-);
};
<p>{date(new Date()}</p>
2.注釋：首先，在子節點中注釋要用大括弧包裹起來，然後就可以單行注釋/**/，也可以多行注釋//。
var Hello=React.createClass({
render:function(){
return <p name="winty"> //set name
Hello ,World
/*
多行注釋
多行注釋
*/
</p>
}
});
3.使用CSS內聯樣式
var style={
color:#000;
};
React.render(<div style={style}>....</div>,document.body);
4.使用條件判斷
//方法1，三目運算符
var Hello=React.createClass({
render:function(){
return <p>Hello,{this.props.name?this.props.name : "LuckyWinty"}</p>
}
});
//方法2，if-else語句
var Hello1=React.createClass({
getName:function(){
if(this.props.name)
return this.props.name;
else
return "LuckyWinty";
render:function(){
return <p>Hello,{this.getName}</p>
}
});
//方法3，使用邏輯||運算符
var Hello3=React.createClass({
render:function(){
return <p>Hello,{this.props.name||"LuckyWinty"}</p>
}
});
④非DOM屬性介紹
JSX中有3個非DOM屬性，分別是：dangerouslySetInnerHTML、ref、key。
dangerouslySetInnerHTML：在JSX中直接插入HTML代碼，但是如果能避免使用這個屬性則盡量避免使用。
不合時宜的使用 innerHTML 可能會導致 cross-site scripting (XSS) 攻擊。 凈化用戶的輸入來顯示的時候，經常會出現錯誤，不合適的凈化也是導致網頁攻擊 的原因之一。
在徹底的理解安全問題後果並正確地凈化數據之後，生成只包含唯一 key __html 的對象，並且對象的值是凈化後的數據。例如：
function createMarkup() {
return {__html: 'First · Second'};
};
<div dangerouslySetInnerHTML={createMarkup()} />
ref：父組件引用子組件，你可以通過在屬性中設置期望的引用名來定義一個引用。例如：
...
render:function(){
return <div>
<input ref="MyInput" .../>
</div>
}
...
//然後你就可以在組件中的任何地方使用this.refs.myInput獲取這個引用了
key：是一個可選的唯一標識符，通過給組件設置一個獨一無二的鍵，並確保它在一個渲染周期中保持一致，使得React能夠更只能地決定應該重用一個組件還是銷毀並重建一個組件，進而提高渲染性能。例如：
var Hello3=React.createClass({
render:function(){
return <ul>
<li key="1">1</li>
<li key="2">2</li>
<li key="3">3</li>
</ul>
}
});
二、React組件生命周期詳解
組件本質上就是狀態機，輸入確定，輸出一定確定。狀態和結果一一對應，從而使程序變得直觀。狀態發生轉換時會觸發不同的鉤子函數，從而讓開發者有機會做出響應。可以用事件的思路來理解狀態,但是事件與事件之間互相獨立，但是不同狀態之間可能會互相影響。
組件的所有狀態結合起來就成了組件的生命周期。即：初始化階段->運行中階段->銷毀階段。
不同生命周期內可以自定義的函數
初始化階段：
①getDefaultProps:獲取默認屬性，只調用一次，是在createClass之後調用的。實例之間共享引用
②getInitialState:初始化每個實例的特有初始化狀態
③componentWillMount:mout就是裝載的意思，這個方法的意思就是說組件即將被裝載到頁面中，也是render之前最後一次修改狀態的機會
④render:組件在render函數生成虛擬節點，最後由react將虛擬節點變成真正的節點渲染到頁面上。只能訪問this.props和this.state，只有一個頂層組件，最好不要修改狀態和DOM輸出。
⑤componentDidMount:組件被裝載後才會被調用，也就是說調用這個方法的時候，組件已經被渲染到了頁面上，這個時候可以修改DOM
這五個函數的執行順序就是從上到下的。需要注意的是getDefaultProps只會在組件的第一個實例被初始化的時候被調用，也就是說第二個實例之後都是從getInitialState開始調用。同一個組件的所有實例的默認屬性都是一樣的。
主要測試代碼：<script type="text/babel">
var Hello=React.createClass({
getDefaultProps:function(){
console.log("getDefaultProps, 1");
},
getInitialState:function(){
console.log("getInitialState, 2");
return null;
},
componentWillMount:function(){
console.log("componentWillMount, 3");
},
render:function(){
console.log("render, 4");
return <p>Hi,LuckyWinty!</p>
},
componentDidMount:function(){
console.log("componentDidMount, 5");
},
});
React.render(<Hello></Hello>,document.body);
</script>
①componentWillReceiveProps:這個函數在組件即將接收到屬性時觸發的，或者是父組件的屬性發生變化時，屬性在傳送到組件之前，開發者有機會通過這個函數去處理屬性。比如修改，更新內部狀態等。
②shouldComponentUpdate：當組件接收到新屬性或者新狀態的時候觸發的。這個是一個疑問函數，也就是說我們可以告訴react不去更新某個組件。因為有時候屬性或者狀態並不會導致組件發生更新。在組件不需要更新的情況下，手動使shouldComponentUpdate返回false，這樣react就不需要再經過render和diff演算法去判斷是否要更新，從而提高性能。
③componentWillUpdate：render觸發之前觸發，更新組件，不能修改屬性和狀態
④render：組件在render函數生成虛擬節點，最後由react將虛擬節點變成真正的節點渲染到頁面上，只能訪問this.props和this.state，只有一個頂層組件，最好不要修改狀態和DOM輸出。
⑤componentDidUpdate：render之後，真正的DOM被渲染之後調用
J. 如何評價 React Native
React native充分利用了Facebook的現有輪子，是一個很優秀的集成作品，並且我相信這個團隊對前端的了解很深刻，否則不可能讓Native code「退居二線」。
對應到前端開發，整個系統結構是這樣：
JSX vs HTML
CSS-layout vs css
ECMAScript 6 vs ECMAScript 5
React native View vs DOM
無需編譯，我在第一次編譯了ipa裝好以後，就再也沒更新過app，只要更新雲端的js代碼，reload一下，整個界面就全變了。
多數布局代碼都是JSX，所有Native組件都是標簽化的，這對於前端程序員來說，降低了不少學習成本，也大大減少了代碼量。不信你可以看看JSX編譯後的代碼。
復用React系統，也減少了一定學習和開發成本，更重要的是利用了React裡面的分層和diff機制。js層傳給Native層的是一個diff後的json，然後由Native將這個數據映射成真正的布局視圖。
css-layout也是點睛之筆，前端可以繼續用熟悉的類css方式來編寫布局，通過這個工具轉換成constrain布局。
系
統只有js-objc的單向調用，就是把原生UI組件的方法通過javascritcore或者webview（低版本iOS）映射到js中來，整個調用
過程是非同步的，這樣的設計令React native可以讓js運行在桌面chrome中，通過websocket連接Native
code和桌面chrome，極大地方便了調試。對其中的機制Bang的一篇文章寫得很詳細，我就不拾人牙慧了：React Native通信機制詳解 « bang』s blog 。但這樣設計也會帶來一些問題，後面說。
點按操作也被抽象成了一組組件（TouchableXXX），這種抽象方式是我在之前做類似工作中沒有想到的。facebook還列出Native為什麼和web「手感」不同的原因：實時的點按反饋和取消能力。React Native 這套相應機制設計得很完善，能像Native code那樣控制整個點按操作的所有過程。
Debug
相當方便！修改了js以後，通過內建的nodejs
watcher編譯成bundle，在模擬器裡面按cmd+r就可以看到效果。而且按cmd+d，可以打開一個chrome窗口，所有的js都移到了
chrome裡面運行，所以什麼斷點單步打調用棧，都不在話下。
上面的既是特點也是優點，下面說說缺點，或者應該說：「仍然遺留的問題」，在我看來，這個方案已經超越了Hybird方案。
系
統仍然（不得不）依賴原生組件暴露出來的組件和方法。舉兩個例子，ScrollView這個組件，在Native層是有大量事件
的，scrollViewWillBeginDragging，
scrollViewWillEndDragging，scrollViewDidEndDragging等等，這些事件在現有的版本都沒有暴露，基本上
做不了組件聯動效果。另外，這個版本中有大量組件是iOS
only的：ActivityIndicatorIOS、DatePickerIOS、NavigatorIOS、PickerIOS、
SliderIOS、SwitchIOS、TabBarIOS、AlertIOS、AppStateIOS、LinkingIOS、
PushNotificationIOS、StatusBarIOS、VibrationIOS，反過來看，剩餘的都是一些抽象程度極強的基本組件。這
樣，用戶必須在不同的平台下寫兩套代碼，而且所有能力仍然強烈依賴 React native 開發人員暴露的介面。
由於最外層是
React，初次學習成本高，不像往常的Hybird方案，只要多學幾個JS
API就可以開始幹活了。當然，React的確讓後續開發變得簡單了一些，這么一套外來的（基於iOS）、殘缺不全的（css-layout）在
React的包裝下，的確顯得不那麼面目可憎了。
另外，React Native仍然很不完善。文檔還不全，我基本上是看著他的示例代碼完成的demo，集成到已有app的文檔也是今天才出來。按照官方的說法，Android版本要到半年後才發布：Blog | React ，屆時整個系統設計可能還會有很大的變化。