談?wù)剰?開始快速學(xué)習(xí)React Native(一)

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



JavaScript代碼里寫著 XML 格式的代碼稱為 JSX,下文會(huì)介紹。為了把 JSX 轉(zhuǎn)成標(biāo)準(zhǔn)的 JavaScript,我們用<script? type="text/babel">標(biāo)簽,然后通過Babel轉(zhuǎn)換成在瀏覽器中真正執(zhí)行的內(nèi)容

注意:ReactDOM.render 是 React 的最基本方法,用于將模板轉(zhuǎn)為 HTML 語言,并插入指定的 DOM 節(jié)點(diǎn)。

SX 和 HTML

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á)式

屬性表達(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;?

最后編輯于
?著作權(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)容

  • React Native是基于React的,在開發(fā)React Native過程中少不了的需要用到React方面的知...
    亓凡閱讀 1,578評(píng)論 1 4
  • 原教程內(nèi)容詳見精益 React 學(xué)習(xí)指南,這只是我在學(xué)習(xí)過程中的一些閱讀筆記,個(gè)人覺得該教程講解深入淺出,比目前大...
    leonaxiong閱讀 2,944評(píng)論 1 18
  • 數(shù)月前,F(xiàn)acebook 對(duì)外宣布了正在開發(fā)的 React Native 框架,這個(gè)框架允許你使用 JavaScr...
    木易林1閱讀 1,306評(píng)論 0 1
  • 3.愛麗絲琴行 佳楠大學(xué)畢業(yè)后就直接到這家新開的琴行工作,也算是幫自己積攢一些人脈和經(jīng)驗(yàn)。 畢竟當(dāng)年天天拉著阿森上...
    王小帥Sep閱讀 425評(píng)論 1 2
  • 一個(gè)內(nèi)向沉靜的人,也許更需要一些反向的彌補(bǔ)。所以,我不喜歡輕柔舒緩的歌曲,而是更愛激烈震撼的搖滾樂。 在我看來,無...
    命自我立閱讀 354評(píng)論 8 13

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