React Native是基于React的,在開發(fā)React Native過程中少不了的需要用到React方面的知識(shí)。雖然官方也有相應(yīng)的Document,但篇幅比較多,學(xué)起來比較枯燥。
我可以說是從0開始學(xué)習(xí)React Native,之前學(xué)習(xí)的人少,自己也走了不少?gòu)澛罚院竽馨炎约旱囊恍┫敕ɑ蛘呤菍W(xué)習(xí)方法寫出來分享一下,讓后來學(xué)習(xí)的同行們少走一些彎路。(最好先學(xué)習(xí)一下reactjs)
自己理解的React(我們需要了解的東西)
1.React?
2.React的特點(diǎn)
3.JSX語法
4.組件(Component)
5.組件的屬性、狀態(tài)
一、什么是React?
React是一個(gè)用于組建用戶界面的JavaScript庫(kù),讓你更加簡(jiǎn)單的方式來創(chuàng)建交互式用戶界面。
個(gè)人認(rèn)為的優(yōu)點(diǎn)吧:
1.React就是由許多個(gè)組件來組合而成的。
2.數(shù)據(jù)改變的時(shí)候,React能高效的更新和渲染更新的組件。
3.聲明性視圖讓你的代碼容易調(diào)試,自己能預(yù)測(cè)出效果
4.封裝管理自己的狀態(tài)組件,將他們組成復(fù)雜的界面。
5.由于組件邏輯是用JavaScript編寫的,可以輕松地通過程序傳遞大量數(shù)據(jù),并保持DOM狀態(tài)。
6.一次學(xué)習(xí)隨時(shí)隨地可以編寫,學(xué)會(huì)了React,不僅可以輕松的開發(fā)web,也可以用于React Native來開發(fā)Android+ios應(yīng)用。
二、開始學(xué)習(xí)React
使用React之前需要在[React官網(wǎng)](https://facebook.github.io/react/downloads.html)下載這些庫(kù),也可以將其下載到本地去使用。
-react.js
-react-dom.js
-browser.min.js
上面一共列舉了三個(gè)庫(kù): react.js 、react-dom.js 和 browser.min.js ,它們必須首先加載。
react.js是React的核心庫(kù)
react-dom.js是提供與DOM相關(guān)的功能
browser.min.js的作用是將JSX語法轉(zhuǎn)為JavaScript語法
這一步很消耗時(shí)間,實(shí)際上線的時(shí)候,應(yīng)該將它放到服務(wù)器完成。
注意:我們實(shí)際在做React Native開發(fā)時(shí),這些庫(kù)作為React Native核心庫(kù)已經(jīng)被初始化在node_modules目錄下,所以不需要單獨(dú)下載。
使用React寫出我們非常熟悉的Hello World

注意:ReactDOM.render 是 React 的最基本方法,用于將模板轉(zhuǎn)為 HTML 語言,并插入指定的 DOM 節(jié)點(diǎn)。
JSX 是一個(gè)看起來很像 XML 的 JavaScript 語法擴(kuò)展。
每一個(gè)XML標(biāo)簽都會(huì)被JSX轉(zhuǎn)換工具轉(zhuǎn)換成純JavaScript代碼,使用JSX,組件的結(jié)構(gòu)和組件之間的關(guān)系看上去更加清晰。
JSX并不是React必須使用的,但React官方建議我們使用 JSX , 因?yàn)樗芏x簡(jiǎn)潔且我們熟知的包含屬性的樹狀結(jié)構(gòu)語法。

HTML標(biāo)簽 與 React組件 對(duì)比
React 可以渲染 HTML 標(biāo)簽 (strings) 或 React 組件 (classes)。
要渲染 HTML 標(biāo)簽,只需在 JSX 里使用小寫字母開頭的標(biāo)簽名。
//var myDivElement = <div className="foo">;
React.render(myDivElement, document.body);
要渲染 React 組件,只需創(chuàng)建一個(gè)大寫字母開頭的本地變量。
var MyComponent = React.createClass({/*...*/});
var myElement =<MyComponent someProperty={true} />;
React.render(myElement, document.body);?
注意:
- React 的 JSX 里約定分別使用首字母大、小寫來區(qū)分本地組件的類和 HTML 標(biāo)簽。
- 由于 JSX 就是 JavaScript,一些標(biāo)識(shí)符像 class 和 for 不建議作為 XML 屬性名。作為替代, React DOM 使用 className 和 htmlFor 來做對(duì)應(yīng)的屬性。
JavaScript 表達(dá)式
要使用 JavaScript 表達(dá)式作為屬性值,只需把這個(gè)表達(dá)式用一對(duì)大括號(hào) ({}) 包起來,不要用引號(hào) (“”)。
// 輸入 (JSX):
var person =<Person name={window.isLoggedIn?window.name:''} />;
// 輸出 (JS):
var person = React.createElement(
? ? ? Person,
? ? ? {name: window.isLoggedIn ? window.name : ''}
);
React中注釋
JSX 里添加注釋很容易;它們是 JS 表達(dá)式。需要在一個(gè)標(biāo)簽的子節(jié)點(diǎn)內(nèi)(非最外層)用 {} 包圍要注釋的部分。
{/*標(biāo)簽子節(jié)點(diǎn)的注釋*/}
注意:
在標(biāo)簽內(nèi)要使用{/*注釋的內(nèi)容*/}
在標(biāo)簽節(jié)點(diǎn)以外注釋,和通常的注釋是一樣的,多行用/*多行注釋的內(nèi)容*/單行用//單行注釋的內(nèi)容;
修改組件的屬性,會(huì)導(dǎo)致React不會(huì)對(duì)組件的屬性類型(propTypes)進(jìn)行的檢查。從而引發(fā)一些預(yù)料之外的問題。
兩種寫法都能實(shí)現(xiàn)
不推薦的:
var component = <Component />;
component.props.foo = x;
component.props.bar = y;?