从ES5语法到ES6语法你应该知道这些

2017-03-18 本文已影响986人 Rocdo

最近在学RN，所以就要先来了解一下现在使用ES6编写RN的主流语言了，可是当我从GitHub上下载了一下Demo来学习的时候，我发现有些Demo已经很长时间了，用的都是ES5语法来完成的。而现在许多公司基本都用ES6语法来开发RN了，所以当一个刚接触RN，对JS又不是很厉害的同学来说，要看懂别人的代码就要先知道ES5和ES6的区别有哪些，当我们遇到ES5语法写的RN项目时，我们怎么把他很好的理解成ES6语法的项目，话不多说，我们直接来学习吧

从ES5语法开发转入ES6开发主要需要注意下面讨论的6个部分。

1.React native 组件导入

导入RN组件使用ES5语法示例：

let React = require('react-native');
let{
    AppRegistry, //注册
    StyleSheet,   //样式
    Text,         //文本组件
    View,         //视图组件
} = React;

导入RN组件使用ES6语法示例：

    import React, { Component } from 'react';
    import {
      AppRegistry, //注册
      StyleSheet,   //样式
      Text,         //文本组件
      View,         //视图组件
      TextInput
    } from 'react-native';

我们在使用ES5语法创建自己的RN组件时会这样写

```
    let Index = React.createClass({
        ······
    });
```

使用ES6语法时我们要将上面的代码改为下面的形式

```
    class Index extends Component {
    ·····
    }
```

属性声明

我们常要声明一个属性和指定属性默认值

在使用ES5语法示例：

    var Index = React.createClass({
        propTypes:{
            aStringProp:React.PropTypes.string
        },
        getDefaultPrors: function(){
            return {aStringProp:'default value'};
        }
        ······
    });

使用ES6语法时我们要将上面的代码改成下面的形式：

    var Index extends Component {   ·····   }
    Index.propTypes = {
        aStringProp:React.PropTypes.string
    };
    Index.defaultProps = {
        aStringProp: 'default value'
    };

注意：在ES6语法中，属性的类型声明和默认值声明不像ES5语法那样在组件定义内部声明，而是在组件定义外部声明。

成员变量声明

在ES5语法中，RN组件的成员变量声明代码如下：

    ···
    let Index = React.createClass({
        myProperty1:'test',
        myProperty2:true,
    });
    ···

在使用ES6语法编写RN组件时，可以为RN组件指定一个构造函数，而声明RN组件的成员变量必须在组件的构造函数中声明。具体示例如下：

    var Index extends Component {
        constructor(props) {            //组件构造函数名称与声明方式，不可修改
            super(props);               //将属性传给父类构造函数，必须有这句，不可修改
            this.myProperty1='test',    //声明成员变量
            this.myProperty2=true,      //声明成员变量
        }
    }

在使用ES6语法编写RN组件时函数名称后不能再有“：function”关键字，不同于使用ES5语法编写时可有也可没用这个关键字。

状态机变量声明

使用ES5语法时，RN组件的状态机变量声明代码如下：

    ·····
    let Index = React.createClass({
        getInitialState:function(){
            return {
                var1:'value of var1',
                var2:30,
                var3:true
            }
        };
    });
    ······

使用ES6语法编写RN组件时，RN组件的状态机变量也必须在组件的构造函数中声明。示例如下：

    var Index extends Component {
        constructor(props) {            //组件构造函数名称与声明方式，不可修改
            super(props);               //将属性传给父类构造函数，必须有这句，不可修改
            this.state = {              //声明状态机变量
                var1: 'value of var1',
                var2:30,
                var3:true
            };
        }
    }

回调函数绑定

使用ES5语法时，RN组件的回调函数可以直接指向本组件的某个成员方法，示例如下：

    ······
   let Login = React.createClass({
   getInitalState:function () {
       return {
           inputedNum:''
       };
   },
    updateNum: function (newText) {     //这个成员方法将被用作回调函数
        this.setState((state) => {
           return {
               inputedNum:newText
           };
        });
    },
    buttonPressed: function () {        //这个成员方法将被用作回调函数
        //·····
    },
    render:function () {
        return(
            <View style={styles.container}>
                <TextInput style={styles.innerViewStyle}
                    placeholder={"请输入账号"}
                    //下面的语句指定第一个回调函数
                    onChangeText={(newText) => this.updateNum(newText)}
                />

                <Text style={styles.innerViewStyle2}
                    onPress={this.buttonPressed()}>//指定第二个回调函数
                    确定
                </Text>
            </View>
        );
    }
});
······

使用ES6语法编写RN组件时，RN组件的回调函数必须在组件的构造函数中执行绑定操作。使用ES5语法也是有这一步绑定操作的，但是React类的creatClass方法为开发者代劳了这一步操作。使用ES6语法开发这一步必须由开发者自己在代码中绑定，那么我们来练习一下。

    class Login extends Component {
    constructor (props){
        super(props);
        this.state = {
            inputedNum:''
        };
        //下面两条语句将两个回调函数和成员方法绑定
        this.updateNum = this.updateNum.bind(this);
        this.buttonPressed = this.buttonPressed.bind(this);
    }
    updateNum(newText) {
        this.setState((state) => {
            return {
                inputedNum:newText
            };
        });
    }
    buttonPressed(){
        this.setState((state) => {
            return {
                inputedNum:''
            };
        });
    }
  //初始化方法====》返回具体的组件内容
    //写结构和内容
  render() {
      return (
          <View style={styles.container}>
              <TextInput style={styles.innerViewStyle}
                         placeholder={"请输入账号"}
                  //下面的语句指定第一个回调函数
                         onChangeText={(newText) => this.updateNum(newText)}
              />

              <Text style={styles.innerViewStyle2}
                    onPress={this.buttonPressed()}>//指定第二个回调函数
                  确定
              </Text>
          </View>
      );
      //返回
  }
}

相对于ES5语法开发，使用ES6语法开发需要开发者通过代码自己绑定每一个回调函数，这对于开发者来说时一种开发方便性上的退步。但是直到RN可以使用ES7语法开发前，只能使用这种不方便的办法。

类的静态成员变量与静态成员函数

使用ES5语法进行RN开发时，类的静态成员变量与静态成员函数的实现我们在下面的代码中感受一下:

    statics: {
        myStaticObject: 'init value',       //定义类的静态成员变量
        myStaticMethod: function(){         //定义类的静态成员函数
            console.log('myStaticMethod is called.')
        }
    },
    render：function() {
        console.log(Index.myStaticObject);  //访问类的静态成员变量
        Index.myStaticMethod();             //调用类的静态成员函数
        ·······
    }

使用ES6语法时，我们相应的实现代码我们来学习一下：

    Class Idnex extends Component {
        static myStaticObject = 'init value';
        static myStaticMethod (){
            console.log('myStaticMethod is called.');
        }

        render(){
            console.log(Index.myStaticObject);  //访问类的静态成员变量
            Index.myStaticMethod();             //调用类的静态成员函数
            ·······
        }
    }

好了到这里呢，我们已经了解了ES5语法和ES6语法在开发RN时有那些异同。那么在以后的开发中和去阅读别人的代码时相信你很块的就能分辨出来这是ES5语法还是ES6语法编写的了。

ES6新特性

ES6（ECMAScript2015）的出现,不仅给前端的开发人员带来了新的惊喜，而且给开发RN的开发者带来了很多惊喜，以前的RN开发者都在用ES5语法编写RN，现在ES6语法已经成为了编写RN的趋势和潮流，就是说现在的RN开发者基本都在用ES6语法还有将ES5语法换成ES6语法的。所以我们必须要了解一下ES6的新特性。

ES6常用的特性有：

箭头操作符 =>
类的支持 class
增强的对象字面量
字符串模板
解构
参数默认值，不定参数，拓展参数
let与const 关键字
for of 值遍历
iterator, generator
模块
Map，Set 和 WeakMap，WeakSet
Proxies
Symbols
Math，Number，String，Object 的新API
Promises

ES6的新特性具体的异同你们可以参考这两篇博文来进行学习
1.ES6的新特性
 2.ES6的新特性

好了说到这里也差不多了，让我们继续在学习RN的这条路上前进吧。
如果你想了解更多欢迎加入我们一起学React Native 群点击链接加入群【我们一起学React Native】
来一起学习吧