写蓝牙 用nativejs 设备连接
2018-06-06 17:39:00 weixin_34252090 阅读数 38

{(this.state.helps!==null&&this.state.helps!=undefined&&this.state.helps.length>=1)?
                                  this.state.helps.map( (item,index,input) => {return (

                                    <View key={index} style={{
                                        flex:1,
                                        flexDirection: 'column',
                                        alignItems: 'center',
                                        backgroundColor: '#fff',
                                        paddingTop:10,
                                        paddingBottom:10,
                                        marginTop:10,
                                      }}>
                                      <View style={{flex:1,flexDirection:'row',}}>
                                        <View style={{flex:2,alignItems:'flex-end',}} >
                                            <Text style={{color:'gray', fontSize: 16}}>{item.type===1?'问需内容':'个案内容'}:  </Text>
                                        </View>
                                        <View style={{flex:3,alignItems:'flex-start', }}>
                                            <Text style={{color:'gray', paddingRight:10, fontSize: 16}}>{StringUtils.isEmpty(item.content)?'未知':item.content}</Text>
                                        </View>
                                        </View>




                                        

                                      </View>

                                    )} )



                                      :

                                      <View style={{
                                          flex:1,
                                          flexDirection: 'column',
                                          alignItems: 'center',
                                          backgroundColor: '#fff',
                                          alignItems:'center',
                                          paddingTop:10,
                                          paddingBottom:10,
                                          marginTop:10,
                                          marginBottom:10,
                                        }}>
                                            <Text style={{color:'gray', fontSize: 16}}>暂无</Text>
                                        </View>

                                        }

2017-05-18 18:05:11 yshr1991 阅读数 482
  1. JS中是会识别为false的值:

    undefined null 0 NaN 空字符串 (“”)

  2. 这样的方法是定义在全局的,当在类中定义的时候,不需要funciton关键字
    通过this.functionName来访问
    class JSReactBasics extends Component {
    render() {
    return (
    this.backgorundClicked()}
    underlayColor = ‘#ddd’
    style = {styles.container}


    {mainText}


    );
    }
    backgorundClicked(){
    console.log(“类中的方法”);
    }
    }

  3. 箭头函数(Arrow functions)
    没接触过JS的同学可能会对
    onPress={() => this.backgorundClicked()
    这一行感到很奇怪,其实这里onPress是一个函数类型(在JS中,函数本身也是一种类型)。这其实是JS中的箭头函数,他提供了一种更简洁的函数表达方式
    修改backgorundClicked,为如下内容
    backgorundClicked(){
    var a = [
    "Hydrogen",
    "Helium",
    "Lithium",
    "Beryl-lium"
    ];
    var a2 = a.map(function(s){ return s.length });
    var a3 = a.map( (s) => s.length );
    console.log(a2);
    console.log(a3);
    }

    然后,save,Commnad+R刷新,可以看到两个log的内容是一样的。也就是说,(s)用来描述参数,=>后的表示方法的执行体。学过Swift的童鞋,会发现和Swift的必包很像。

  4. 数组
    可以由以下三种方式创建数组,访问数组的方式还是通过角标来访访问
    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上找到

  5. 字典Maps
    var map = {“key1”:”value1”,”key2”:”value2”}
    map[“key4”] = “value4”
    console.log(map[“key1”])
    console.log(map[“key4”])

    1. JavaScript是基于原型的面对象语言

理解这一点,对使用JS开发还是比较重要的。
像Java,Objective C,C++都是基于类的面向对象语言,面向对象语言有两个,基于类的面向对象语言主要有两个概念

类(class),定义了一组具有某一类特征的事务。类是抽象的,比如鸟类 实例(instance),实体是类的实体话提现,比如一只鸟
基于原型的面向对象

基于原型的面向对象语言并不存在这种区别,基于原型的面向对象语言所有的都是对象。基于原型的面向对象语言有一个概念叫做原型对象,古代有一种东西叫做活字印刷术,那一个个字的模版就是这里的原型对象。
Tips:React Native引入了基于类的面向对象编程概念,这个在后面讲解React基础的时候来介绍

通过比较Java和JS可以了解二者的区分

基于类的(Java) 基于原型的(JavaScript)
类和实例是不同的事物。 所有对象均为实例。
通过类定义来定义类;通过构造器方法来实例化类。 通过构造器函数来定义和创建一组对象。
通过 new 操作符创建单个对象。 相同。
通过类定义来定义现存类的子类,从而构建对象的层级结构。 指定一个对象作为原型并且与构造函数一起构建对象的层级结构
遵循原型链继承属性。 构造器函数或原型指定初始的属性集。允许动态地向单个的对象或者整个对象集中添加或移除属性。

未完,待续~~~

2017-01-18 09:25:41 useruser19900720 阅读数 760

转自:http://blog.csdn.net/hello_hwc/article/details/51199384

准备工作

先安装React Native,然后初始化一个示例工程

react-native init JSReactBasics
  • 1
  • 1

会生成如下一个目录 

然后,XCode打开JSReactBasics.xcodeproj,运行模拟器会看到如下截图

本文,示例代码都是修改的index.ios.js,每次修改后选择保存。Command + R就可以动态刷新了。

默认创建的index.ios.js如下

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
//导入一些必要的模块
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View
} from 'react-native';
//类,这是默认的载入类,继承自Component,Component类似于Android和iOS中的View
class JSReactBasics 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.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake 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('JSReactBasics', () => JSReactBasics);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53

什么是JavaScript?

JS是一个轻量级的,解释型的讲函数视为一级公民的程序设计语言。他是一种基于原型的多范式动态脚本语言,支持面向对象,命令式编程和函数式编程。

JavaScript的标准是 ECMAScript,React Native的语法是基于ECMAScript 6,简称ES6.

Tips:Java和JavaScript语法很像,但是用处完全不同,而且也是两个几乎没关系的东西

关于Java和JS的区分,可以见如下表

JavaScript Java
面向对象。不区分对象类型。通过原型机制继承,任何对象的属性和方法均可以被动态添加。 基于类系统。分为类和实例,通过类层级的定义实现继承。不能动态增加对象或类的属性或方法
变量类型不需要提前声明(动态类型)。 变量类型必须提前声明(静态类型)。
不能直接自动写入硬盘。 可以直接自动写入硬盘

JS的基础知识

声明

  • var 声明变量,可以在声明的时候初始化为一个值
  • let 声明块范围局部变量,可以在声明的时候初始化一个值
  • const 声明一个只读常量

Tips:JS是大小写敏感的

变量,常量

  • 命名要以数字字母下划线开头 
    例如,在class ReactJSBasics上添加两行
var mainText = "来自Leo的博客"
var subText = "欢迎阅读"
  • 1
  • 2
  • 1
  • 2

Tips:JS是一个动态类型语言(dynamically typed language)中,所以变量不需声明类型,必要的时候自动转换

然后,让Text来显示这个这两个变量

return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          {mainText}
        </Text>
        <Text style={styles.instructions}>
          {subText}
        </Text>
      </View>
    );
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

然后save,选择模拟器,Command+R刷新,会看到截图如下 

常量可以看到index.ios.js文件最下面有类似

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

就是一个常量。在声明的时候,必须初始化

数据结构和类型

六种基本的原型数据类型

  • Boolean,布尔值,true或者false
  • null,一个表明null的特殊关键字,注意JS中大小写敏感,null和NULL是完全不同的东西
  • undefined.变量为定义的属性
  • Number,数字
  • String,字符串
  • Symbol ,ES6中新增的,唯一不可变的

以及Object类型

流程控制

  • if,else
  • switch
  • for
  • while
  • break
  • continue

这个各个语言大同小异,不浪费篇幅了,有一点要提一下,JS中的Switch Case中可以是String

有一点要注意,以下值在JS中是会识别为false

false
undefined
null
0
NaN
空字符串 ("")
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

注释

// 这是一个单行注释.

/* 这是一个多行注释。它可以是任意长度,你可以在这里随便写什么。 */
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

Promises

从ES6开始,JS中引入了Promises来处理异步和延迟操作,在React Native的网络请求中是很常见的。

一个promise有以下几种状态

  • pending,最初的状态
  • fulfilled,执行失败
  • rejected,执行成功
  • settled,执行结束了,失败(rejected)或者成功(fulfilled)

控制图如下

函数

函数的定义如下,由function关键字声明,在()添加输入,输入不需要声明类型

function globalFunction(input){
    console.log(input);
}
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

我们接着上述的工程,添加一个可点击的TouchableHighLight 
在import中,添加一行

  TouchableHighlight
  • 1
  • 1

重新定义变量和类的内容

var mainText = "点击屏幕任意位置"
function globalFunction(input){
    console.log(input);
}
class JSReactBasics extends Component {
  render() {
    return (
      <TouchableHighlight
        onPress={() => globalFunction("输入")}
        underlayColor = '#ddd'
        style = {styles.container}
        >
        <Text style={styles.welcome}>{mainText}</Text>
      </TouchableHighlight>
    );
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

然后,save,command+R刷新,再点击屏幕任意位置,会发现如下log 
 
这样的方法是定义在全局的,当在类中定义的时候,不需要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("类中的方法");
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

箭头函数(Arrow functions)

没接触过JS的同学可能会对

onPress={() => this.backgorundClicked()
  • 1
  • 1

这一行感到很奇怪,其实这里onPress是一个函数类型(在JS中,函数本身也是一种类型)。这其实是JS中的箭头函数,他提供了一种更简洁的函数表达方式 
修改backgorundClicked,为如下内容

  backgorundClicked(){
    var a = [
      "Hydrogen",
      "Helium",
      "Lithium",
      "Beryl­lium"
    ];
    var a2 = a.map(function(s){ return s.length });
    var a3 = a.map( (s) => s.length );
    console.log(a2);
    console.log(a3);
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

然后,save,Commnad+R刷新,可以看到两个log的内容是一样的。也就是说,(s)用来描述参数,=>后的表示方法的执行体。学过Swift的童鞋,会发现和Swift的必包很像。

数组

可以由以下三种方式创建数组,访问数组的方式还是通过角标来访访问

    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]);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

数组有一些方便的方法,例如合并,排序,检索等,可以在MDN上找到 

字典Maps

    var map = {"key1":"value1","key2":"value2"}
    var map = {"key1":"value1","key2":"value2"}
    map["key4"] = "value4"
    console.log(map["key1"])
    console.log(map["key4"])
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

对象

JS中的对象的属性可以不先声明,而在运行时候动态添加,例如

     var obj = new Object()
     obj.name = "1234"
     console.log(obj.name);
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

所以,在React Native中,写代码的时候,存储数据直接this.propertyName =即可


JavaScript是基于原型的面对象语言

理解这一点,对使用JS开发还是比较重要的。 
像Java,Objective C,C++都是基于类的面向对象语言,面向对象语言有两个,基于类的面向对象语言主要有两个概念

  • 类(class),定义了一组具有某一类特征的事务。类是抽象的,比如鸟类
  • 实例(instance),实体是类的实体话提现,比如一只鸟

基于原型的面向对象

  • 基于原型的面向对象语言并不存在这种区别,基于原型的面向对象语言所有的都是对象。基于原型的面向对象语言有一个概念叫做原型对象,古代有一种东西叫做活字印刷术,那一个个字的模版就是这里的原型对象。

Tips:React Native引入了基于类的面向对象编程概念,这个在后面讲解React基础的时候来介绍

通过比较Java和JS可以了解二者的区分

基于类的(Java) 基于原型的(JavaScript)
类和实例是不同的事物。 所有对象均为实例。
通过类定义来定义类;通过构造器方法来实例化类。 通过构造器函数来定义和创建一组对象。
通过 new 操作符创建单个对象。 相同。
通过类定义来定义现存类的子类,从而构建对象的层级结构。 指定一个对象作为原型并且与构造函数一起构建对象的层级结构
遵循原型链继承属性。 构造器函数或原型指定初始的属性集。允许动态地向单个的对象或者整个对象集中添加或移除属性。

什么是React?

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES(一个JavaScript的用来创建界面的库)

Tips:通过名字就可以看出来,ReactNative是基于React来写的支持编写原生App的框架


React的基础知识

React

React是整个React框架的入口

React.Component 

Component是React类的基类,类似于iOS的UIView和Android的View,React和React native都定义了很多方便的子类来给开发者使用。

React.createClass

创建一个Component

Component 相关对象方法

render

调用React.createClass或者让一个类继承自class JSReactBasics extends Component都是需要提供render函数的。这个函数返回一个根的视图,用来渲染实际的Component可视部分,例如例子中的,

  render() {
    return (
      <TouchableHighlight
        onPress={() => this.backgorundClicked()}
        underlayColor = '#ddd'
        style = {styles.container}
        >
        <Text style={styles.welcome}>{mainText}</Text>
      </TouchableHighlight>
    );
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

getInitialState()

在Component被加载之前调用一次,这个方法的返回值回被设置为this.state

Tips:这个方法只能在用React.createClass创建的时候使用,例如,在我们示例代码中,加入一个方法

  getInitialState(){
    return {key:"value"}
  }
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

会提示如下警告 

getDefaultProps()

在Class 创建的时候,调用一次,这个方法在调用的时候,任何实例还没有被创建。还有一点要注意,这个方法返回的任何Object 对象,在各个实例中是共享的,而不是每个实例一个copy。

statics

statics对象,用来定义Components可以调用的静态方法,例如

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

MyComponent.customMethod('bar');  // true
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

生命周期

componentWillMount

在最初的渲染之前调用一次,在React中,设置this.state会导致重新渲染,但是componentWillMount设置this.state并不会对导致render调用多次

componentDidMount

在渲染结束后,调用一次

componentWillReceiveProps

在component接收到新的参数前调用,在这个方法中调用this.setState不会触发二次渲染,第一次渲染的时候不会调用这个方法

shouldComponentUpdate

boolean shouldComponentUpdate(
  object nextProps, object nextState
)
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

在每次重新触发渲染之前调用,其中nextPropsnextState分别对应下一个状态的参数和状态对象。可以在这个方法中返回false来取消本次渲染。 
例如

shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id;
}
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

componentWillUpdate

在重新渲染之前调用 
Warning:这个方法里不能调用this.setState()否则会陷入死循环

componentDidUpdate

在渲染之后调用

componentWillUnmount

在被删除之前调用

为了更好的理解生命周期,我们来用React的风格重写示例代码 
重写整个类

var JSReactBasics = React.createClass({
  getInitialState(){
    console.log("getInitialState");
   return {key:"点击屏幕任意位置"}//设置最初的值
  },
  componentWillMount(){
    console.log("componentWillMount");
  },
  componentDidMount(){
    console.log("componentDidMount");
  },
  shouldComponentUpdate(nextProps,nextState){
    console.log("shouldComponentUpdate");
    return true
  },
  componentWillUpdate(nextProps,nextState){
    console.log("componentWillUpdate");
  },
  componentDidUpdate(prevProps,prevState){
    console.log("componentDidUpdate");
  },
  render() {
    return (
      <TouchableHighlight
        onPress={() => this.backgorundClicked()}
        underlayColor = '#ddd'
        style = {styles.container}
        >
        <Text style={styles.welcome}>{this.state.key}</Text>
      </TouchableHighlight>
    );
  },
  backgorundClicked(){
    this.setState({
      key:"设置了新的值"
    });
  }
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38

然后,save,Command+R,会看到Log以及效果 

2016-04-20 16:06:52.904 [info][tid:com.facebook.react.JavaScript] getInitialState
2016-04-20 16:06:52.904 [info][tid:com.facebook.react.JavaScript] componentWillMount
2016-04-20 16:06:52.909 [info][tid:com.facebook.react.JavaScript] componentDidMount
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

然后,点击屏幕任何位置,会看到Log和截图 

2016-04-20 16:08:23.704 [info][tid:com.facebook.react.JavaScript] shouldComponentUpdate
2016-04-20 16:08:23.704 [info][tid:com.facebook.react.JavaScript] componentWillUpdate
2016-04-20 16:08:23.707 [info][tid:com.facebook.react.JavaScript] componentDidUpdate
  • 1
  • 2
  • 3
2016-08-29 18:20:00 weixin_34405354 阅读数 3

前言

想来想去,还是需要写一篇文章来介绍下JavaScript和React的基本知识。最初开发ReactNative的时候,完全没接触过React,大学那会简单学了点JS。毕业后一直在某五百强外企上班。做的东西也乱七八糟的,搞过大数据,搞过物联网,不过看我博客的同学应该知道,我对iOS和Android还是比较喜欢的。所以,博客都是写的都是移动端的东西。好像扯的有点多了,本文的目的就是为了那些JS和React小白提供一个快速入门,能够在看React Native语法的时候能够不那么吃力,有过JS经验的同学可以直接略过了

准备工作

先安装React Native,然后初始化一个示例工程

react-native init JSReactBasics
  • 1
  • 1

会生成如下一个目录 
20160420113514955

然后,XCode打开JSReactBasics.xcodeproj,运行模拟器会看到如下截图

本文,示例代码都是修改的index.ios.js,每次修改后选择保存。Command + R就可以动态刷新了。

默认创建的index.ios.js如下

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
//导入一些必要的模块
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View
} from 'react-native';
//类,这是默认的载入类,继承自Component,Component类似于Android和iOS中的View
class JSReactBasics 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.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake 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('JSReactBasics', () => JSReactBasics);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53

什么是JavaScript?

JS是一个轻量级的,解释型的讲函数视为一级公民的程序设计语言。他是一种基于原型的多范式动态脚本语言,支持面向对象,命令式编程和函数式编程。

JavaScript的标准是 ECMAScript,React Native的语法是基于ECMAScript 6,简称ES6.

Tips:Java和JavaScript语法很像,但是用处完全不同,而且也是两个几乎没关系的东西

关于Java和JS的区分,可以见如下表

JavaScript Java
面向对象。不区分对象类型。通过原型机制继承,任何对象的属性和方法均可以被动态添加。 基于类系统。分为类和实例,通过类层级的定义实现继承。不能动态增加对象或类的属性或方法
变量类型不需要提前声明(动态类型)。 变量类型必须提前声明(静态类型)。
不能直接自动写入硬盘。 可以直接自动写入硬盘

JS的基础知识

声明

  • var 声明变量,可以在声明的时候初始化为一个值
  • let 声明块范围局部变量,可以在声明的时候初始化一个值
  • const 声明一个只读常量

Tips:JS是大小写敏感的

变量,常量

  • 命名要以数字字母下划线开头 
    例如,在class ReactJSBasics上添加两行
var mainText = "来自Leo的博客"
var subText = "欢迎阅读"
  • 1
  • 2
  • 1
  • 2

Tips:JS是一个动态类型语言(dynamically typed language)中,所以变量不需声明类型,必要的时候自动转换

然后,让Text来显示这个这两个变量

return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          {mainText}
        </Text>
        <Text style={styles.instructions}>
          {subText}
        </Text>
      </View>
    );
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

然后save,选择模拟器,Command+R刷新,会看到截图如下 
20160420115034380

常量可以看到index.ios.js文件最下面有类似

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

就是一个常量。在声明的时候,必须初始化

数据结构和类型

六种基本的原型数据类型

  • Boolean,布尔值,true或者false
  • null,一个表明null的特殊关键字,注意JS中大小写敏感,null和NULL是完全不同的东西
  • undefined.变量为定义的属性
  • Number,数字
  • String,字符串
  • Symbol ,ES6中新增的,唯一不可变的

以及Object类型

流程控制

  • if,else
  • switch
  • for
  • while
  • break
  • continue

这个各个语言大同小异,不浪费篇幅了,有一点要提一下,JS中的Switch Case中可以是String

有一点要注意,以下值在JS中是会识别为false

false
undefined
null
0
NaN
空字符串 ("")
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

注释

// 这是一个单行注释.

/* 这是一个多行注释。它可以是任意长度,你可以在这里随便写什么。 */
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

Promises

从ES6开始,JS中引入了Promises来处理异步和延迟操作,在React Native的网络请求中是很常见的。

一个promise有以下几种状态

  • pending,最初的状态
  • fulfilled,执行失败
  • rejected,执行成功
  • settled,执行结束了,失败(rejected)或者成功(fulfilled)

控制图如下

20160420122740817

函数

函数的定义如下,由function关键字声明,在()添加输入,输入不需要声明类型

function globalFunction(input){
    console.log(input);
}
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

我们接着上述的工程,添加一个可点击的TouchableHighLight 
在import中,添加一行

  TouchableHighlight
  • 1
  • 1

重新定义变量和类的内容

var mainText = "点击屏幕任意位置"
function globalFunction(input){
    console.log(input);
}
class JSReactBasics extends Component {
  render() {
    return (
      <TouchableHighlight
        onPress={() => globalFunction("输入")}
        underlayColor = '#ddd'
        style = {styles.container}
        >
        <Text style={styles.welcome}>{mainText}</Text>
      </TouchableHighlight>
    );
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

然后,save,command+R刷新,再点击屏幕任意位置,会发现如下log 
20160420133410234 
这样的方法是定义在全局的,当在类中定义的时候,不需要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("类中的方法");
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

箭头函数(Arrow functions)

没接触过JS的同学可能会对

onPress={() => this.backgorundClicked()
  • 1
  • 1

这一行感到很奇怪,其实这里onPress是一个函数类型(在JS中,函数本身也是一种类型)。这其实是JS中的箭头函数,他提供了一种更简洁的函数表达方式 
修改backgorundClicked,为如下内容

  backgorundClicked(){
    var a = [
      "Hydrogen",
      "Helium",
      "Lithium",
      "Beryl­lium"
    ];
    var a2 = a.map(function(s){ return s.length });
    var a3 = a.map( (s) => s.length );
    console.log(a2);
    console.log(a3);
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

然后,save,Commnad+R刷新,可以看到两个log的内容是一样的。也就是说,(s)用来描述参数,=>后的表示方法的执行体。学过Swift的童鞋,会发现和Swift的必包很像。

数组

可以由以下三种方式创建数组,访问数组的方式还是通过角标来访访问

    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]);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

数组有一些方便的方法,例如合并,排序,检索等,可以在MDN上找到

字典Maps

    var map = {"key1":"value1","key2":"value2"}
    var map = {"key1":"value1","key2":"value2"}
    map["key4"] = "value4"
    console.log(map["key1"])
    console.log(map["key4"])
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

对象

JS中的对象的属性可以不先声明,而在运行时候动态添加,例如

     var obj = new Object()
     obj.name = "1234"
     console.log(obj.name);
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

所以,在React Native中,写代码的时候,存储数据直接this.propertyName =即可

JavaScript是基于原型的面对象语言

理解这一点,对使用JS开发还是比较重要的。 
像Java,Objective C,C++都是基于类的面向对象语言,面向对象语言有两个,基于类的面向对象语言主要有两个概念

  • 类(class),定义了一组具有某一类特征的事务。类是抽象的,比如鸟类
  • 实例(instance),实体是类的实体话提现,比如一只鸟

基于原型的面向对象

  • 基于原型的面向对象语言并不存在这种区别,基于原型的面向对象语言所有的都是对象。基于原型的面向对象语言有一个概念叫做原型对象,古代有一种东西叫做活字印刷术,那一个个字的模版就是这里的原型对象。

Tips:React Native引入了基于类的面向对象编程概念,这个在后面讲解React基础的时候来介绍

通过比较Java和JS可以了解二者的区分

基于类的(Java) 基于原型的(JavaScript)
类和实例是不同的事物。 所有对象均为实例。
通过类定义来定义类;通过构造器方法来实例化类。 通过构造器函数来定义和创建一组对象。
通过 new 操作符创建单个对象。 相同。
通过类定义来定义现存类的子类,从而构建对象的层级结构。 指定一个对象作为原型并且与构造函数一起构建对象的层级结构
遵循原型链继承属性。 构造器函数或原型指定初始的属性集。允许动态地向单个的对象或者整个对象集中添加或移除属性。

什么是React?

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES(一个JavaScript的用来创建界面的库)

Tips:通过名字就可以看出来,ReactNative是基于React来写的支持编写原生App的框架

React的基础知识

React

React是整个React框架的入口

React.Component

Component是React类的基类,类似于iOS的UIView和Android的View,React和React native都定义了很多方便的子类来给开发者使用。

React.createClass

创建一个Component

Component 相关对象方法

render

调用React.createClass或者让一个类继承自class JSReactBasics extends Component都是需要提供render函数的。这个函数返回一个根的视图,用来渲染实际的Component可视部分,例如例子中的,

  render() {
    return (
      <TouchableHighlight
        onPress={() => this.backgorundClicked()}
        underlayColor = '#ddd'
        style = {styles.container}
        >
        <Text style={styles.welcome}>{mainText}</Text>
      </TouchableHighlight>
    );
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

getInitialState()

在Component被加载之前调用一次,这个方法的返回值回被设置为this.state

Tips:这个方法只能在用React.createClass创建的时候使用,例如,在我们示例代码中,加入一个方法

  getInitialState(){
    return {key:"value"}
  }
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

会提示如下警告 
20160420153521643

getDefaultProps()

在Class 创建的时候,调用一次,这个方法在调用的时候,任何实例还没有被创建。还有一点要注意,这个方法返回的任何Object 对象,在各个实例中是共享的,而不是每个实例一个copy。

statics

statics对象,用来定义Components可以调用的静态方法,例如

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

MyComponent.customMethod('bar');  // true
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

生命周期

componentWillMount

在最初的渲染之前调用一次,在React中,设置this.state会导致重新渲染,但是componentWillMount设置this.state并不会对导致render调用多次

componentDidMount

在渲染结束后,调用一次

componentWillReceiveProps

在component接收到新的参数前调用,在这个方法中调用this.setState不会触发二次渲染,第一次渲染的时候不会调用这个方法

shouldComponentUpdate

boolean shouldComponentUpdate(
  object nextProps, object nextState
)
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

在每次重新触发渲染之前调用,其中nextPropsnextState分别对应下一个状态的参数和状态对象。可以在这个方法中返回false来取消本次渲染。 
例如

shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id;
}
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

componentWillUpdate

在重新渲染之前调用 
Warning:这个方法里不能调用this.setState()否则会陷入死循环

componentDidUpdate

在渲染之后调用

componentWillUnmount

在被删除之前调用

为了更好的理解生命周期,我们来用React的风格重写示例代码 
重写整个类

var JSReactBasics = React.createClass({
  getInitialState(){
    console.log("getInitialState");
   return {key:"点击屏幕任意位置"}//设置最初的值
  },
  componentWillMount(){
    console.log("componentWillMount");
  },
  componentDidMount(){
    console.log("componentDidMount");
  },
  shouldComponentUpdate(nextProps,nextState){
    console.log("shouldComponentUpdate");
    return true
  },
  componentWillUpdate(nextProps,nextState){
    console.log("componentWillUpdate");
  },
  componentDidUpdate(prevProps,prevState){
    console.log("componentDidUpdate");
  },
  render() {
    return (
      <TouchableHighlight
        onPress={() => this.backgorundClicked()}
        underlayColor = '#ddd'
        style = {styles.container}
        >
        <Text style={styles.welcome}>{this.state.key}</Text>
      </TouchableHighlight>
    );
  },
  backgorundClicked(){
    this.setState({
      key:"设置了新的值"
    });
  }
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38

然后,save,Command+R,会看到Log以及效果 
20160420160919317

2016-04-20 16:06:52.904 [info][tid:com.facebook.react.JavaScript] getInitialState
2016-04-20 16:06:52.904 [info][tid:com.facebook.react.JavaScript] componentWillMount
2016-04-20 16:06:52.909 [info][tid:com.facebook.react.JavaScript] componentDidMount
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

然后,点击屏幕任何位置,会看到Log和截图 
20160420161845255

2016-04-20 16:08:23.704 [info][tid:com.facebook.react.JavaScript] shouldComponentUpdate
2016-04-20 16:08:23.704 [info][tid:com.facebook.react.JavaScript] componentWillUpdate
2016-04-20 16:08:23.707 [info][tid:com.facebook.react.JavaScript] componentDidUpdate
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

后续

从今天十点上班写道下午四点,想了想,应该还有些基础的部分要写的,先发布出来吧,后边继续写。

转载于:https://my.oschina.net/u/2361492/blog/739457

2016-07-22 14:17:00 weixin_33905756 阅读数 18

一、准备工作

先安装React Native,然后初始化一个示例工程

react-native init JSReactBasics

二、什么是JavaScript?

JS是一个轻量级的,解释型的讲函数视为一级公民的程序设计语言。他是一种基于原型的多范式动态脚本语言,支持面向对象,命令式编程和函数式编程。
JavaScript的标准是 ECMAScript,React Native的语法是基于ECMAScript 6,简称ES6.

Tips:Java和JavaScript语法很像,但是用处完全不同,而且也是两个几乎没关系的东西

关于Java和JS的区分,可以见如下表

2093433-b0dab24e148b3685.png

三、JS的基础知识

1、声明

var 声明变量,可以在声明的时候初始化为一个值
let 声明块范围局部变量,可以在声明的时候初始化一个值
const 声明一个只读常量

Tips:JS是大小写敏感的

2、变量,常量

命名要以数字字母下划线开头
例如,在class ReactJSBasics上添加两行

var mainText = "来自Leo的博客"
var subText = "欢迎阅读"

Tips:JS是一个动态类型语言(dynamically typed language)中,所以变量不需声明类型,必要的时候自动转换

然后,让Text来显示这个这两个变量

return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          {mainText}
        </Text>
        <Text style={styles.instructions}>
          {subText}
        </Text>
      </View>
    );

然后save,选择模拟器,Command+R刷新,会看到截图如下

2093433-6931c2d094b4238c.png

常量可以看到index.ios.js文件最下面有类似

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

就是一个常量。在声明的时候,必须初始化

3、数据结构和类型

六种基本的原型数据类型

Boolean,布尔值,true或者false
null,一个表明null的特殊关键字,注意JS中大小写敏感,null和NULL是完全不同的东西
undefined.变量为定义的属性
Number,数字
String,字符串
Symbol ,ES6中新增的,唯一不可变的
以及Object类型

4、流程控制

if,else
switch
for
while
break
continue
这个各个语言大同小异,不浪费篇幅了,有一点要提一下,JS中的Switch Case中可以是String

有一点要注意,以下值在JS中是会识别为false

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

5、注释

// 这是一个单行注释.

/* 这是一个多行注释。它可以是任意长度,你可以在这里随便写什么。 */

6、Promises

从ES6开始,JS中引入了Promises来处理异步和延迟操作,在React Native的网络请求中是很常见的。

一个promise有以下几种状态

pending,最初的状态
fulfilled,执行失败
rejected,执行成功
settled,执行结束了,失败(rejected)或者成功(fulfilled)

控制图如下

2093433-f952347f2d59d956.png

7、函数

函数的定义如下,由function关键字声明,在()添加输入,输入不需要声明类型

function globalFunction(input){
    console.log(input);
}

我们接着上述的工程,添加一个可点击的TouchableHighLight
在import中,添加一行

TouchableHighlight

重新定义变量和类的内容

var mainText = "点击屏幕任意位置"
function globalFunction(input){
    console.log(input);
}
class JSReactBasics extends Component {
  render() {
    return (
      <TouchableHighlight
        onPress={() => globalFunction("输入")}
        underlayColor = '#ddd'
        style = {styles.container}
        >
        <Text style={styles.welcome}>{mainText}</Text>
      </TouchableHighlight>
    );
  }
}

然后,save,command+R刷新,再点击屏幕任意位置,会发现如下log

2093433-2cb092a4ffe37771.png

这样的方法是定义在全局的,当在类中定义的时候,不需要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("类中的方法");
  }
}

8、箭头函数(Arrow functions)

没接触过JS的同学可能会对

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

这一行感到很奇怪,其实这里onPress是一个函数类型(在JS中,函数本身也是一种类型)。这其实是JS中的箭头函数,他提供了一种更简洁的函数表达方式
修改backgorundClicked,为如下内容

 backgorundClicked(){
    var a = [
      "Hydrogen",
      "Helium",
      "Lithium",
      "Beryl­lium"
    ];
    var a2 = a.map(function(s){ return s.length });
    var a3 = a.map( (s) => s.length );
    console.log(a2);
    console.log(a3);
  }

然后,save,Commnad+R刷新,可以看到两个log的内容是一样的。也就是说,(s)用来描述参数,=>后的表示方法的执行体。学过Swift的童鞋,会发现和Swift的必包很像。

9、数组

可以由以下三种方式创建数组,访问数组的方式还是通过角标来访访问

 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上找到

10、字典Maps

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

11、对象

JS中的对象的属性可以不先声明,而在运行时候动态添加,例如

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

所以,在React Native中,写代码的时候,存储数据直接this.propertyName =即可

四、JavaScript是基于原型的面对象语言

理解这一点,对使用JS开发还是比较重要的。

像Java,Objective C,C++都是基于类的面向对象语言,面向对象语言有两个,基于类的面向对象语言主要有两个概念:
1、类(class),定义了一组具有某一类特征的事务。类是抽象的,比如鸟类
2、实例(instance),实体是类的实体话提现,比如一只鸟

基于原型的面向对象:
基于原型的面向对象语言并不存在这种区别,基于原型的面向对象语言所有的都是对象。基于原型的面向对象语言有一个概念叫做原型对象,古代有一种东西叫做活字印刷术,那一个个字的模版就是这里的原型对象。

Tips:React Native引入了基于类的面向对象编程概念,这个在后面讲解React基础的时候来介绍

通过比较Java和JS可以了解二者的区分

2093433-614bcecb6d0fc71b.png

五、什么是React?

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES(一个JavaScript的用来创建界面的库)

Tips:通过名字就可以看出来,ReactNative是基于React来写的支持编写原生App的框架

六、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() {
    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"}
  }

会提示如下警告

2093433-c1856e8dd72175f6.png

getDefaultProps()

在Class 创建的时候,调用一次,这个方法在调用的时候,任何实例还没有被创建。还有一点要注意,这个方法返回的任何Object 对象,在各个实例中是共享的,而不是每个实例一个copy。

statics

statics对象,用来定义Components可以调用的静态方法,例如

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

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

5、生命周期

componentWillMount

在最初的渲染之前调用一次,在React中,设置this.state会导致重新渲染,但是componentWillMount设置this.state并不会对导致render调用多次

componentDidMount

在渲染结束后,调用一次

componentWillReceiveProps

在component接收到新的参数前调用,在这个方法中调用this.setState不会触发二次渲染,第一次渲染的时候不会调用这个方法

shouldComponentUpdate

boolean shouldComponentUpdate(
  object nextProps, object nextState
)

在每次重新触发渲染之前调用,其中nextProps和nextState分别对应下一个状态的参数和状态对象。可以在这个方法中返回false来取消本次渲染。
例如

shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id;
}

componentWillUpdate

在重新渲染之前调用
Warning:这个方法里不能调用this.setState()否则会陷入死循环

componentDidUpdate

在渲染之后调用

componentWillUnmount

在被删除之前调用

为了更好的理解生命周期,我们来用React的风格重写示例代码
重写整个类

var JSReactBasics = React.createClass({
  getInitialState(){
    console.log("getInitialState");
   return {key:"点击屏幕任意位置"}//设置最初的值
  },
  componentWillMount(){
    console.log("componentWillMount");
  },
  componentDidMount(){
    console.log("componentDidMount");
  },
  shouldComponentUpdate(nextProps,nextState){
    console.log("shouldComponentUpdate");
    return true
  },
  componentWillUpdate(nextProps,nextState){
    console.log("componentWillUpdate");
  },
  componentDidUpdate(prevProps,prevState){
    console.log("componentDidUpdate");
  },
  render() {
    return (
      <TouchableHighlight
        onPress={() => this.backgorundClicked()}
        underlayColor = '#ddd'
        style = {styles.container}
        >
        <Text style={styles.welcome}>{this.state.key}</Text>
      </TouchableHighlight>
    );
  },
  backgorundClicked(){
    this.setState({
      key:"设置了新的值"
    });
  }
});

然后,save,Command+R,会看到Log以及效果

2093433-8227fa0e94e344f5.png
2016-04-20 16:06:52.904 [info][tid:com.facebook.react.JavaScript] getInitialState
2016-04-20 16:06:52.904 [info][tid:com.facebook.react.JavaScript] componentWillMount
2016-04-20 16:06:52.909 [info][tid:com.facebook.react.JavaScript] componentDidMount

然后,点击屏幕任何位置,会看到Log和截图

2093433-875476454d698bbc.png
2016-04-20 16:08:23.704 [info][tid:com.facebook.react.JavaScript] shouldComponentUpdate
2016-04-20 16:08:23.704 [info][tid:com.facebook.react.JavaScript] componentWillUpdate
2016-04-20 16:08:23.707 [info][tid:com.facebook.react.JavaScript] componentDidUpdate

参考:http://blog.csdn.net/hello_hwc/article/details/51199384

没有更多推荐了,返回首页