React Native学习笔记(二)-JSX语法和ES6语法

JSX语法

JSX:即JavaScript XML——一种在React组建内部构建标签的类XML语法。(增强React程序组件的可读性)

React的核心机制之一就是虚拟DOM:可以在内存中创建虚拟DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。

1、示例
render: function() {
    return (
        
            
                Welcome to React Native!
            
        
    );
}
2、JS表达式
  • ReactJS中约定自定义的组件标签首字母一定要大写,这样区别于HTML标签
  • 表达式用{}包起来,不要加引号,加引号就会被当成字符串。
  • JSX是HTML和JavaScript混写的语法,当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析
3、关于样式
  1. 普通内联样式:{{}},第一层{}是表达式,第二层{}是js对象

      
    
  2. 调用样式表:{样式类.属性}

     
    
  3. 样式表和内联样式共存:{[]}

     
    
  4. 多个样式表:{[样式类1, 样式类2]}

     
    

ES6语法

展开运算符:允许一个表达式在某处展开。展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以使用。

用于函数调用

myFunction(...iterableObj);

用于数组字面量

[...iterableObj, 4, 5, 6]

apply方法能劫持另外一个对象的方法,继承另外一个对象的属性

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);

这是使用了apply方法来遍历的参数,但是在ES6下我们还可以像下面这样写

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);

数组字面量

展开操作符可以简化数组间的操作如下:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);

可以将一个数组在任何位置插入另一个数组:

var arr1 = [3, 4];
var lyrics = [2, ...arr1, 5, 6];

解构赋值

解构赋值是ES6的特性

let [arg1,arg2,...arg3] = [1, 2, 3, 4];
arg1 //1
arg2 //2
arg3 //['3','4']

解构赋值中展开运算符只能放在最后

let [arg1,...arg2,arg3] = [1, 2, 3, 4]; //报错

箭头函数(Arrow Functions):箭头函数的产生主要有两个目的更:简洁的语法和与父作用域共享关键字this

简洁

x => x * x
相当于

function (x) {
    return x * x;
}

无参数

() => 5

一个参数

x => x * x

两个参数

(x, y) => x * y

可变参数

(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i

返回对象

x => ({ foo: x }) 

通过上面的一些格式,我们可以看出函数体的内容和普通的函数比更简洁

this

每个新定义的函数都有其自己的 this 值,我们通过下面几段代码来看看this的作用域问题:
function Person() {
  this.age = 0; //this 指向的就是对象自己
  setInterval(function growUp() {
    this.age++; // 在非严格模式下,this指向的是函数内部
  }, 1000);
}
可以通过新增一个变量来指向期望的 this 对象,然后将该变量放到闭包中来解决。
function Person() {
  var that = this;
  that.age = 0; //that 指向的就是对象自己
  setInterval(function growUp() {
    that.age++; //that指向的是我们期望的指向
  }, 1000);
}
用箭头函数就可以这么写:
function Person(){
  this.age = 0;
  setInterval(() => {
    this.age++; // |this| 正确地指向了 person 对象
  }, 1000);
}
argument变量

箭头函数与普通函数还有一个区别就是,它没有自己的arguments变量

React Native中也用到了ES6的let, const, import, class,所以开发前最好先对这些基础知识有个了解

你可能感兴趣的:(React Native学习笔记(二)-JSX语法和ES6语法)