react技術棧學習

　　公司後面的項目會用到react，這段時間從頭學習react技術棧，給本身的規劃是react => react router => react redux => react native，目前剛接觸到redux，看的人一臉懵逼，非常憔悴。來博客園寫寫博客，散散心，記錄一下這段時間的學習。

 

　　目前react版本 15.4.2，根據切身體驗，首先，通讀一遍react英文官網教程，讀到form表單那裏便可，須要理解80%以上內容，而且讀懂每個demo。看完這些，對react思想會有一個基本瞭解。

　　而後，學習w3cplus上這個教程，這個教程至關棒，能夠看出做者融合了不少本身的想法，並且講了不少小技巧，也是對官網教程的一個補充。這個教程也相對簡單，所以極力推薦將裏面的全部demo重寫一遍。教程上仍是用createClass建立組件，重寫時能夠用官網推薦的es6寫法。我已將全部demo用es6重寫，見github

　　看完以上，這個用react寫的組件就很容易掌握了 react入門實例

　　w3cplus上的教程後面對react router有一個大概的介紹，不過網上對react router相關的教程比較老，所以，這裏推薦經過官方最新教程學習，見github

　　學到這，我猶豫寫幾個demo鞏固一下以前所學，仍是接着學redux。老闆說，應該對整個技術棧有一個大概瞭解，這樣遇到具體項目就知道從何入手，再逐一攻破。拋開native，我決定至少先了解下redux。。。。。第一次接觸redux這種思想，看了半天，這究竟是什麼玩意？！

　　不過再難還得學啊，剛剛看到好多相關項目都引進了webpack，不由有些感想，曾經學nodejs時想了解下webpack，看半天沒明白，感受特別反人類，就放棄了。而若是用react作項目，webpack是必需要了解的，等到後面用時再看，不如如今就學，哪怕學不會到時也多些理解，多看看多想一想總能學會的。無奈團隊剛起步，目前就我一個半吊子技術，後期估計前端也只有我負責，只能本身上。看官網教程，看別人項目，終於搞懂了經常使用配置參數，原來也就那麼回事。後面的自動刷新配置耽誤了些時間，但也總算搞定了。eslint也是，又掃清一個攔路虎。

　　每次遇到那些感受好難的技術，一時理解不了的，就想先放放。但轉念想，若是如今搞定它，那麼今後刻起，我將開始受益，並且學一次，受益終生，多麼划算的買賣。不只如此，下一個技術的起點會在此次攻克難關的成果之上，水漲船高，個人視野會愈來愈寬闊，能力提升得也愈來愈快。那麼，何再也不堅持一下？ 等到問題被解決，會發現，並無本身想象中那麼難，這即是一個書越讀越薄的過程。

　　此次的redux也是，全新的思想挑戰着本身，何再也不努力下，離成功更進一步？

 

// ================= 3月21日更新 ==================

　　前面廢話較多。

　　到今天從接觸react整整一個月了，由於公司沒項目一直處在學習的過程當中。react整個技術棧大概都瞭解到了，從學習redux開始慢慢有些懷疑人生。不要被它的名字欺騙，其實redux跟react基本沒有關係，它能夠算是一種開發思想，用了redux你就得按它的套路來組織代碼，並且不只僅可以使用在react上，好比angular就可使用redux，甚至小程序也能夠。以前只接觸過淺薄的MVC模式，此次學redux至關痛苦，store、action、reduce這些詞看起來很簡單，可是用起來一點也不善良。學redux沒有捷徑，就是不斷地看資料、理解，看資料，一遍不行看兩遍，兩遍不行接着看。我連續看了一週才逐漸理解了它幾個部分之間合做的關係，因此，若是看了兩三天仍是鬱悶不要氣餒。在這裏，不詳細介紹redux是怎麼回事，分享一下我踩過的坑。

　　1，再次聲明，redux跟react沒有關係。在react項目中引入redux可使用官方的輪子 react-redux ，它提供兩個主要功能，connect()和<Provider />，前者須要着重理解，是這個輪子的核心。不用這個這個輪子也能在react項目中使用redux，這時須要手動dispatch一個action，觸發視圖更新。

　　2，如同1所說，有些資料中沒有說明講得是redux仍是react-redux(若是沒有提到react，就要注意最好不要跟react產生聯繫)，你會發現有時候它用dispatch一個action觸發UI更新；有時候它沒有用dispatch；有時候它引入了react-redux這個庫，也用了connect()這個方法，但最後仍是用到了dispatch。初學時很容易分不清這些概念，再次提醒。

　　3，reducer不是一個內置接口，只是(prevState, action) => (newState)這種形式的表示。

　　4，用了redux，你會發現還須要更多的輪子來完成一個項目，異步就是其中一種。關於redux中的action異步，之前用redux-thunk，如今建議使用redux-saga，一個簡易的saga例子在這裏

　　5，redux思想了解清楚後可能會有「你說得我都懂，但寫項目時就是不知從何下手」這種尷尬。我思考良久，這是缺乏既往的項目開發經驗緣由（這不廢話( ╯□╰ )）。redux終究是一門架構，考慮的是如何設計出一個結構清晰的Application，因此，若是你還未開始reudux,建議不要輕易過早涉及它，去學react-native吧，一門更深的坑，但至少深刻鍛鍊了寫react代碼的能力，等未來項目複雜到沒法繼續用react自身優化再來考慮redux吧。

 

分享一些優秀的網站，可按次序來讀

　　1，https://dudu.zhihu.com/story/7997429 淺顯易懂的入門介紹

　　2，http://cn.redux.js.org/ 官方中文文檔，多讀幾遍，注意redux和react-redux的區別。第二、3章的示例能夠詳細瞭解下

　　3，https://segmentfault.com/a/1190000004355491?_ea=661485 這裏用的react-redux

　　4，https://github.com/joeyguo/blog/issues/3 

　　5，http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html 阮老師的三篇，其實剛開始看時沒看懂，瞭解了action、reducer這些再看比較好

　　6，https://github.com/react-guide/redux-tutorial-cn 

　　7，http://www.cnblogs.com/lewis617/p/5145073.html 講connect的

　　8，https://yq.aliyun.com/articles/59428 仍是connect

　　9，http://www.cnblogs.com/hhhyaaon/p/5863408.html connect

　　10，https://leozdgao.me/reacthe-reduxde-qiao-jie-react-redux/ 在你分得清redux和react-redux後，會極其想了解他們的區別

　　11，https://github.com/jasonslyvia/a-cartoon-intro-to-redux-cn

　　12，http://www.imooc.com/u/4725764/articles 推薦細讀，我看了受益不淺

　　13，https://www.w3ctech.com/topic/1561

　　14，https://github.com/kenberkeley/redux-simple-tutorial 這個講了源碼

 

　　另分享一個講container和component的：http://www.jianshu.com/p/6fa2b21f5df3

 

　　沒錯，我看了這麼多資料，仍然沒法拿下redux。這貨不是API調用那麼簡單，到必定程度，你還會研究中間件，函數式編程，書都給你備好了：https://www.gitbook.com/book/llh911001/mostly-adequate-guide-chinese/details

 

　　再難也得上啊，人生就是一次又一次的破然後立，不斷地挑戰本身。

 

　　最近研究react-native，以前以爲學了react，寫native易如反掌，結果仍是太太年輕。用的react思想不假，可是這裏面沒有自定義組件，它只是抽象了幾個具備表明性的原生應用組件，好比列表、文字、按鈕之類的，是否是以爲很簡單？呵呵。地圖咋辦？據我瞭解，目前沒有一家地圖提供商適配react-native版的接口，現存的一些仍是民間的奇能異士費心研究的，可是react-native尚未一個穩定版本，一年前的輪子如今已經用不了了。因此，若是想寫一個優秀的react-native APP，若是需求略複雜，就須要封裝現有的原生組件功能，這就要了解Android和IOS開發。

　　react-native還在飛速發展，咱們應給予足夠的關注和鼓勵，這樣在不久的未來，纔會真正出現一個一次編寫，處處運行的全能開發平臺。react目前已經能寫vr，是否是很激動。

　　相信react，相信JavaScript，相信本身。

 

react-native踩坑記，不按期更新

tips：
1，圖片的引用參數應始終爲字符串，網絡圖片要指定尺寸
2，長列表View組件封裝的視圖沒法滾動，用ScrollView
　　ScrollView一次渲染全部內容，ListView優先渲染視口內容
3，navigator必須置於最外層？（initialRoute、renderScene）renderScene在每次導航調研都會渲染
　　http://bbs.reactnative.cn/topic/20/%E6%96%B0%E6%89%8B%E7%90%86%E8%A7%A3navigator%E7%9A%84%E6%95%99%E7%A8%8B

　　目前官方已再也不維護navigator這個組件，推薦使用react-navigation，redux架構，可不止使用在native端

4，容器元素添加flexDirection才能讓子元素flex
5，觸摸點擊用TouchableHighlight，屬性onPress
6，報錯時注意項目名是否與文件名一致
7，TextInput獲取組件的輸入值須要調用event.nativeEvent.text
8，margin包含在flex大小內
9，文本只用Text組件
10，按鈕、連接等有交互的動做用TouchableHighlight組件
11，將Image至於View組件外層做爲背景圖
12，justifyContent和alignItems均寫在父元素做用於子元素
　　justifyContent與主軸平行，後者與主軸垂直
13，獲取數據要放在componentDidMount中
14，React必須import進去
15，項目引用的文件夾更名後必須重啓服務
16，source引用的網絡圖片須要指定大小纔會顯示
17，啓動項目時出現諸如could not delete path…的錯誤可嘗試在android目錄下執行gradlew.bat clean（Widnows），而後再run android
18，Button組件由TouchableHighlight和Text包裝，因此既能顯示文字，又能點擊
19，WebView： http://www.jianshu.com/p/b37ee000379e#
20，ToastAndroid，底部那個小黑顯示條
21，Switch的onValueChange調用時默認傳遞當前組件的布爾值
22，在在android/app/proguard-rules.pro尾部添加混淆規則
23，本地瀏覽器、郵箱等應用打開：Link
24，textinput 去掉安卓下劃線：underlineColorAndroid='transparent'
25，父組件的props置爲子組件state時，父組件setState不會刷新子組件UI
26，組件通信：RCTDeviceEventEmitter  http://www.jianshu.com/p/5fe3e0f91ce5
27，ios下可使用react-native-maps，默認高德地圖。安卓，呵呵
28，expected a component class, got [object Object] error 導出的組件名首字母大寫

 

經常使用輪子：
新建項目：create-react-native-app
　　http://www.cnblogs.com/shaoting/p/6136447.html
　　https://github.com/MarnoDev/react-native-open-project
　　http://www.jianshu.com/p/53ff78168acc
首屏進入前的loading畫面： SplashScreen
圖標：react-native-vector-icons/Ionicons
底部切換欄：react-native-tab-navigator，不可滑動
頂部標籤切換欄（也可渲染到底部，可滑動）：react-native-scrollable-tab-view
　　http://www.jianshu.com/p/b7788c3d106e
本地持久存儲： https://github.com/sunnylqm/react-native-storage
單圖上傳：react-native-image-picker
多圖上傳帶裁剪：react-native-image-crop-picker
視頻：react-native-video
首屏前圖片：react-native-splash-screen
輪播：react-native-swiper
文件操做：react-native-fs
圖標：react-native-charts-wrapper
　　http://www.jianshu.com/p/432517c5b531
滑動選項：react-native-swipe-list-view
可自定義的toast：react-native-easy-toast
很漂亮的底部標籤切換：react-native-material-bottom-navigation
列表拖拽排序：react-native-sortable-list

 

編譯的坑
1，要裝yarn
2，注意AndroidManifest.xml裏的格式寫法
　　meta-data位於application內；
　　user-permission位於manifest下，且不可重複
3，寫在Android根目錄下的gradle.properties，不用新建
4，MainApplication.java裏asList的多餘逗號
5，刪除以前的應用
6，can't delete path && can't create => 刪除build下的目錄
7，import引用的方法要不要帶花括號

 

style的幾種寫法
普通寫法：
　　style={{fontSize: 12}}
建議寫法：
　　style={styles.fontSize12}
集合寫法：
　　style={[styles.fontSize12], [styles.font_color],{fontWeight: 'bold'}}
條件寫法：
　　style={index===0 ? styles.index0 : styles.index_other}
　　style={[ styles.button, this.state.touching && styles.highlight ]}

 

ios啓用http例外

    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSTemporaryExceptionAllowsInsecureHTTPSLoads</key>
                <false/>            
                <key>NSIncludesSubdomains</key>
                <true/>
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
                <key>NSTemporaryExceptionMinimumTLSVersion</key>
                <string>1.0</string>
                <key>NSTemporaryExceptionRequiresForwardSecrecy</key>
                <false/>
            </dict>
        </dict>
    </dict> 

 

其它

gradle下載失敗解決辦法
http://www.cnblogs.com/yahue/p/React_Native_Android_gradle.html

native 入門
https://juejin.im/post/5898388b128fe1006cb943e3

不少優秀的資料
https://juejin.im/tag/React%20Native

組件庫
https://js.coach/

入門指南
https://github.com/vczero/react-native-lesson

csdn下載區

集成百度地圖
http://www.dswey.com/2016/07/29/react-native-baidu-map/

掘金客戶端
https://github.com/wangdicoder/JueJinClient

組件間通訊RCTDeviceEventEmitter
http://www.tuicool.com/articles/uAnYvy

江清清的技術專欄
http://www.lcode.org

國內資源
https://applean.cn/gist/8

支付、日期等
http://jafeney.com/archives/
http://blog.csdn.net/u011413061/article/details/53183370

安卓dev tool
http://www.androiddevtools.cn/

 

 

// ==================== 寫在最後，6月3日

 

　　博客園編輯器太老了很差用。歡迎關注個人簡書，我在那邊活躍些