注:React-Native框架，下面簡稱RN
大家好，我今天和大家分享的主題叫《零JS基礎如何玩轉RN》，先簡單自我介紹一下，我叫周鴻杰，從事游戲研發多年，在游戲開發方面還略有心得，但是在APP領域，我就是小白一個了，我們在網絡上調研了不少資料，最終決定使用react-native來開發APP。
那么為什么選擇RN呢？首先簡單介紹一下我們公司，我們公司叫上海愛撲網絡，我們從08年開始研發網頁游戲，11年開始研發手機游戲，去年11月份的時候我們準備要開發APP了，正如前面所說，我們是做游戲開發的，在ios和android的原生開發方面我們是零經驗的，所以選擇使用原生語言開發，對我們來說學習成本比較高，而且不跨平臺的話，研發成本也比較高，那么除了使用原生語言開發，剩下的就是html5和RN了，html5的流暢度雖然說還算不錯，但是RN和它比起來，還是略勝一籌，RN是調用原生的控件進行渲染，并且可以和原生語言通信，所以在性能方面我們不用擔心，復雜的控件我們可以使用原生語言實現。大家都知道RN是使用js腳本來開發的，所以熱更新它肯定是支持的，熱更新這一點是比較重要的，做過ios開發的童鞋肯定都知道要通過蘋果商店的審核是多么繁瑣的事情。然后RN社區比較活躍，今天來了這么多人就能看出來了，所以對于我們團隊來說，選擇rn框架是有百利而無一害的。
好了，既然選擇了RN框架，那么我們需要了解哪些知識點呢？android平臺開發，我們需要會java，iOS開發，我們需要會OC，RN是使用javaScript語言的，所以我們要學會js，RN框架本身我們也要熟悉，然后還有Redux，Flexbox布局，還有個ES6標準，剛開始學的時候發現要學這么多東西啊，我的內心是這樣的:偶好怕怕??！
但是不要怕，剛學習一樣新東西，我們在戰略上要藐視它，在戰術上要先從全局的角度去俯視它。這里是一張非常簡單的結構圖，最下層的就是兩個手機系統，然后是RN框架，然后是一些第三方庫，最上面的是業務邏輯的js腳本，這么一看，是不是簡單了許多？沒有java，沒有oc，我們一開始要了解的就是RN本身和js腳本。
那么我們從RN框架開始說起，這是一個空的RN目錄結構，里面有android文件夾，就是和android系統相關的java代碼，ios文件夾就是ios系統相關的oc代碼，這兩個文件夾對于初學者來說都可以忽略，模塊文件夾，里面放的是rn框架和第三方框架，這三個.開頭的文件我們也不用理會它們，然后是index.android.js和index.ios.js，這兩個文件一看文件名就知道是android系統和ios系統的rn入口了。最后一個是package.json，這個文件比較重要，大家要了解一下，package.json是一個描述文件，記錄了npm包的依賴，啥是npm？node package manager，包管理器，我們通過npm命令可以安裝我們需要的包，安裝命令：npm install name，npm install name –save，這個—save是啥呢？前面我們說了package.json是一個描述項目包依賴的文件，我們安裝了一個第三方包了就說明我們項目需要依賴這個包，那通過參數—sace就可以自動地將這個包信息寫入到package.json，方便團隊里其他人去安裝這個包。
接下去我們就需要掌握js腳本了。Js腳本是一門很混論啊的語言，為啥這樣講呢？js號稱是面向對象的，但是它的面向對象寫法有5種！大家再去試試執行以下整形的1和字符串的1是否相等的邏輯，它會返回true，所以我們在做值判斷的時候要使用三個等號。js的浮點語言也是有問題的，比如0.3減去0.2，得到的值并不是0.1，取小數點面前N位的時候它返回的是字符串類型，最坑爹的是數字數組排序的時候，它并不是按照數字大小排的。。。
以上種種的問題，在我寫js的時候都讓我覺得js在逗我。為啥js這么坑爹呢？這得從95年說起，當時有家叫網景的公司希望能夠讓網頁上的元素動起來，于是派了他們公司的一個哥們去研究一下，這哥們花了十天的時間搞出一個叫LiveScript的腳本語言，當時java是非常熱門的語言，為了借勢推廣這個腳本啊，它又改名叫javascript了，所以大家問javascript和java有什么關系？答案是就像雷峰塔和雷鋒的關系一樣。到了97年，第一代es標準確定了，什么是es標準？就是幾個大公司一起制定的一套準則，規定一些語法層面的東西。99年es發展到了第三代，09年es發展到了第五代，現在大部分人使用的就是es5標準，直到15年，es6的出現讓js越來越像java了，至少在類的寫法上和java很像了。Es6的出現讓我們這些剛接觸js的人如同看到了閃著金光的佛祖一般。
es6是我們一定要掌握的，它會讓我們更舒服地寫出更漂亮的js。
列出我覺得比較贊的幾個es6的特性：
默認參數：以前的方法是沒有默認參數，要實現默認參數啊就只能是判斷一下參數是否為空，如果為空那么就賦個默認值給它。而在es6里我們可以直接在參數后面進行賦值了。
模板對象：這個就像是字符串的格式化，以前要拼接一個字符串，要費老大的勁，通過+號將各個字符串拼起來，現在就很輕松了，通過反引號，里面再加上${}，{}中輸入參數名就行了。這個很好記，就是大家都喜歡的$加上大括號就行了。
解構賦值：這個特性讓我們在訪問Object中的值的時候非常方便。像以前我們要一個個取出來，而現在只要一行代碼就搞定了。
箭頭函數：js里最讓人頭疼的是啥？就是this，在一個類中的不同地方，比如閉包函數中，this的指向并不都是這個類的實例，現在我們有了箭頭函數了，就方便許多，箭頭函數里的this還是原來的this。
Promises：這是異步調用的寫法。Js本身是單線程的語言，它要實現異步都是通過回調函數來實現的，如果這個回調函數多了，就會形成回調地獄，讓維護者陷入一個無底洞，很難爬出來，而es6的Promises優雅地解決了這個問題。關于異步的話題其實很大，推薦大家去看看 天地之靈 在廣州的一次關于異步的分享會的視頻，收益肯定匪淺。
Let和const：完全替代var關鍵詞。Var不支持作用域，而let支持，const是定義支持作用域的常量。
Class：類的寫法終于統一了，至少在class的實現上，javascript越來越像java了。
Modules：一個js就是一個模塊，模塊里可以定義無數個變量和方法，使用關鍵詞export使得模塊內部的變量和方法可以被外部訪問到。關鍵詞import導入模塊內的變量和方法，兩種寫法：
Import {funName} from './moduleName';
Import * as moduleName from './moduleName';
以上是幾個比較重要的特性，掌握了這些特性會讓我們的代碼看上去更加優雅簡潔。
做為RN開發者，RN組件的生命周期是我們必須要掌握的，這張圖是我從網上找到的，很清晰地介紹了整個生命周期。
? componentWillMount() 第一次render之前執行
? componentDidMount() 第一次render之后執行
? componentWillUpdate(object nextProps, object nextState) 第N(N > 1)次render之前執行
? componentDidUpdate(object prevProps, object prevState) 第N(N > 1)次render之前執行
? componentWillUnmount() 從界面上移除時執行
這就是整個生命周期中自動執行的一個方法，我們可以重寫這些方法達到我們想要的效果。其中shouldComponentUpdate可以很方便地控制是否執行render，可以有效地提升執行效率。
那我們如何調試我們的代碼呢？android上我們可以使用android模擬器來運行RN項目，將adb連上模擬器，這樣在android studio上就能看到java層面的log，如果只是想看到js的log的話，也可以打開rn的debug模式連上chrom瀏覽器，這樣在chrom瀏覽器的輸入臺就能看到log。Ios上通過xcode就很方便地看到各種log了。
那我們怎么學習或者提高自己的水平呢？我推薦大家去多看一些開源項目，三人行必有我師，別人的代碼多看看，肯定能讓自己有所收獲的。那么問題來了，去哪里找到開源的項目呢？第一個想到的肯定就是github了，全球最大的同性交友社區，在github的搜索欄中輸入react-native，然后按下回車，會出現很多和rn相關的項目，有完整的項目代碼也有很多第三方組件，按照star數量排個序，基本上star過50的，都是挺靠譜的項目，都要仔細去閱讀它。然后還有一個網站：js.coach，上面有不少的好組件，可以省去我們造輪子的時間。
我的分享就到此了，謝謝大家。
