JSX语法
JSX：即JavaScript XML——一种在React组建内部构建标签的类XML语法。（增强React程序组件的可读性）
React的核心机制之一就是虚拟DOM：可以在内存中创建虚拟DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。
1、示例
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
</View>
);
}
2、JS表达式
- ReactJS中约定自定义的组件标签首字母一定要大写，这样区别于HTML标签
- 表达式用{}包起来，不要加引号，加引号就会被当成字符串。
- JSX是HTML和JavaScript混写的语法，当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析
3、关于样式
-
普通内联样式:{{}},第一层｛｝是表达式，第二层｛｝是js对象
<View style={{fontSize:40, width:80,}}> </View> -
调用样式表:{样式类.属性}
<View style={styles.container}></View> -
样式表和内联样式共存:{[]}
<View style={[styles.container, {fontSize:40, width:80}]}> -
多个样式表:{[样式类1， 样式类2]}
<View style={[styles.container, styles.color]}>
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<rest.length; i++) {
sum += rest[i];
}
return sum;
}
返回对象
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，所以开发前最好先对这些基础知识有个了解
网友评论