整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
載鏈接：https://www.jianshu.com/p/11fe9401874c
此系列文章將整合我的 React 視頻教程與 React Native 書籍中的精華部分，給大家介紹 React 與 React Native 結(jié)合學(xué)習(xí)的方法。
我們?cè)陂_(kāi)始系列文章的技術(shù)點(diǎn)內(nèi)容前，花一點(diǎn)時(shí)間探討一下軟件開(kāi)發(fā)語(yǔ)言以及框架的學(xué)習(xí)本質(zhì)，相對(duì)于整個(gè)技術(shù)點(diǎn)的講解，花這一點(diǎn)一起思考的時(shí)間是值得的。
相信看此系列文章的朋友都已有了非常多的軟件開(kāi)發(fā)經(jīng)驗(yàn)，而當(dāng)我們回顧語(yǔ)言與框架的學(xué)習(xí)過(guò)程時(shí)，所有語(yǔ)言的基礎(chǔ)語(yǔ)法都大同小異，無(wú)非基礎(chǔ)數(shù)據(jù)類型、條件判斷、分支判斷、循環(huán)處理等等。而差別或者說(shuō)最重要的是在框架的底層本質(zhì)，也就是為什么會(huì)產(chǎn)生此框架、底層的優(yōu)勢(shì)是什么、為什么不用別的框架、框架的底層與設(shè)備之間是如何實(shí)現(xiàn)通信的等等。
截圖
我們?cè)陂_(kāi)發(fā)的過(guò)程中，遇到的一些基礎(chǔ)語(yǔ)法問(wèn)題、框架使用問(wèn)題，基本上只要靈活使用一下搜索引擎都能找到答案，有句話說(shuō)：你要相信你遇到的技術(shù)難題在這個(gè)世界上肯定有其他人也遇到了。
而當(dāng)我們需要抓住本質(zhì)，對(duì)語(yǔ)言與框架有更加深入地了解、進(jìn)行技術(shù)選型時(shí)、知道每一種技術(shù)的優(yōu)劣、當(dāng)框架的表現(xiàn)出現(xiàn)了一些詭異問(wèn)題時(shí)會(huì)迅速定位問(wèn)題、優(yōu)化項(xiàng)目的性能，以及成為某一領(lǐng)域的專家時(shí)，最高效的學(xué)習(xí)方法就是直接去接觸語(yǔ)言與框架的底層本質(zhì)。
如 JavaScript 中的深拷貝與淺拷貝，如果只是進(jìn)行數(shù)據(jù)類型的深拷貝與淺拷貝，即使你忘記了處理邏輯，你只要通過(guò)搜索引擎搜索就可以找到很多的實(shí)現(xiàn)方法，而如果你想一次掌握好此知識(shí)點(diǎn)，那么就需要你直接去學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu)以及數(shù)據(jù)類型對(duì)應(yīng)的值類型與引用類型的區(qū)別，只有在掌握此部分的知識(shí)點(diǎn)后，在遇到數(shù)據(jù)類型的「詭異」表現(xiàn)時(shí)你才能抓住問(wèn)題本質(zhì)。
再如你在使用 React Native 框架提供的各種組件與 API，如訪問(wèn)移動(dòng)設(shè)備的相冊(cè)與攝像頭、震動(dòng)、GPS 定位、網(wǎng)絡(luò)狀態(tài)、消息推送以及整個(gè) React Native 框架生態(tài)下提供的成千上萬(wàn)的第三方功能組件時(shí)，其實(shí)底層都是 React Native 框架與 iOS、Android 平臺(tái)通信的實(shí)現(xiàn)。在原理章節(jié)掌握了原理后，后續(xù)的章節(jié)我們還會(huì)一起自己動(dòng)手來(lái)實(shí)現(xiàn)一個(gè)與 iOS、Android 平臺(tái)通信的自定義組件。
學(xué)習(xí)、精通語(yǔ)言與框架最好的方法就是直接掌握其最本質(zhì)的部分。
React 框架最早孵化于 Facebook 內(nèi)部，作為內(nèi)部使用的框架，在 2011 年的時(shí)候 React 框架被用于 Facebook 的新聞流并于 2012 年使用在了 Instagram 項(xiàng)目上。在 2013 年五月美國(guó)的 JSConf 大會(huì)上，React 框架項(xiàng)目被宣布了開(kāi)源。
在移動(dòng)開(kāi)發(fā)方面，F(xiàn)acebook 曾致力于使用 HTML 5 進(jìn)行移動(dòng)端的開(kāi)發(fā)，最終發(fā)現(xiàn)與原生的 App 相比，體驗(yàn)上還是有非常大的差距，并且這種差距越來(lái)越大，特別是性能方面的差距。 最終，F(xiàn)acebook 放棄了 HTML 5 的技術(shù)方向，結(jié)合之前介紹的 React 框架的發(fā)展歷史，2015 年 3 月，F(xiàn)acebook 正式發(fā)布了 React Native 框架，此框架專注于移動(dòng)端 App 的開(kāi)發(fā)。
React 作為構(gòu)建高性能 Web 應(yīng)用的框架，React Native 作為構(gòu)建跨 iOS 與 Android 平臺(tái) App 應(yīng)用的框架，極其繁雜的開(kāi)發(fā)生態(tài)造成了很多朋友對(duì) React / React Native 框架產(chǎn)生了些許誤解，認(rèn)為框架太過(guò)龐雜混亂，造成了學(xué)習(xí)成本與開(kāi)發(fā)成本的增加。
此系列文章將帶領(lǐng)大家深入探究 React 與 React Native 框架的本質(zhì)，只有在掌握了框架本質(zhì)后，才能快速地領(lǐng)略到這兩個(gè)孿生框架的核心，不僅可以在這兩個(gè)框架間靈活切換學(xué)習(xí)，還可以不被繁雜的框架生態(tài)所蒙蔽，最終達(dá)到以不變應(yīng)萬(wàn)變的境界。
從上面的 React 與 React Native 簡(jiǎn)介即可看到，兩個(gè)框架算是孿生項(xiàng)目，而 React Native 的底層也就是 React 框架。
截圖
React 框架使用 JSX（JavaScript eXtension，可以理解為看起來(lái)像 HTML 的 JavaScript）指定 React 組件的輸出定義，而邏輯函數(shù)的部分依然是采用 JavaScript ES6 來(lái)編寫，所以對(duì)于前端開(kāi)發(fā)人員來(lái)說(shuō)上手非常地容易。
編寫的代碼通過(guò) React 框架渲染在 Web 瀏覽器中運(yùn)行，所以 React 可以用來(lái)開(kāi)發(fā) Web 項(xiàng)目，當(dāng)然借助第三方的組件還可以開(kāi)發(fā)桌面項(xiàng)目，這些我們?cè)诤罄m(xù)會(huì)進(jìn)行相關(guān)介紹。
React Native 依然由 JSX 進(jìn)行組件布局的開(kāi)發(fā)，框架中組件開(kāi)發(fā)的原理與思想與 React 框架一致，而且底層都由最重要的 state 進(jìn)行驅(qū)動(dòng)。
React 與 React Native 除了在編碼表現(xiàn)層都使用 JSX 語(yǔ)法外，在 React 與 React Native 的底層都有 Virtual DOM 與 DOM 之間的映射與轉(zhuǎn)換，以實(shí)現(xiàn)了頁(yè)面組件高效更新的前端表現(xiàn)。
截圖
用戶看到的表現(xiàn)層（Browser DOM）的更新，底層都是由 state 驅(qū)動(dòng)了 Virtual DOM 進(jìn)行變動(dòng)前與變動(dòng)后的比較，最終將需要重新渲染的 DOM 進(jìn)行渲染展示。
而這種通過(guò)只修改 state (Model) 值引起 HTML (DOM) 變化的框架設(shè)計(jì)模式就是我們熟悉的 MVVM (Model-View-ViewModel) 模式。
以前我們可以通過(guò)直接操作 HTML 元素的形式進(jìn)行頁(yè)面的更新，如下面的這段 jQuery 代碼。
$('#container').text('Updated Content...')
當(dāng)這樣的代碼在頁(yè)面更新非常復(fù)雜的項(xiàng)目中使用時(shí)，你會(huì)疲于通過(guò)操作 DOM 元素更新，映射后臺(tái)大量的數(shù)據(jù)更新。
截圖
而 MVVM 模式，如目前的前端框架 Vue、Angular 和我們介紹的 React 都是基于此設(shè)計(jì)模式，將頁(yè)面呈現(xiàn) View 與后臺(tái)的數(shù)據(jù)模型 Model 進(jìn)行了分離解耦，使得我們只需要專注于 Model 的處理，通過(guò)修改 Model 中的屬性值，引起前端 View 的變化，不過(guò) React 默認(rèn)的數(shù)據(jù)綁定方式是單向綁定，這一部分的差異我們后續(xù)章節(jié)會(huì)展開(kāi)討論。
對(duì)于 MVVM 模式的體驗(yàn)以及如何通過(guò)修改 Model 引起 View 的更新，大家可以查看下一小節(jié)，我會(huì)給大家具體的代碼演示。
而目前的移動(dòng)端開(kāi)發(fā)方面，「原生開(kāi)發(fā)」是指 iOS 平臺(tái)通過(guò) Objective-C 或 Swift 語(yǔ)言開(kāi)發(fā)并通過(guò) Xcode 編譯打包發(fā)布 iOS App，Android 平臺(tái)通過(guò) Java 語(yǔ)言開(kāi)發(fā)并通過(guò) Android Studio 編譯打包發(fā)布 Android App。
通過(guò)下圖我們可以看到「原生開(kāi)發(fā)」的學(xué)習(xí)成本以及后期 App 維護(hù)的成本，而 React Native 則是通過(guò) JavaScript 開(kāi)發(fā)，然后通過(guò)框架提供的與對(duì)應(yīng)平臺(tái)之間的 bridge 進(jìn)行通信，實(shí)現(xiàn)了只用一套代碼可以直接部署到 iOS 與 Android 平臺(tái)并編譯出對(duì)應(yīng)平臺(tái)的 App。
截圖
并且 React Native App 頁(yè)面布局直接通過(guò) HTML 和 CSS 的前端基礎(chǔ)技術(shù)進(jìn)行布局與開(kāi)發(fā)，大大降低了學(xué)習(xí)成本。
你如果早就在心里有開(kāi)發(fā)一個(gè)自己 App 的想法，而剛好你有前端開(kāi)發(fā)的技能，React Native 一定會(huì)是你孵化自己 App 最好的選擇。
本系列文章會(huì)從 React 的基本使用方法開(kāi)始，并會(huì)講解到 React 的底層原理，并從一些實(shí)際案例中探討出 React 底層對(duì)于前臺(tái)表現(xiàn)的原因。底層原理會(huì)結(jié)合獨(dú)立的算法以及 React 框架的源碼進(jìn)行詳細(xì)解釋。
之后會(huì)講解演示 React Native 的基本使用，同時(shí)會(huì)解釋 React Native 框架與 React 框架的關(guān)系、React Native 的性能問(wèn)題、以及 React Native 與 iOS、Android 平臺(tái)通信的原理，拋卻 React Native 紛雜的各種類庫(kù)，直達(dá) React Native 的底層原理，掌握了原理后才能看懂所有表象的類庫(kù)實(shí)現(xiàn)原理。并會(huì)動(dòng)手自己實(shí)現(xiàn) iOS 平臺(tái)與 Android 平臺(tái)的自定義組件，深入掌握各種第三方組件的實(shí)現(xiàn)原理。
「React.js 入門與實(shí)戰(zhàn)」視頻教程
《React Native 精解與實(shí)戰(zhàn)》書籍
更多免費(fèi)原創(chuàng)視頻教程
需要相關(guān)資料，關(guān)注我，私信我回復(fù)：React和React Native 學(xué)習(xí)資料
這一小節(jié)給大家描繪了整體安排以及學(xué)習(xí)的本質(zhì)，接下來(lái)我們會(huì)先從 React 底層原理開(kāi)始，掌握好這兩個(gè)框架最本質(zhì)的部分。
任何知識(shí)的學(xué)習(xí)過(guò)程都不會(huì)是「舒服」的過(guò)程，只有跳離自己的舒適區(qū)，才能有進(jìn)步，所以遇到任何疑問(wèn)或想交流的問(wèn)題，大家只需在文章下留言即可，我都會(huì)與大家交流。
著移動(dòng)應(yīng)用的需求越來(lái)越大，許多企業(yè)開(kāi)始將焦點(diǎn)轉(zhuǎn)移到移動(dòng)應(yīng)用的開(kāi)發(fā)上。通過(guò)引入新技術(shù)、新平臺(tái)和新框架，移動(dòng)應(yīng)用開(kāi)發(fā)者能夠創(chuàng)建劃時(shí)代的移動(dòng)應(yīng)用。
近年來(lái)，跨平臺(tái)應(yīng)用開(kāi)發(fā)非常流行，通過(guò)跨平臺(tái)的應(yīng)用開(kāi)發(fā)者編寫一份代碼就能同時(shí)為 Android、iOS、Windows 等多個(gè)平臺(tái)同時(shí)開(kāi)發(fā)應(yīng)用程序。
在眾多的開(kāi)發(fā)利器中，React Native 是著名的跨平臺(tái)移動(dòng)應(yīng)用開(kāi)發(fā)工具之一，它是由 Facebook 開(kāi)發(fā)的，且是目前的最為活躍的開(kāi)發(fā)者社區(qū)之一。
不過(guò) Google 在 2017 年的 Google I/O 開(kāi)發(fā)者大會(huì)上發(fā)布了他們自己的軟件開(kāi)發(fā)工具（SDK）：Flutter。今天，我們就來(lái)比較一下這兩個(gè)框架。
Flutter 的設(shè)計(jì)目標(biāo)是在 iOS 和 Android 系統(tǒng)上創(chuàng)建高質(zhì)量界面，它是 Google 的移動(dòng)開(kāi)發(fā)框架。同時(shí)，它也是免費(fèi)的開(kāi)源工具，能和現(xiàn)有代碼共同使用，甚至在最近越來(lái)越受歡迎。
Flutter 的優(yōu)勢(shì)在于：
Flutter 擁有熱加載功能，只需幾毫秒就能運(yùn)行應(yīng)用程序。它的自定義窗體功能也可以用來(lái)創(chuàng)建原生界面。
快速交付的功能著重于原生的最終用戶體驗(yàn)。多層的架構(gòu)可以實(shí)現(xiàn)完全的定制化，從而得以實(shí)現(xiàn)靈活的設(shè)計(jì)和快速的渲染。
窗體覆蓋了所有基本的平臺(tái)之間的差異，同時(shí)擁有滾動(dòng)、導(dǎo)航、圖標(biāo)和字體等功能，同時(shí)為 iOS 和 Android 提供了完整的原生性能。
React
React 是個(gè) JavaScript 庫(kù)，其具有高效、靈活的特性，而且使用聲明式來(lái)編寫用戶界面。開(kāi)發(fā)者可以通過(guò)小型、獨(dú)立的代碼片段（所謂的“組件”）來(lái)構(gòu)成復(fù)雜的 UI。
React 的功能
React Native 由 Facebook 于 2013 年開(kāi)發(fā)。最常見(jiàn)的問(wèn)題的解決方案都列在了 React Native 的開(kāi)發(fā)文檔和指南中。社區(qū)論壇中還有許多開(kāi)發(fā)者，對(duì)用戶每天遇到的問(wèn)題做出了關(guān)鍵的貢獻(xiàn)，并輔助用戶解決這些問(wèn)題。
通過(guò)閱讀貢獻(xiàn)者手冊(cè)，查閱 Roadmap，分析其他人的工作，你也可以為社區(qū)做出貢獻(xiàn)。你也可以尋找在社區(qū)中被詢問(wèn)次數(shù)最多的、最流行的功能。
Flutter 文檔足夠讓你開(kāi)始進(jìn)行應(yīng)用程序開(kāi)發(fā)了。
Flutter Gallery 在其網(wǎng)站上演時(shí)了所有 Flutter 組件，你也可以參照 Flutter 的 GitHub 中的實(shí)現(xiàn)。
Flutter 的網(wǎng)絡(luò)不像 React Native 那么強(qiáng)大。但是，Google 的 Flutter 團(tuán)隊(duì)提供的幫助非常好。
他們提供了許多方法讓你提交問(wèn)題。
React Native 是個(gè) JavaScript 庫(kù)，而 Flutter 是個(gè) SDK，使用的是完全不同的編程語(yǔ)言 Dart。
JavaScript 最初的創(chuàng)建目的只是 Web 開(kāi)發(fā)，但現(xiàn)在已經(jīng)有了大量的其他函數(shù)庫(kù)，已經(jīng)變得非常龐大，很少有地方?jīng)]有它的身影。
React Native 將動(dòng)態(tài)的 JavaScript 代碼在運(yùn)行時(shí)編譯成原生視圖。其余的代碼運(yùn)行在應(yīng)用程序內(nèi)部封裝的虛擬機(jī)內(nèi)。
Dart 是個(gè)通用語(yǔ)言，由 Google 開(kāi)發(fā)。它可以用來(lái)構(gòu)建網(wǎng)站、服務(wù)器、移動(dòng)應(yīng)用，也能用于物聯(lián)網(wǎng)設(shè)備。
Dart 受到了許多語(yǔ)言的影響。最強(qiáng)的影響來(lái)自 Java。Java 程序員可以很容易注意到兩者之間的相似性。
Dart 是個(gè)面向?qū)ο蟮木幊陶Z(yǔ)言，支持抽象、封裝、繼承、多態(tài)等。
Dart 程序可以在以下兩種模式下運(yùn)行：
這種模式會(huì)啟用動(dòng)態(tài)類型和斷言。如果代碼中提供了靜態(tài)類型，就可以打開(kāi)類型斷言。在開(kāi)發(fā)和測(cè)試階段建議使用檢查模式，有助于捕捉代碼中類型不匹配的錯(cuò)誤。
這是所有 Dart 程序的默認(rèn)模式。它能讓程序運(yùn)行得更快。
盡管 Dart 提供了很多社區(qū)支持，但它仍然比不過(guò) JavaScript 等其他主流語(yǔ)言，因此連知道 Dart 的人都很少。
Flutter 的框架使用函數(shù)式反應(yīng)式編程，它受到了 React 的啟發(fā)。
雖然 Flutter 是用 Dart 寫的，但它借鑒了 React 最好的功能，幫助開(kāi)發(fā)者建立漂亮、跨平臺(tái)的移動(dòng)應(yīng)用。
使用 React Native 的體驗(yàn)很像使用不帶 CSS 框架的 HTML。
與 Flutter 應(yīng)用不同，使用 React Native 時(shí)，必須使用一些第三方庫(kù)，因?yàn)?React Native 本身不提供UI組件
我們需要使用如 React Native、React Native Material Design、Shoutem 和其他 UI 庫(kù)。
Flutter 有自己的 UI 組件，其引擎能將組件渲染到 Android 和 iOS 平臺(tái)上。大多數(shù)組件都符合 Material Design 的標(biāo)準(zhǔn)。
Flutter 內(nèi)置的組件可以用來(lái)開(kāi)發(fā)應(yīng)用程序的界面。這些組件叫做窗體（widget）。這里我們只需選擇正確的窗體并傳遞正確的屬性，就能獲得需要的界面。
Flutter 中的每個(gè)窗體都由自己的屬性，可以嵌套在其他組件中。窗體也能調(diào)用父組件的屬性。
在 React Native 中，使用原生模塊和用戶界面組件只需橋接就可以。但在 Flutter 中無(wú)法這樣做，因?yàn)?Flutter 有自己的渲染引擎。
這里是 Flutter 窗體（https://flutter.io/widgets/）的一些例子。
React Native 中的樣式用 JavaScript 定義。所有 React Native 的核心組件都支持一個(gè)名為 style 的屬性。
樣式名稱和值和 Web 上的 CSS 很相似。
唯一的區(qū)別就是，在 React Native 中的樣式名稱是用大小寫混合的。所以要定義背景色，需要使用 backgroundColor，而不是 background-color。
Flutter 中的樣式用法跟 React Native 不太一樣。下面這段 React Native 代碼定義了字體樣式和其他文本屬性，都由 CSS 處理。
var container = new Container( // grey box child: new Text( "Lorem ipsum", style: new TextStyle( fontSize: 24.0 fontWeight: FontWeight.w900, fontFamily: "Georgia", ), ), width: 320.0, height: 240.0, color: Colors.grey[300], );
如果用 Flutter 實(shí)現(xiàn)同一段代碼，將會(huì)是這樣：
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
export default class LotsOfStyles extends Component {
render() {
return (
<View style={styles.greybox}>
<Text>Lorem Ipsum</Text>
</View>
);
}
}
const styles = StyleSheet.create({
greybox: {
backgroundColor: #e0e0e0,
width: 320px;
height: 240px;
font: 900 24px Georgia;
}
})
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => LotsOfStyles);
我們來(lái)更仔細(xì)低看看它的優(yōu)缺點(diǎn)。
使用 Flutter 的五個(gè)優(yōu)點(diǎn)
Flutter 意味著更快、更動(dòng)態(tài)的移動(dòng)應(yīng)用開(kāi)發(fā)。代碼中的改變可以立即在應(yīng)用程序中看到，這就是所謂的熱加載，只需花幾毫秒，能幫助開(kāi)發(fā)者更快地添加功能、修復(fù) Bug 和試驗(yàn)各種新東西。
熱加載也十分適合開(kāi)發(fā)者和設(shè)計(jì)師之間的合作，可以試驗(yàn)各種應(yīng)用程序的外觀并立即看到效果。
換句話說(shuō)，F(xiàn)lutter 可以讓設(shè)計(jì)師和測(cè)試者一起與開(kāi)發(fā)者在 UI 上工作。
絕大多數(shù)代碼變更都可以熱加載。但有一些變更需要重新啟動(dòng)應(yīng)用，這些是熱加載的限制。
相比之下，在原生應(yīng)用程序開(kāi)發(fā)時(shí)，整個(gè)項(xiàng)目需要重新構(gòu)建，這需要花很長(zhǎng)時(shí)間，有時(shí)甚至?xí)ㄉ蠋追昼姟?/p>
開(kāi)發(fā)者只需寫一次代碼，就能在 Android 和 iOS 兩個(gè)平臺(tái)上運(yùn)行。
Flutter 并不依賴于平臺(tái)，因?yàn)樗凶约旱拇绑w和設(shè)計(jì)，所以你可以在兩個(gè)平臺(tái)上擁有同樣的應(yīng)用。當(dāng)然，需要時(shí)你也可以做出不同的應(yīng)用。
兩個(gè)平臺(tái)同樣的應(yīng)用意味著需要的測(cè)試更少。QA 過(guò)程可以更快，因?yàn)橹恍枰獪y(cè)試一份代碼。開(kāi)發(fā)者只需要編寫一份測(cè)試代碼。
QA 專員的工作也會(huì)變少，因?yàn)樗麄冎恍枰獪y(cè)試一個(gè)應(yīng)用。如果不同平臺(tái)上的應(yīng)用有差異，那么這些差異需要在各自的平臺(tái)上測(cè)試。
Flutter 的設(shè)計(jì)方式使得開(kāi)發(fā)者很容易創(chuàng)建自己的窗體，或定制已有的窗體。你可以瀏覽許多 Flutter 窗體的例子（https://flutter.io/widgets/）、Material Design 的例子（https://flutter.io/widgets/material/）和 Cuptertino 窗體的例子（https://flutter.io/widgets/cupertino/）。
即使在舊版本的 Android 和 iOS 平臺(tái)上，應(yīng)用的外觀也是一樣的。適配舊設(shè)備不需要額外的工作。Flutter 能在 Android Jelly Bean 之后的版本和 iOS 8 之后的版本上運(yùn)行。
缺點(diǎn)
在 2018 年 4 月，F(xiàn)lutter 發(fā)布了 beta 2 版。Flutter 團(tuán)隊(duì)還沒(méi)有發(fā)布穩(wěn)定版本。
“我們?nèi)匀辉趪L試將 API 穩(wěn)定下來(lái)，同時(shí)根據(jù)用戶的反饋對(duì)系統(tǒng)的各個(gè)部分進(jìn)行改進(jìn)。一些關(guān)鍵功能還無(wú)法用于大范圍的應(yīng)用。”Flutter 官網(wǎng)如是說(shuō)。
這就是說(shuō)，以后還會(huì)有更多的改變和改進(jìn)。
很不錯(cuò)，但用于原生開(kāi)發(fā)還略顯不足。
Flutter 很優(yōu)秀，有許多函數(shù)庫(kù)提供了很多功能。
但是，F(xiàn)lutter 依然很年輕，因此不一定能在函數(shù)庫(kù)中找到所有需要的功能。也就是說(shuō)，開(kāi)發(fā)者需要自行創(chuàng)建這些功能，有可能會(huì)花很多時(shí)間。
因?yàn)?Flutter 依然是 Beta 狀態(tài)，它還沒(méi)有受到 Travis、Jenkins 等 CI 平臺(tái)的廣泛支持。
為了實(shí)現(xiàn)自動(dòng)構(gòu)建、自動(dòng)測(cè)試和自動(dòng)部署，開(kāi)發(fā)團(tuán)隊(duì)必須開(kāi)發(fā)并維護(hù)自己的腳本。
React Native 也只需要一份代碼（JavaScript）。它的視圖組件在 iOS 和 Android 中的行為不一樣。
盡管 React Native 有大量的社區(qū)支持，為我們提供了許多優(yōu)秀的插件和庫(kù)，但這也意味著這些庫(kù)可能會(huì)和已有項(xiàng)目沖突。
如果你習(xí)慣了 JSX 環(huán)境，F(xiàn)luttter 的 UI 代碼看上去有點(diǎn)無(wú)聊，而且在 UI 變得復(fù)雜之后代碼的可讀性也會(huì)變差。
與 React Native 相比，F(xiàn)lutter 的資源似乎并不多。主要原因就是 Flutter 的基礎(chǔ)還沒(méi)有 React Native 那么穩(wěn)定。但作為 Beta 版，F(xiàn)lutter 的資源已經(jīng)有了巨大的成長(zhǎng)。
React Native 和 Flutter 都有自己的優(yōu)缺點(diǎn)。React Native 有更多的社區(qū)支持，F(xiàn)lutter 依然很年輕，而 React Native 已經(jīng)鋪好了路。
Flutter 看上去很吸引人，但還需要一些改進(jìn)，還需要一些時(shí)間才能展示出潛力。
原文：https://medium.com/@surendervikram/flutter-vs-react-native-best-cross-platform-app-development-tool-16163e22618b
作者：Surender Vikram Singh，技術(shù)專家、企業(yè)家，有15年的全球開(kāi)發(fā)經(jīng)驗(yàn)。
譯者：彎月，責(zé)編：屠敏
前我們已經(jīng)介紹了2019 年 Vue 學(xué)習(xí)路線圖，而 React 作為當(dāng)前應(yīng)用最廣泛的前端框架，在 Facebook 的支持下，近年來(lái)實(shí)現(xiàn)了飛越式的發(fā)展，所以，我們將在下文中介紹 2019 年 React 學(xué)習(xí)路線圖，希望給想學(xué) React 的開(kāi)發(fā)者一些借鑒。
這就是 2018 年的 React 路線圖。它非常全面，2018 年剩下的時(shí)間可能不夠你學(xué)會(huì)所有這些，但不要擔(dān)心，所有的技術(shù)在 2019 年仍然有效。
圖片來(lái)源：https://github.com/adam-golab/react-developer-roadmap/blob/master/roadmap.png
不管你要學(xué)習(xí)哪個(gè) Web 開(kāi)發(fā)框架或庫(kù)，都必須掌握基礎(chǔ)知識(shí)，如 HTML、CSS 和 JavaScript，這三個(gè)是 Web 開(kāi)發(fā)的三大支柱。
HTML
HTML 是 Web 開(kāi)發(fā)人員最重要的技能之一，因?yàn)樗鼮榫W(wǎng)頁(yè)提供了基本結(jié)構(gòu)。
CSS
CSS 用于設(shè)置網(wǎng)頁(yè)樣式，讓網(wǎng)頁(yè)看起來(lái)更好看。
JavaScript
JavaScript 讓網(wǎng)頁(yè)具備交互性。React 是基于 JavaScript 的，因此在學(xué)習(xí) React 之前，你應(yīng)該先了解 JavaScript。
無(wú)論你是前端開(kāi)發(fā)人員還是后端開(kāi)發(fā)人員，甚至是全棧工程師，都必須了解一些能夠讓你在編程世界中生存下來(lái)的通用開(kāi)發(fā)技能。
學(xué)習(xí) GIT
你必須在 2018 年完全了解 Git。嘗試在 GitHub 上創(chuàng)建一些存儲(chǔ)庫(kù)，與其他人共享你的代碼，并學(xué)習(xí)如何在你喜歡的 IDE 中克隆 Github 上的代碼。
了解 HTTP(S) 協(xié)議
如果你想成為一名 Web 開(kāi)發(fā)人員，那么了解 HTTP 絕對(duì)是有必要的。
我不是要你去閱讀 HTTP(S) 規(guī)范，但你至少應(yīng)該熟悉常見(jiàn)的 HTTP 請(qǐng)求方法，如 GET、POST、PUT、PATCH、DELETE、OPTIONS 以及 HTTP/HTTPS 的工作原理。
學(xué)習(xí)終端
雖然前端開(kāi)發(fā)人員學(xué)習(xí) Linux 或終端并不是強(qiáng)制性的，但我強(qiáng)烈建議你熟悉以下終端，了解如何配置你的 shell（bash、zsh、csh）等。
算法和數(shù)據(jù)結(jié)構(gòu)
好吧，這又是一個(gè)通用編程技能，成為 React 開(kāi)發(fā)者不一定需要了解這些，但要成為真正的程序員，這是必備技能。
學(xué)習(xí)設(shè)計(jì)模式
就像算法和數(shù)據(jù)結(jié)構(gòu)一樣，成為 React 開(kāi)發(fā)者并不一定要學(xué)習(xí)設(shè)計(jì)模式，但學(xué)好設(shè)計(jì)模式會(huì)讓你變得更好。了解設(shè)計(jì)模式將幫你找到能夠經(jīng)受住時(shí)間考驗(yàn)的解決方案。
你必須學(xué)好 React 才能成為一名 React 開(kāi)發(fā)者。學(xué)習(xí) React 最好的資源是它的官方網(wǎng)站，但作為初學(xué)者，它對(duì)你來(lái)說(shuō)可能有點(diǎn)難。
3.1 學(xué)習(xí)構(gòu)建工具
如果你想成為一名專業(yè)的 React 開(kāi)發(fā)者，那么你應(yīng)該花一些時(shí)間熟悉一下你將作為 Web 開(kāi)發(fā)者需要使用的工具，比如構(gòu)建工具、單元測(cè)試工具、調(diào)試工具等。
以下是路線圖中列出的構(gòu)建工具：
包管理器：
順便說(shuō)一句，并非要學(xué)習(xí)所有這些工具，對(duì)于初學(xué)者來(lái)說(shuō)，學(xué)習(xí) npm 和 Webpack 應(yīng)該足夠了。在你對(duì) Web 開(kāi)發(fā)和 React 生態(tài)系統(tǒng)有了更多的了解后，你就可以學(xué)習(xí)其他工具。
3.2 樣式
如果你的目標(biāo)是成為 React 開(kāi)發(fā)者，了解一些樣式相關(guān)的知識(shí)只會(huì)有益無(wú)害。路線圖中提到了很多 CSS 相關(guān)的東西，比如 CSS 預(yù)處理器、CSS 框架、CSS 架構(gòu)和 JS 中的 CSS。
我建議你至少學(xué)習(xí)一下 Bootstrap，這是你經(jīng)常會(huì)用到的 CSS 框架。
如果你想進(jìn)一步學(xué)習(xí) bootstrap，也可以學(xué)習(xí) Materialise 或 Material UI。
3.3 狀態(tài)管理
這是 React 開(kāi)發(fā)者應(yīng)該關(guān)注的另一個(gè)重要領(lǐng)域。路線圖中提到了以下一些需要掌握的概念和框架：
如果東西太多，我建議你只關(guān)注 Redux。
3.4 Type Checker
由于 JavaScript 不是一種強(qiáng)類型語(yǔ)言，因此編譯器不會(huì)捕獲那些與類型相關(guān)的錯(cuò)誤。
隨著應(yīng)用程序的增長(zhǎng)，你可以通過(guò)類型檢查捕獲大量錯(cuò)誤，尤其是如果你可以使用 Flow 或 TypeScript 等 JavaScript 擴(kuò)展對(duì)整個(gè)應(yīng)用程序進(jìn)行類型檢查。
React 也提供了一些內(nèi)置的類型檢查功能，可以用它們幫你盡早發(fā)現(xiàn) bug。
由于 Angular 也使用了 TypeScript，我認(rèn)為可以同時(shí)學(xué)習(xí) JavaScript 和 TypeScript。
3.5 Form Helper
除了 Type Checker 之外，還可以學(xué)習(xí)像 Redux Form 這樣的 Form Helper，它提供了在 Redux 中管理表單狀態(tài)的最佳方法。除了 Redux Form 之外，還有 Formik、Formsy 和 Final。
3.6 路由
組件是 React 聲明性編程模型的核心，而路由組件是應(yīng)用程序的重要組成部分。
React Router 提供了一組導(dǎo)航組件，這些組件可以通過(guò)聲明的方式與你的應(yīng)用程序組合在一起。
除了 React Router 之外，你還可以看看 Router 5 和 Redux-First Router。
3.7 API 客戶端
在今天的世界中，你很少會(huì)構(gòu)建獨(dú)立的 GUI，相反，你將有更多機(jī)會(huì)使用 REST 和 GraphQL 等 API 構(gòu)建與其他應(yīng)用程序發(fā)生交互的東西。
值得慶幸的是，React 開(kāi)發(fā)者可以使用很多 API 客戶端：
REST
GraphQL
Apollo 客戶端是我的最愛(ài)，它提供了一種使用 GraphQL 構(gòu)建客戶端應(yīng)用程序的簡(jiǎn)便方法。Apollo 可以幫你快速構(gòu)建使用 GraphQL 獲取數(shù)據(jù)的 UI，并可以與任意 JavaScript 前端一起使用。
3.8 輔助庫(kù)
這些庫(kù)可以讓你的工作變得更輕松。React 開(kāi)發(fā)人員可以使用很多輔助庫(kù)，如下所示：
這些不一定都要學(xué)，路線圖中的 Lodash、Moment 和 Classnames 是用黃色標(biāo)注的，所以應(yīng)該先從它們開(kāi)始學(xué)習(xí)。
3.9 測(cè)試
測(cè)試是 React 開(kāi)發(fā)者的一項(xiàng)重要技能，但經(jīng)常被忽視，如果你想在競(jìng)爭(zhēng)中保持領(lǐng)先，就要學(xué)習(xí)一些用于測(cè)試的庫(kù)。這些庫(kù)可用于單元測(cè)試、集成測(cè)試和端到端測(cè)試。
以下是路線圖中提到的庫(kù)：
單元測(cè)試
端到端測(cè)試
集成測(cè)試
你可以學(xué)習(xí)你想學(xué)習(xí)的庫(kù)，但建議一定要學(xué)習(xí) Jest 和 Enzyme。
3.10 國(guó)際化
這是前端開(kāi)發(fā)的另一個(gè)重要主題。你可能需要支持日本、中國(guó)、西班牙和其他歐洲國(guó)家的本地 GUI 版本。
路線圖中建議你學(xué)習(xí)以下技術(shù)，它們都很好理解：
這兩個(gè)庫(kù)都提供了 React 組件和 API 來(lái)格式化日期、數(shù)字和字符串，包括復(fù)數(shù)和處理翻譯。
3.11 服務(wù)器端渲染
你可能會(huì)想，服務(wù)器端渲染和客戶端渲染之間有什么區(qū)別。在使用客戶端渲染時(shí)，你的瀏覽器會(huì)下載一個(gè)最小的 HTML 頁(yè)面，然后通過(guò) JavaScript 并將內(nèi)容填充到頁(yè)面中。
在使用服務(wù)器端渲染時(shí)，React 組件是在服務(wù)器上進(jìn)行渲染的，將輸出的 HTML 內(nèi)容傳到客戶端或?yàn)g覽器。
路線圖推薦了以下的服務(wù)器端渲染：
不過(guò)我建議學(xué)習(xí) Next.js 應(yīng)該足夠了，Max 的“ React 16?—?The Complete Guide”也涵蓋了 Next.js 的基礎(chǔ)知識(shí)。
3.12 靜態(tài)站點(diǎn)生成器
Gatsby.js 是一個(gè)現(xiàn)代靜態(tài)站點(diǎn)生成器。你可以使用 Gatsby 創(chuàng)建個(gè)性化的登錄網(wǎng)站體驗(yàn)。它將你的數(shù)據(jù)與 JavaScript 相結(jié)合，并創(chuàng)建格式良好的 HTML 內(nèi)容。
3.13 后端框架集成
React on Rails 將 Rails 與 Facebook 的 React 前端框架（服務(wù)器渲染）集成在一起。它提供了服務(wù)器渲染，通常用于 SEO 爬蟲索引和 UX。
React Native 正迅速成為使用 JavaScript 開(kāi)發(fā)具有原生外觀的移動(dòng)應(yīng)用程序的標(biāo)準(zhǔn)方法。
路線圖中建議你學(xué)習(xí)以下庫(kù)：
但我認(rèn)為只要學(xué)習(xí) React Native 就足夠了。
還有一些基于 React 的框架可用于構(gòu)建像 React Native Windows 這樣的桌面 GUI，讓你可以使用 React 構(gòu)建原生 UWP 和 WPF 應(yīng)用程序。
路線圖建議使用以下幾個(gè)庫(kù)：
它們都是進(jìn)階的內(nèi)容，如果你已經(jīng)掌握了 React，可以看一下它們。
如果你對(duì)構(gòu)建基于虛擬現(xiàn)實(shí)的應(yīng)用程序感興趣，還可以了解以下像 React 360 這樣的框架，讓你可以通過(guò) React 開(kāi)發(fā) VR 體驗(yàn)。如果你對(duì)這個(gè)領(lǐng)域感興趣，可以進(jìn)一步了解 React 360。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
