react-native-redux 簡易教程

一、React-Native介紹

簡介：
React Native (簡稱RN)是Facebook於2015年4月開源的跨平臺移動應用開發框架，是Facebook早先開源的UI框架 React 在原生移動應用平臺的衍生產物，目前支持iOS和安卓兩大平臺。RN使用Javascript語言，類似於HTML的JSX，以及CSS來開發移動應用。
React-native特點：
1、React Native使你能夠在Javascript和React的基礎上獲得完全一致的開發體驗，構建世界一流的原生APP。
2、React Native着力於提高多平臺開發的開發效率 —— 僅需學習一次，編寫任何平臺。(Learn once, write anywhere)
React Native比起標準Web開發或原生開發能夠帶來的三大好處：
1、手勢識別：基於Web技術（HTML5/JavaScript）構建的移動應用經常被抱怨缺乏及時響應。而基於原生UI的React Native能避免這些問題從而實現實時響應。
2、原生組件：使用HTML5/JavaScript實現的組件比起原生組件總是讓人感覺差一截，而React Native由於採用了原生UI組件自然沒有此問題。
3、樣式和佈局：iOS、Android和基於Web的應用各自有不同的樣式和佈局機制。React Native通過一個基於FlexBox的佈局引擎在所有移動平臺上實現了一致的跨平臺樣式和佈局方案。

二、環境搭建

1、Node.js安裝及環境配置之Windows篇
http://www.jianshu.com/p/03a76b2e7e00
2、Windows下RN環境搭建及官方Demo運行
http://m.blog.csdn.net/M075097/article/details/76551303

三、Android中集成React-Native

1、Android原生項目集成React Native
http://blog.csdn.net/u013718120/article/details/55050900?locationNum=15&fps=1
1、創建Android工程：ImitateZhiHu
2、工程創建完畢後，切換到Android Studio的terminal命令行窗口，執行npm init命令，將工程初始化爲一個react-native工程（npm init 會生成package.json文件，即RN的配置文，一個文件要被其它模塊作爲工具包引用，一定要有個package.json）

{
  "name": "kit",
  "version": "1.0.0",
  "description": "imittezh' react-native uikit",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "charles",
    "zh",
    "native",
    "uikit"
  ],
  "author": "charles",
  "license": "ISC"
}

3、執行npm install –save react react-native 命令
4、創建.flowconfig文件（可以從其它工程複製）
5、在package.json中添加”start”: “node node_modules/react-native/local-cli/cli.js start”，作用：使得在AndroidStudio中可以支持npm命令
6、添加index.android.js文件，也就是你的RN界面到根目錄下，它是一個入口文件
7、其它：給項目添加依賴包，網絡權限，NDK支持，maven庫的本地路徑等
8、以上完成之後，react-native就算集成到了項目中了

四、React-Native工程介紹

4.1、工程目錄

4.2、react-native

4.2.1、react-native的生命週期

生命週期的三個階段
第一階段：是組件第一次繪製階段，如圖中的上面虛線框內，在這裏完成了組件的加載和初始化；
第二階段：是組件在運行和交互階段，如圖中左下角虛線框，這個階段組件可以處理用戶
交互，或者接收事件更新界面；
第三階段：是組件卸載消亡的階段，如圖中右下角的虛線框中，這裏做一些組件的清理工作
生命週期中一些重要方法
1、getInitialState
該函數用於對組件的一些狀態進行初始化，該狀態是隨時變化的（也就是說該函數會被多次調用），比如ListView的datasource,rowData等等，同樣的，可以通過this.state.XXX取該屬性值，同時可以對該值進行修改，通過this.setState修改，es6中將屬性的初始化放到了構造函數中。
2、render
該函數組件必有的，通過返回JSX或其他組件來構成DOM,換言之，就是組件的核心渲染過程。
3、componentDidMount
在組件第一次繪製之後，會調用componentDidMount，通知組件已經加載完成。
4、shouldComponentUpdate
當組件接收到新的屬性和狀態改變的話，都會觸發調用shouldComponentUpdate(…)

4.2.2、hello world

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class MyFirstRNDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('MyFirstRNDemo', () => MyFirstRNDemo);

1、第一行 import 引入了 React庫，React是Facebook開發的一款JS庫，主要用於構建那些數據會隨時改變的大型應用，第二行：import {…} from ‘react-native’ 大括號內是一些組件，用於引入一些組件react-native。
2、class FirstRNDemo 就是我們App界面中要展示的內容了，我們可以看到裏面有一個render()方法，這是Component類的一個方法用於渲染界面，他負責將其return回來的View渲染出來。
3、StyleSheet：樣式管理類,類似於css，用於定義一些樣式
4、AppRegistry模塊，是用來告知React Native哪一個組件被註冊爲整個應用的根容器。
使用AppRegistry.registerComponent進行註冊自己，然後原生系統就可以進行加載運行bundle文件包，最後就會可以調用AppRegistry.runApplication進行運行起來應用

4.2.3、props和state

React 把組件看成是一個狀態機（State Machines）。通過與用戶的交互，實現不同狀態，然後渲染 UI，讓用戶界面和數據保持一致。
一個標準的React組件會由以下幾種情況觸發render。一種是通過setState方法設置了state內容，另一種是外部傳入了props。

props：大多數組件在創建時就可以使用各種參數來進行定製。用於定製的這些參數就稱爲props（屬性），比如我們可以實現指定一個標題欄名字，或者一張圖片的默認地址。
state：我們使用兩種數據來控制一個組件：props和state。props是在父組件中指定，而且一經指定，在被指定的組件的生命週期中則不再改變。對於需要改變的數據，我們需要使用state。一般來說，你需要在constructor中初始化state（譯註：這是ES6的寫法，早期的很多ES5的例子使用的是getInitialState方法來初始化state，這一做法會逐漸被淘汰），然後在需要修改時調用setState方法。

class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}} />
    );
  }
}

4.2.4、簡易計數器

export default class SimpleCounter extends Component {
  constructor(props){
    super(props);
    this.state = {
      mainText: 'init value',numValue: 1
    }
  }
  render() {
    let title = 'React Native界面';
    return (
      <View underlayColor = '#ddd', style={styles.container}>
        <Text >{title}</Text>
        <Text style={styles.welcome}
        onPress={() => this.addNum()}>{this.state.mainText}</Text>
      </View>
    );
  }
  addNum(){
    this.state.numValue ++;
    if(this.state.numValue % 2 == 0){
      this.setState({
        mainText: "Value : " + this.state.numValue + " X"
      });
    }else{
      this.setState({
        mainText: "Value : " + this.state.numValue + " Y"
      });
    }
  }
}

4.3、react與redux

4.3.1、安裝redux依賴包

跟安裝其它依賴庫一樣，通過npm install 命令進行安裝，npm install –save react-dedux

4.3.2、Redux 簡介

redux和 React 之間沒有關係。Redux 支持 React、Angular、Ember、jQuery 甚至純 JavaScript。Redux對於JavaScript應用而言是一個可預測狀態的容器。換言之，它是一個應用數據流框架。Redux最主要是用作應用狀態的管理。簡言之，Redux用一個單獨的常量狀態樹（對象）保存這一整個應用的狀態，這個對象不能直接被改變。當一些數據變化了，一個新的對象就會被創建（使用actions和reducers）。

4.3.3、爲什麼要用redux

1、redux的本質，redux要解決的問題就是state的管理
2、實現UI與控制分離，是一種MVC的分層思想
React扮演的是View的角色，Redux則是Controller，至於Model就是Redux Store中存儲的State，不使用redux，項目的耦合性會很大。
3、便於state控制和維護
如果保留組件內部的state，那麼當你在多處調用這個組件的時候，無法有效管理state的變化，而使用redux可以讓state的每一次變化都是可以控制的。
下圖說明了React和Redux的狀態流分別是怎麼樣的

下圖說明了使用Redux管理狀態爲什麼是可預測的

4.3.4、redux的處理流程

[1]redux要做的事情，就是通過action去控制每一個state的狀態變化，把所有state放到store上，交給reducer去管理，這樣就能確保每一個state的變化是可預測的。
[2]組件內部應該是純淨的，任何狀態的變化都需要dispatch一個action去更新state，然後重新渲染更新的部分，並不會重新渲染所有的View。

4.3.5、redux中一些重要概念

1、Action
Action是把數據從應用（譯者注：這裏之所以不叫 view 是因爲這些數據有可能是服務器響應，用戶輸入或其它非 view 的數據）傳到 store 的有效載荷。它是 store 數據的唯一來源。一般來說你會通過store.dispatch()將 action 傳到 store。
2、Store
前面我們知道使用action來描述“發生了什麼”，和使用reducers來根據 action 更新 state 的用法。而Store就是把它們聯繫到一起的對象。
3、Provider
Provider是一個普通組件，可以作爲頂層app的分發點，它只需要store屬性就可以了。它會將state分發給所有被connect的組件，不管它在哪裏，被嵌套多少層。
Provider乾的事：接收store，並將store傳到子組件中，當store發生變化時，更新store；所以子組件具有store的dispatch方法。
4、connect
connect是一個方法，我們可以通過export default connect(select)(App) 綁定Redux與React，連接 React 組件與 Redux store。
connect乾的事：定義了一個新的組件Connect，經過一系列的merge後，將各種值掛載props上傳遞到原組件。 Connect組件會保存state狀態，同時監聽Redux Store的變化，從而觸發原組件的更新。
mapStateToProps ：mapStateToProps是一個函數。它的作用就是像它的名字那樣，建立一個從（外部的）state對象到（UI 組件的）props對象的映射關係。作爲函數，mapStateToProps執行後應該返回一個對象，裏面的每一個鍵值對就是一個映射。請看下面的例子：

export default connect((state) => {
return {
        mainStore: state.mainStore,
    }
})(PageMain);

mapStateToProps會訂閱 Store，每當state更新的時候，就會自動執行，重新計算 UI 組件的參數，從而觸發 UI 組件的重新渲染。
connect方法可以省略mapStateToProps參數，那樣的話，UI 組件就不會訂閱Store，就是說 Store 的更新不會引起 UI 組件的更新。

react-native-redux 簡易教程

一、React-Native介紹

二、環境搭建

三、Android中集成React-Native

四、React-Native工程介紹

4.1、工程目錄

4.2、react-native

4.2.1、react-native的生命週期

4.2.2、hello world

4.2.3、props和state

4.2.4、簡易計數器

4.3、react與redux

4.3.1、安裝redux依賴包

4.3.2、Redux 簡介

4.3.3、爲什麼要用redux

4.3.4、redux的處理流程

4.3.5、redux中一些重要概念

測試人員都是畫畫大神，讓我看看誰還不會用代碼圖？

Android自定義控件-彩虹條進度條

SVN的branch tag trunk的用法詳解

搭建本地SVN服務器完整流程

自定義滾輪WheelView源碼全方位分析

源碼分析爲什麼requestDisallowInterceptTouchEvent(true)能阻止父View攔截事件

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結