博客地址：www.lixuzong.com
這篇文章主要講的的內(nèi)容是沒(méi)有JavaScript基礎(chǔ)的情況下開(kāi)發(fā)React Native應(yīng)用需要知道的基礎(chǔ)知識(shí)耸棒。也是我在學(xué)習(xí)React Native框架的一個(gè)學(xué)習(xí)曲線(xiàn)。以方便記錄下來(lái)方便查閱，一方面希望可以幫助到和我一樣的菜鳥(niǎo)減少學(xué)習(xí)時(shí)間。
基礎(chǔ)語(yǔ)法
var和let的區(qū)別
var聲明的變量是無(wú)視作用域的汉匙，而let是在作用域里有效的碉熄。
這里需要和swift中的var和let區(qū)分籽懦，var是是可以改變的值，而let是不可以改變的值漓滔，與作用域無(wú)關(guān)编饺。
匿名函數(shù)的寫(xiě)法
與swift語(yǔ)法一樣，函數(shù)也是對(duì)象類(lèi)型次和，也可作為函數(shù)的返回值來(lái)只用反肋，但是匿名函數(shù)的寫(xiě)法有所不同那伐。
function addFunc() {
return (valueA, valueB) => {
return valueA +valueB;
}
}
console.log(addFunc()(1.2)); //輸出3
==與===的區(qū)別
與其他語(yǔ)法不同點(diǎn)是==比較左右的值踏施，只要值相等，結(jié)果就是true罕邀。而===不僅比較值畅形，也比較類(lèi)型，只有兩者相等才返回true诉探。
‘!=’是值不相等日熬，‘！==’是值和類(lèi)型都不相等
類(lèi)與對(duì)象
this 關(guān)鍵字表示類(lèi)對(duì)象本身肾胯，如果在類(lèi)內(nèi)使用函數(shù)之類(lèi)通過(guò)this來(lái)調(diào)用
類(lèi)的構(gòu)造函數(shù)constructor(valueA,valueB)創(chuàng)建類(lèi)的使用調(diào)用
可以通過(guò)static和Class.obj兩種方式創(chuàng)建靜態(tài)變量
類(lèi)中定義的函數(shù)可以省略關(guān)鍵字function
通過(guò)this.obj來(lái)創(chuàng)建字段竖席，可以在類(lèi)的構(gòu)造函數(shù)里面創(chuàng)建也可以在函數(shù)外創(chuàng)建，如果是未創(chuàng)建的字段其值為undefined
字段的只讀和只寫(xiě)屬性通過(guò)get和set關(guān)鍵字來(lái)聲明敬肚，這里可以跟objective-C的方法類(lèi)比毕荐。
類(lèi)的繼承使用extend關(guān)鍵字，在子類(lèi)里調(diào)用super就可以調(diào)用父類(lèi)的函數(shù)艳馒。
-
對(duì)象使用new來(lái)生成憎亚，還有一種情況是直接生成匿名類(lèi)對(duì)象，用鍵值對(duì)的形式創(chuàng)建對(duì)象弄慰。
let obj = { name: 'obj', value: 'lalala', sayHello: function(name) { console.log('Hello, ' + name); }, sayHi: (name) => { console.log('Hi! ' + name); } };
文件的導(dǎo)入和導(dǎo)出
首先說(shuō)一下相對(duì)路徑第美，使用 . 就是在當(dāng)前路徑查找，如果是..就是從上層路徑查找陆爽，沒(méi)有 . 或者 / 開(kāi)頭的就是從項(xiàng)目根目錄開(kāi)始查找什往。
導(dǎo)出
導(dǎo)出的時(shí)候需要使用export關(guān)鍵字,可以到出變量、類(lèi)慌闭、函數(shù)恶守，可以定義默認(rèn)導(dǎo)出內(nèi)容，需要加上export default關(guān)鍵字
導(dǎo)入
導(dǎo)入文件使用關(guān)鍵字import,from格式是 import [something] from ‘相對(duì)路徑’ 贡必。如果是沒(méi)有使用默認(rèn)導(dǎo)出的情況下可以根據(jù)需要接收需要的屬性兔港，一般是全部接收，如果有默認(rèn)導(dǎo)出的話(huà)可以直接接收默認(rèn)導(dǎo)出仔拟，并且默認(rèn)導(dǎo)出是唯一的衫樊！
// data.js
export var value = 1;
export const name = 'lala';
export default age = 12;
// index.js
// 如果只需要 value 和 name
import {value, name} from './data.js';
console.log(value);
// 如果想將所有由 export 導(dǎo)出的都引入
import * as data from './data.js';
console.log(data.value);
// 默認(rèn)導(dǎo)入可以任意取名
import anyName from './data.js'
console.log(anyName);
組件的生命周期
在整個(gè)ReactJS的生命周期中，主要經(jīng)歷4個(gè)階段：創(chuàng)建階段、實(shí)例化階段科侈、更新階段和銷(xiāo)毀階段载佳。
創(chuàng)建階段
這個(gè)階段會(huì)調(diào)用getDefaultProps方法，并返回一個(gè)對(duì)象緩存下來(lái)臀栈，然后與父組件制定的props對(duì)象合并蔫慧，最后賦值給this.props作為默認(rèn)屬性。
props是一個(gè)對(duì)象权薯，是組件用來(lái)接收外面參數(shù)的姑躲，不支持在內(nèi)部修改自己的props屬性,只能通過(guò)父組件來(lái)賦值。getDefaultProps方法是用來(lái)設(shè)置默認(rèn)值得盟蚣。
實(shí)例化階段
該階段是在實(shí)例化組件類(lèi)的時(shí)候黍析，也就是該組件類(lèi)被調(diào)用的時(shí)候。
React.render (
<List name = "ReactJS"></List>
document.getElementById("container")
);
我們初始化了一個(gè)List組件屎开，這個(gè)時(shí)候看一下依次調(diào)用的生命周期方法阐枣。
- getInitialState 初始化組件的state值，其值會(huì)被賦值給this.state屬性奄抽。
- componentWillMount 組件即將被加載到視圖上的時(shí)候調(diào)用蔼两，根據(jù)業(yè)務(wù)對(duì)state進(jìn)行相應(yīng)的操作
- render 根據(jù)state的值，生成頁(yè)面需要的虛擬DOM結(jié)構(gòu)逞度，并返回該結(jié)構(gòu)额划。
- componentDidMount 對(duì)根據(jù)虛擬DOM結(jié)構(gòu)而生成的真是DOM進(jìn)行相應(yīng)的處理。為了保證不出現(xiàn)UI上的錯(cuò)誤第晰，在這個(gè)函數(shù)里面發(fā)起請(qǐng)求接收網(wǎng)絡(luò)數(shù)據(jù)锁孟。這個(gè)時(shí)候改變this.state屬性就會(huì)出發(fā)ReactJS內(nèi)部的監(jiān)聽(tīng)事件，再次調(diào)用getInitialState函數(shù)茁瘦，這樣的話(huà)再次刷新界面品抽。
更新階段
這主要發(fā)生在用戶(hù)操作之后或者父組件有更新的時(shí)候，此時(shí)會(huì)根據(jù)用戶(hù)的操作進(jìn)行相應(yīng)的調(diào)整甜熔。
- componentWillReceiveProps(object nextProps) 當(dāng)組件接收到新的props時(shí)圆恤，會(huì)觸發(fā)該函數(shù)。在該函數(shù)中通城幌。可以調(diào)用this.state完成對(duì)state的修改盆昙。
- shouldComponentUpdate(nextProps nextState) 該方法會(huì)攔截新的props和state，然后根據(jù)事先判定好的判斷邏輯焊虏，做出最后要不要更新組件的決定淡喜。
- componentWillUpdate(object nextProps, object nextState) 當(dāng)方法2返回的是true的時(shí)候這里就做一些更新前的操作。
- render 根據(jù)一系列的diff算法诵闭，生成需要更新的虛擬DOM數(shù)據(jù)炼团。最好在這里進(jìn)行數(shù)據(jù)和模板的整合澎嚣，不進(jìn)行state的操作。
- componentDidUpdate 該方法在組件更新已經(jīng)同步到DOM中后出發(fā)瘟芝，我們通常在該方法中做一些DOM操作易桃。
銷(xiāo)毀階段
componentWillUnmount 當(dāng)組件從DOM中移除的時(shí)候調(diào)用這個(gè)方法，通常會(huì)在這個(gè)方法中做一些取消事件綁定锌俱，銷(xiāo)毀定時(shí)器等工作晤郑。
就相當(dāng)于iOS中的dealloc函數(shù)。
參考文章鏈接
http://blog.csdn.net/yuanguozhengjust/article/details/50470171
https://lzxhahaha.gitbooks.io/react-native-getting-start/content/index.html
