国产精品扒开腿做爽爽爽日本无码 ,吃什么药能延时增硬持久,国产亚洲精品久久久久久郑州

對于沒JS以及React開發經驗的人（比如我T_T），感覺還是需要簡單了解下React Native所應用到的最基礎的JS及React知識，才能更近一步地進行React Native開發。

JS_React(圖片自p哈哈哈).png

一、JavaScript基礎

1. 什么是JavaScript？

JS是一個輕量級的，解釋型的講函數視為一級公民的程序設計語言。他是一種基于原型的多范式動態腳本語言，支持面向對象，命令式編程和函數式編程。

JavaScript的標準是 ECMAScript，React Native的語法是基于ECMAScript 6，簡稱ES6.（下面文章內容主要是以ES6為標準介紹）

JS的組成：
a) 核心（ECMAScript）：描述了該語言的語法和基本對象。擔當的是一個翻譯的角色；是一個解釋器；幫助計算機來讀懂我們寫的程序；實現加減乘除, 定義變量；
b) 文檔對象模型（DOM）：描述了處理網頁內容的方法和接口。文檔指的就是網頁；把網頁變成一個JS可以操作的對象；給了JS可以操作頁面元素的能力；
c) 瀏覽器對象模型（BOM）：描述了與瀏覽器進行交互的方法和接口。給了JS操作瀏覽器的能力；

2. JS的基礎知識

1) 聲明變量，常量

var 聲明變量，可以在聲明的時候初始化為一個值
let 聲明塊范圍局部變量，可以在聲明的時候初始化一個值
const 聲明一個只讀常量(和let一樣只在塊級作用域之內有效）

命名規范：命名要以數字字母下劃線開頭。
注意點：

JS是大小寫敏感的
JS是一個動態類型語言(dynamically typed language)中，所以變量不需聲明類型，必要的時候自動轉換

舉例：

var mainText = "稀飯"
var subText = "歡迎閱讀"

調用和顯示(在render函數中返回)：

return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          {mainText}
        </Text>
        <Text  style={[styles.instructions, {backgroundColor: 'green'}]}>
          {subText}
        </Text>
      </View>
    );

常量可以看到index.ios.js文件最下面有類似，styles就是一個常量：

const styles = StyleSheet.create({....

常量在聲明的時候，必須初始化。

在JS中，{} 大括號，表示定義一個對象，大部分情況下要有成對的屬性和值，或是函數。
1）{mainText}代表一個JS對象，在<Text>顯示mainText的內容而不是現實'mainText'字符串。
2）style={[styles.instructions, {backgroundColor: 'green'}]}中，{[...]}為一個數組對象，styles.instructions和{backgroundColor: 'green'}均表示一個JS對象，為數組元素。

2) 流程控制

if,else
switch
for
while
break
continue
這個各個語言大同小異，特殊點：JS中的Switch Case中可以是String

3) 注釋

// 這是一個單行注釋.

/* 這是一個多行注釋。
   它可以是任意長度，
   你可以在這里隨便寫什么。 
*/

4) Promises

** JS本身是單線程的語言，它要實現異步都是通過回調函數來實現的。**
從ES6開始，JS中引入了Promises來處理異步和延遲操作，在React Native的網絡請求中是很常見的。
Promises交互主要通過它的then方法，then方法接受一個回調函數，這個回調函數接受執行成功的返回值或執行失敗的錯誤原因，錯誤原因一般是Error對象。需要注意的是，then方法執行的返回值是一個Promise對象，而then方法接受的回調函數的返回值則可以是任意的JavaScript對象，包括Promises。

例子（簡單get網絡請求）：

fetch(url)
    .then((response) => response.text())
    .then((responseText) => {
      callback1(JSON.parse(responseText));
    })
    .catch((error) => {
      callback2(JSON.parse(error));
    })
    .done();
  }

一個promise有以下幾種狀態:

pending，最初的狀態
fulfilled，執行成功
rejected，執行出錯
settled，執行結束了，失敗(rejected)或者成功(fulfilled)

控制圖如下：

控制圖.png

目前對promise的理解還停留在網絡請求以及在與原生交互的應用上。
這里有一篇推薦的文章，寫得像小說一樣去理解promise，讀讀也不錯：
ES6 JavaScript Promise的感性認知
也有正常些的文章：初識JavaScript Promises

5) 函數

函數的定義如下，由function關鍵字聲明，在()添加輸入，輸入不需要聲明類型

//在class外，這樣的方法是定義在全局的
function globalFunction(input){
    console.log(input);
}

//在class內，當在類中定義的時候，不需要funciton關鍵字
//通過this.functionName來訪問
var mainText = "點擊屏幕任意位置"
class JSReactBasics extends Component {
  render() {
    return (
      <TouchableHighlight
        onPress={() => this.backgorundClicked()}
        underlayColor = '#ddd'
        style = {styles.container}
        >
        <Text style={styles.welcome}>{mainText}</Text>
      </TouchableHighlight>
    );
  }
  backgorundClicked(){
    console.log("類中的方法");
  }
}

6) 箭頭函數(Arrow functions)

箭頭函數=>無疑是ES6中最受關注的一個新特性了，通過它可以簡寫 function 函數表達式，你也可以在各種提及箭頭函數的地方看到這樣的觀點——“=> 就是一個新的 function”。

onPress={() => this.backgorundClicked()}

這里onPress是一個函數類型（在JS中，函數本身也是一種類型）。這其實是JS中的箭頭函數，他提供了一種更簡潔的函數表達方式。

var a2 = a.map(function(s){ return s.length });
var a3 = a.map( (s) => s.length );
console.log(a2);
console.log(a3);

可以看到兩個log的內容是一樣的。(s)用來描述參數，=>后的表示方法的執行體。學過Swift的童鞋，會發現和Swift的必包很像。

注意：
this，在一個類中的不同地方，比如閉包函數中，this的指向并不都是這個類的實例。（經常出問題的地方，需不需要.bind(this)）
普通函數.bind(this) 來把內部函數中的 this 綁定到了外部函數去。
箭頭函數里的this還是原來的this，不需要額外綁定。

7) 模板字符串

ES6 中引進的一種新型的字符串字面量語法 - 模板字符串。書面上來解釋，模板字符串是一種能在字符串文本中內嵌表示式的字符串字面量。簡單來講，就是增加了變量功能的字符串。

模板字符串使用反引號`來代替普通字符串中的用雙引號和單引號。模板字符串可以包含特定語法(${expression})的占位符。占位符中的表達式和周圍的文本會一起傳遞給一個默認函數，該函數負責將所有的部分連接起來。

var name = '丁香醫生';
var desc = '丁香醫生是面向大眾的科普性健康類網站';

//Before ES6 字符串拼接
var html = function(name, desc){
    var tpl = '公司名：' + name + '\n'+
            '簡介：'+ desc;
    return tpl;
}

//ES6 字符串拼接
var html = `公司名：${name}   
簡介：${desc}`;

3. 數據結構和類型

1) 基本數據類型:

Boolean，布爾值，true或者false
null，一個表明null的特殊關鍵字，注意JS中大小寫敏感，null和NULL是完全不同的東西
undefined.變量未定義的屬性 (兩種情況：1是真的沒有定義， 2是雖然定義了，但沒有賦值；)
Number，數字
String，字符串
**Symbol **，ES6中新增的，唯一不可變的
Object 對象是一個復合類型，它是由一組基本類型組成的；如：div，它是一個對象，它有id,width等特性，它的id是string的，width是number的；

以下值在JS中是會識別為false:

false
undefined
null
0
NaN
空字符串 ("")

2) 變量類型轉換

檢測變量類型： typeof()

parseInt()：從字符串中提取數字；
NaN：not a number;
i. NaN 和任何數計算都是NaN;
ii. NaN 不與任何值相等，包括它自身；要比較需要使用方法isNaN();
顯性類型轉換：
i. parseInt()/ parseFloat();
ii. NaN 的意義和檢測：
意義：not a number;
檢測：isNaN();
隱式類型轉換：
i. "==" ,就是隱式轉換，它會先把兩邊的東西轉成一樣的類型，然后再進行比較；
ii. 減法、乘法、除法也會進行自發的隱式轉換；只有加號不可以；

3) 數組

可以由以下三種方式創建數組，訪問數組的方式還是通過角標來訪訪問：

var a = ["1","2","3","4"];
var b = new Array("1","2","3","4")
var c = Array("1","2","3","4")
console.log(a[1]);

數組有一些方便的方法，例如合并，排序，檢索等，可以在MDN上找到

4) 字典Maps(相當于iOS中的NSDictionary）

var map = {"key1":"value1","key2":"value2"}
var map = {"key1":"value1","key2":"value2"}
map["key4"] = "value4"
console.log(map["key1"])
console.log(map["key4"])

5) 對象

JS中的對象的屬性可以不先聲明，而在運行時候動態添加，例如:

var obj = new Object()
obj.name = "1234"
console.log(obj.name);

所以，在React Native中，寫代碼的時候，存儲數據直接this.propertyName ＝即可

4. JavaScript是基于原型的面對象語言

理解這一點，對使用JS開發還是比較重要的。
像Java，Objective C，C＋＋都是基于類的面向對象語言。
面向對象語言有兩個:

基于類的面向對象語言主要有兩個概念

類(class),定義了一組具有某一類特征的事務。類是抽象的，比如鳥類
實例（instance），實體是類的實體話提現，比如一只鳥

基于原型的面向對象

基于原型的面向對象語言并不存在這種區別，基于原型的面向對象語言所有的都是對象。基于原型的面向對象語言有一個概念叫做原型對象,古代有一種東西叫做活字印刷術，那一個個字的模版就是這里的原型對象。

React Native引入了基于類的面向對象編程概念，這個在后面講解React基礎的時候來介紹

通過比較Java和JS可以了解二者的區分

二、React基礎

1. 什么是React？

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES（一個JavaScript的用來創建界面的庫）

通過名字就可以看出來，ReactNative是基于React來寫的支持編寫原生App的框架。

2. React的基礎知識

1) React

React是整個React框架的入口

2) React.Component

Component是React類的基類，類似于iOS的UIView和Android的View,React和React native都定義了很多方便的子類來給開發者使用。

3) React.createClass

創建一個Component

4) Component 相關對象方法

render
調用React.createClass或者讓一個類繼承自class JSReactBasics extends Component都是需要提供render函數的。這個函數返回一個根的視圖，用來渲染實際的Component可視部分，如下：

render() 中返回的的 JSX 模板需要一個根元素包裹起來

render() {
    return (
      <TouchableHighlight
        onPress={() => this.backgorundClicked()}
        underlayColor = '#ddd'
        style = {styles.container}
        >
        <Text style={styles.welcome}>{mainText}</Text>
      </TouchableHighlight>
    );
  }

getInitialState()
在Component被加載之前調用一次，這個方法的返回值回被設置為this.state

Tips:這個方法只能在用React.createClass創建的時候使用，例如，在我們示例代碼中，加入一個方法

getInitialState(){
    return {key:"value"}
  }

getDefaultProps()
在Class 創建的時候，調用一次，這個方法在調用的時候，任何實例還沒有被創建。還有一點要注意，這個方法返回的任何Object 對象，在各個實例中是共享的，而不是每個實例一個copy。

5) statics

statics對象，用來定義Components可以調用的靜態方法，例如

var MyComponent = React.createClass({
  statics: {
    customMethod: function(foo) {
      return foo === 'bar';
    }
  },
  render: function() {
  }
});

MyComponent.customMethod('bar');  // true

3. 組件的生命周期

個人覺得React Native最核心的概念就是組件了，因此一定需要去理清組件的運作方式，即組件的生命周期，這樣才能更合理地去實際應用。
因為組件的生命周期網上有好多好多類似的文章都有詳細的描述，這篇文章的內容又已經太多了，所以這里留下一圖一表供簡單的理解，會在下一篇文章結合ES6對組件的生命周期進行詳細描述。

組件的生命周期.png

|生命周期 |調用次數 |能否使用 setSate() |
|: ------:|:------:|:------:|
|defaultProps / getDefaultProps| 1(全局調用一次) | 否
|constructor / getInitialState |1 |否
|componentWillMount |1 |是
|render |>=1 |否
|componentDidMount |1 |是
|componentWillReceiveProps |>=0 |是
|shouldComponentUpdate |>=0 |否
|componentWillUpdate |>=0 |否
|componentDidUpdate |>=0 |否
|componentWillUnmount |1 |否

本文極大的參考了另外一篇文章的篇寫，自己也添加了自己的見解和進一步的整理，感謝原文：http://blog.csdn.net/hello_hwc/article/details/51199384

這篇文章整理了下自從入門React Native之后所遇到的關于JS和React基礎的知識點，還記得一開始的時候是懵噠到{{}}為啥要這樣做都完全不知道，函數也不會調用，總是有this為空，該bind的時候沒bind，不該的時候又bind了。。。等等一大堆問題，所以還是覺得先理解好一些最基本的東西才能進行更好的開發。

正在寫React Native的學習教程ing，是一邊研究一邊編寫的，已有的成果如下：
1) React Native 簡介與入門
 2) React Native 環境搭建和創建項目(Mac)
3) React Native 開發之IDE
4) React Native 入門項目與解析

React Native 相關JS和React基礎
6) React Native 組件生命周期(ES6)
7) React Native 集成到原生項目(iOS)
8) React Native 與原生之間的通信(iOS)
9) React Native 封裝原生ＵI組件(iOS)

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

5) React Native 相關JS和React基礎

5) React Native 相關JS和React基礎

一、JavaScript基礎

1. 什么是JavaScript？

2. JS的基礎知識

1) 聲明變量，常量

2) 流程控制

3) 注釋

4) Promises

5) 函數

6) 箭頭函數(Arrow functions)

7) 模板字符串

3. 數據結構和類型

1) 基本數據類型:

2) 變量類型轉換

3) 數組

4) 字典Maps(相當于iOS中的NSDictionary）

5) 對象

4. JavaScript是基于原型的面對象語言

二、React基礎

1. 什么是React？

2. React的基礎知識

1) React

2) React.Component

3) React.createClass

4) Component 相關對象方法

5) statics

3. 組件的生命周期

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

5) React Native 相關JS和React基礎

一、JavaScript基礎

1. 什么是JavaScript？

2. JS的基礎知識

1) 聲明變量，常量

2) 流程控制

3) 注釋

4) Promises

5) 函數

6) 箭頭函數(Arrow functions)

7) 模板字符串

3. 數據結構和類型

1) 基本數據類型:

2) 變量類型轉換

3) 數組

4) 字典Maps(相當于iOS中的NSDictionary）

5) 對象

4. JavaScript是基于原型的面對象語言

二、React基礎

1. 什么是React？

2. React的基礎知識

1) React

2) React.Component

3) React.createClass

4) Component 相關對象方法

5) statics

3. 組件的生命周期

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频