日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問(wèn) 生活随笔！

生活随笔

當(dāng)前位置： 首頁(yè) >

iOS开发者React Native学习路线

發(fā)布時(shí)間：2025/3/20 23 豆豆
生活随笔 收集整理的這篇文章主要介紹了 iOS开发者React Native学习路线 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

?

http://blog.talisk.cn/blog/2016/08/13/RN-Learning-path-for-iOS-developer/

既然是寫給iOS開(kāi)發(fā)者的，那么我默認(rèn)你已經(jīng)掌握iOS原生應(yīng)用開(kāi)發(fā)的基本知識(shí)，所以對(duì)iOS原生開(kāi)發(fā)的相關(guān)內(nèi)容不做解釋說(shuō)明。

React Native概念介紹

名詞解釋

首先列舉幾個(gè)關(guān)鍵詞：

  • React
  • Native
  • React Native

這三個(gè)詞其實(shí)沒(méi)有太大關(guān)系，我們逐個(gè)來(lái)解釋：

  • React：近幾年Web前端領(lǐng)域非常火熱的一個(gè)開(kāi)發(fā)框架React.JS，其核心思想是將視圖組件化，通過(guò)更新組件的state來(lái)渲染出組件。
  • Native：這個(gè)詞從字面理解就夠了，就是指原生的。前幾年有個(gè)非常火熱的跨平臺(tái)開(kāi)發(fā)框架PhoneGap（現(xiàn)稱Cordova），那就不是原生的開(kāi)發(fā)方式。原生就要使用對(duì)應(yīng)平臺(tái)的特定語(yǔ)言和框架進(jìn)行開(kāi)發(fā)，比如使用Objective-C或Swift開(kāi)發(fā)的iOS應(yīng)用。
  • React Native：結(jié)合了這兩個(gè)詞，我們可以簡(jiǎn)單地得到結(jié)論：使用React框架進(jìn)行原生方式的開(kāi)發(fā)。

實(shí)現(xiàn)原理

我們都知道在iOS平臺(tái)上，蘋果提供了一個(gè)JavaScriptCore的framework，可以進(jìn)行JavaScript語(yǔ)言的解析，React Native通過(guò)多次封裝定義，最終實(shí)現(xiàn)了在JavaScript語(yǔ)言中調(diào)用Objective-C的類和方法。具體的原理我們現(xiàn)在還不必深究，后文的學(xué)習(xí)路線中會(huì)有提到。

所以既然是調(diào)用Objective-C的類和方法，性能上當(dāng)然是不差的（但也不完美），所以這也是React Native相比其他跨平臺(tái)開(kāi)發(fā)方式的一大優(yōu)勢(shì)。

評(píng)價(jià)

  • 跨平臺(tái)：目前React Native官方已經(jīng)支持iOS、Android兩個(gè)平臺(tái)的移動(dòng)設(shè)備，民間也有一些大牛在做macOS、tvOS，甚至UWP平臺(tái)的適配。但由于不同平臺(tái)特性不同，并不能一份代碼在所有平臺(tái)上直接運(yùn)行，React Native的思想是「Learn once, write anywhere」，我們需要針對(duì)不同平臺(tái)的特性寫出不同的代碼，盡量保持組件的高可復(fù)用性。
  • 性能：官方宣稱性能堪比Native，實(shí)際使用中我們會(huì)發(fā)現(xiàn)幾個(gè)問(wèn)題，比如復(fù)雜視圖渲染出View層級(jí)過(guò)多、ListView（等同于iOS上的UITableView）無(wú)重用機(jī)制、有些組件存在內(nèi)存泄露。這就會(huì)導(dǎo)致在部分低端Android機(jī)型上的性能過(guò)差，復(fù)雜的、大型的應(yīng)用會(huì)有明顯性能問(wèn)題。
  • 熱更新：由于App Store應(yīng)用商店發(fā)版迭代效率問(wèn)題，熱更新成為了iOS平臺(tái)非常渴求的功能，可喜的是React Native的熱更新能力非常好，通過(guò)將JavaScript代碼部署到服務(wù)器中，運(yùn)行過(guò)程中即可重新reload整個(gè)界面。
  • 學(xué)習(xí)成本：對(duì)于iOS開(kāi)發(fā)者來(lái)講，要了解相當(dāng)數(shù)量的Web前端開(kāi)發(fā)知識(shí)才可以進(jìn)行開(kāi)發(fā)，對(duì)于Web前端開(kāi)發(fā)者來(lái)講，對(duì)于原生性能調(diào)優(yōu)則需要原生開(kāi)發(fā)知識(shí)和經(jīng)驗(yàn)，所以說(shuō)學(xué)習(xí)成本略高。
  • 開(kāi)發(fā)效率：Android和iOS平臺(tái)可復(fù)用很多組件，僅部分代碼需要各自平臺(tái)分別維護(hù)，所以比開(kāi)發(fā)兩個(gè)平臺(tái)原生應(yīng)用效率要高得多。加上本身可動(dòng)態(tài)渲染的能力，不用重新編譯，Command?+R即可重新渲染界面，開(kāi)發(fā)效率更是驚人地快。

學(xué)習(xí)路線

按照順序進(jìn)行學(xué)習(xí)即可。

開(kāi)發(fā)環(huán)境配置

你的電腦若未安裝Homebrew、Node.js、WatchMan等工具，請(qǐng)參照：

  • 配置React Native的開(kāi)發(fā)環(huán)境 - CSDN

若已安裝Homebrew、Node.js、WatchMan，請(qǐng)直接：

  • 搭建開(kāi)發(fā)環(huán)境 - react native 中文網(wǎng)

對(duì)于IDE/Editor的選擇，目前可以有Sublime Text、VSCode、WebStorm、Atom+Nuclide、Deco選擇。我個(gè)人比較推薦的是VSCode和WebStorm。以下提供兩篇關(guān)于IDE的設(shè)置。

  • WebStorm -?WebStorm開(kāi)發(fā)工具設(shè)置React Native智能提示 - CSDN
  • VSCode -?VSCode IDE超強(qiáng)開(kāi)發(fā)插件介紹 - 江清清的技術(shù)專欄

JavaScript

首先是最基礎(chǔ)的JavaScript教程，快速過(guò)一遍即可。

  • JavaScript 高級(jí)教程 - W3School
  • 不再彷徨：完全弄懂JavaScript中的this（譯文總結(jié)） - Segmentfault

ES6

ES6也稱ES2015，是JavaScipt語(yǔ)言的較新的一種標(biāo)準(zhǔn)，在React Native開(kāi)發(fā)時(shí)，我們建議使用這種標(biāo)準(zhǔn)。

  • ECMAScript 2015 簡(jiǎn)易教程 - 顏海鏡
  • ECMAScript 6 入門 - 阮一峰
  • 關(guān)于Promise：你可能不知道的6件事 - dwqs/blog

語(yǔ)法規(guī)范

JavaScript本身變化很快，這份由Airbnb維護(hù)的語(yǔ)法規(guī)范是使用較為廣泛、全面的，很有參考性。

  • Airbnb React/JSX Style Guide

React Native

快速入門

  • 快速入門實(shí)例 - react native 中文網(wǎng)

由于會(huì)有一些開(kāi)源項(xiàng)目和開(kāi)源組件使用ES5標(biāo)準(zhǔn)進(jìn)行開(kāi)發(fā)，所以應(yīng)該看得懂ES5代碼。

  • React/React Native 的ES5 ES6寫法對(duì)照表 - react native 中文網(wǎng)

布局

  • 布局 FlexBox布局 - 簡(jiǎn)書

組件

  • React-Native從入門到深入–組件生命周期 - 簡(jiǎn)書
  • React Native 的 Navigator 組件使用方式 - Mystra
  • React-Native組件用法詳解之ListView - 簡(jiǎn)書
  • 更多組件學(xué)習(xí)請(qǐng)參考：React Native專題 - 江清清的技術(shù)專欄

React with Redux

  • Redux 簡(jiǎn)明教程 - GitHub
  • Redux 狀態(tài)管理方法與實(shí)例 - Segmentfault
  • 【譯】Redux和命令模式 - Jimmylv
  • Redux 中文文檔 - Redux
  • React + Redux 組件化方案 - IMWeb
  • React-Native with Redux - Lifecycle

熱更新

  • CodePush 熱更新流程（iOS） - talisk’s Wiki
  • React Native熱更新部署/熱更新-CodePush最新集成總結(jié) - 簡(jiǎn)書

原理

  • React Native 通信機(jī)制詳解 - bang’s blog

推薦資源

  • awesome-react-native - GitHub
  • React Native 中文網(wǎng)
  • 江清清的技術(shù)專欄

轉(zhuǎn)載于:https://my.oschina.net/kaqijiang/blog/805228

總結(jié)

以上是生活随笔為你收集整理的iOS开发者React Native学习路线的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。