[知识分享]React Native 常用语法总结
自定义组件导出
自定义组件在a.js文件中export xx。接受方需用import xx from a，如果在a.js中是export default xx。那么在接受方就不需要也用xx接收，随便aa，bb，cc接收都行，import aa/bb/cc/xx from a.
注意：在自定义的a.js文件中可多次export xx。但是只能有唯一的export default xx。来声明导出。export default的时候变量名不能用{}包裹，接收也不用。rest参数-扩展运算符（神奇三点）
例子：
let foo = (x,y,…hd)=> {
console.log(hd);
return x+y
}
console.log(foo(3,4,5,6,7)) //…hd 表示声明一个rest参数，用来接收多余的实参(形参情况下)
打印结果：Array[5,6,7]. 是将多余的参数5，6，7拼接数组打印出来
例子：
Function foo(x,y){
return x+y;
}
在非形参情况下，三个点表示将数组拆分成独立的值。
let arr = [3,4];
console.log(foo(…arr)) 等同于 console.log(foo(3，4))
let arr=[1,2,3];
let hd=[4,5,6,…arr];
相当于let hd = [4,5,6,1,2,3]-
数组遍历的方法
forEach：
ary:[1,2,3,5]
this.ary.forEach(x=>{
console.log(x*x)
})this.ary.map(x=>{
console.log(x*x)
})
Map和foreach用法几乎一样，但是如果对数组本身进行操作的话，要用foreach，可以对数组自身操作。map对数组的元素操作完成后是返回一个新的数组。要用新的数组来接收，原数组不变。 数组的解构赋值
let [aa,bb,cc]=['111','222','333']
console.log(aa+'A'+bb+'B'+cc) 结果：111A222B333
解构赋值是“模式匹配”，说白了，只要是左右两边的解构一样，就能一一对应。
例如：一个比较简洁的用法，交换两个变量的值
let x = 1;
let y = 2;
[x,y] = [y,x]
console.log(x)
console.log(y)
其中x,y是同一个变量。
注意：
let [a,b]=[1]
console.log(a) 1
console.log(b). Undefined
解构失败的话就是undefined对象的解构赋值
let {ee,ff} = {ee:'12121',ff:'33333'}
console.log(ee+ff) //1212133333
let {ff,ee} = {ee:'12121',ff:'33333’}也一样。字符串解构赋值 函数参数解构赋值
let [a,b,c] = ‘后盾人’；
console.log(a) //后
console.log（c）//人
let {length:len} = ‘后盾人’；
console.log(len); //3
tt1([x,y]){
return x*y
}
console.log(this.tt1([3,5])). //15
在传入参数那一刻，参数变量被解构成q和z。对于代码内部来说，他们感受到的参数就是x和y
[[1,2],[3,4]].map(([q,z]) => q+z) //[3,7]set数据结构 set本身是一个构造函数，用来生成set数据结构。（类似于数组，但是成员的值都是唯一的，没有重复的值）
//创建set数据解构
let sett = new Set();
//向set数据结构追加数据
sett.add(1);
sett.add(2);
sett.add(1);
console.log(sett) //set{1,2} 自动过滤重复元素
let s = new Set([1,2,3,4,5,6,7,2,3,1]);
console.log(s);//Set(7) {1, 2, 3, 4, 5,6,7}
//可以通过size属性获得set数据结构的长度
console.log(sett.size)
//数组去重
let arr = [1,2,3,4,5,6,7,2,3,1,2,3]
let db = [...new Set(arr)];
console.log(db)
//set数据结构方法
let ss = new Set([1,2,3,4,5,5,5,5])
console.log(ss)
//追加数据
ss.add(7)
console.log(ss)
//删除数据
ss.delete(3);
console.log(ss)
//判断数据中是否有某值
let rs = ss.has(2);
console.log(rs) //true
//清除所有成员
ss.clear()
console.log(ss)
let sa = new Set([1,2,3,4,5,6,6])
//set数据转数组（如果有重复元素去除）
let ew = Array.from(sa); // 《==》 let ew = [...new Set(sa)];
console.log(ew)
//set结构的实例有四个遍历方法
keys():返回键名的遍历器
values():返回键值的遍历器
entries():返回健值对的遍历器
forEach():使用回调函数遍历每个成员
console.log(sa.keys());//SetIterator {1, 2, 3, 4, 5, 6}
console.log(sa.values());//SetIterator {1, 2, 3, 4, 5, 6}//这里没有健名所以和健值一样
//用x去遍历s.keys()产生的值
for(x of sa.values()){
console.log(x) // 1,2,3,4,5,6
}
for(x of sa.entries()){
//sa.entries()将set数据的值组成健值对，形成一个集合（因为这里没有键名，所有键名和健值一样）
console.log(x) // [1,1] [2,2] [3,3] [4,4] [5,5] [6,6]
}
sa.forEach(x => {
console.log(x);
})map数据结构. 里面的‘对象’（类似于对象但不是），键名可以是任意类型的（传统json的健值对只能是字符串）
let m = new Map()
m.set('name','后盾人')
let ewq = m.get('name')
console.log(ewq)//后盾人
console.log(m)//Map(1) {"name" => "后盾人"}
m.set(123,'abc')
console.log(m.get(123))//abc
let obj = {a:1}
m.set(obj,111)
console.log(m.get(obj))
//作为构造函数，Map也可以接收一个数组作为参数，该数组的成员是一个个表示健值对的数组
let mmap = new Map([
[123,'健值1'],
[456,'健值2']
])
console.log(mmap.get(123)) //健值1
//注意：只有针对同一个对象的引用，Map结构才将其视为同一个健。
mmap.set(['a'],123)
console.log(mmap.get(['a']))//undefined 此处的['a']是两个内容相同的不同对象。
let obb = ['a']
mmap.set(obb,123)
console.log(mmap.get(obb))//123
//map数据结构方法
keys():返回键名的遍历器
values():返回键值的遍历器
entries():返回健值对的遍历器
forEach():使用回调函数遍历每个成员
for(let xx of mmap.keys()){
console.log(xx) //123,456,['a'],['a']
}
for(let xx of mmap.values()){
console.log(xx) //健值1，健值2，123，123
}
for(let xx of mmap.entries()){
console.log(xx) // [123, "健值1"],[456, "健值2"],[Array(1), 123],[Array(1), 123]
}
//v代表当前遍历到的健值对的健值
//k代表当前遍历到的健值对的键名
mmap.forEach((v,k) =>{
console.log(v,k)//健值1 123 健值2 456 123 ["a"] 123 ["a"]
})
//map结构转化为数组（最简单的使用扩展运算符 ...神奇三点）
const map = new Map([
[1,'one'],
[2,'two'],
[3,'three']
])
let ree = [...map.keys()]
console.log(ree) //[1, 2, 3]
let reee = [...map.values()]
console.log(reee) //["one", "two", "three"]
let reeee = [...map.entries()] // [...map]
console.log(reeee) //[Array(2), Array(2), Array(2)]
let bxc = Array.from(map)//[Array(2), Array(2), Array(2)] 也可将map结构转化为数组
for(x of map){
console.log(x). //[1,'one'],[2,'two'], [3,'three']
}
//传统的数组 字典遍历用forin循环遍历，x代表数组中的下标键名。
//对于set结构和map结构必须用of遍历，x此时代表的是键值。类
calss animal{
//构造函数，会在类被实例化的时候自动执行
//一般来讲，需要定义的属性，都声明在constructor里面
constructor(){
this.weight = ‘重量’；
this.color = ‘颜色’；
}
//创建类的时候，方法之间不需要逗号或分号
//类里面的方法不需要用function声明
move(){
console.log(‘会动’)
}
//通过类创建对象
let map = new animal();
Class fish extends animal{
constructor(){
super();//如果继承父类，需要添加属性，必须先声明super方法。
this.sao = ’21’;
//super当作对象使用的时候，指向的是父类的原型（prototype） 说白了，super对象指向的就是父类，可以通过super对象得到父类中的方法
super.move();
}}ReactNative中的platform选择
const platformText = Platform.select({
ios:' 我是ios',
android:'我是android'
})
{platformText} state和props
state：我们使用两种数据来控制一个组件，props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。对于需要改变的数据，我们需要使用state。
一般来说，你需要在constructor中初始化state，然后再需要修改时调用setState方法。Promise.
//Promise。简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。
var p = new Promise((resolve,reject)=>{
setTimeout(() => {
//resolve表示将promise对象的状态变为成功，而后会执行后续的处理流程
// reject()// 表示失败
resolve() //表示成功
}, 2000);
})
.then((x)=>{//then方法会等promise对象状态变为结束后执行
// console.log(x)
console.log('淘宝11')
})
Fetch本身也属于promise的一种对象
fetch('http:www.baidu.com',{
methods:'POST',
body:'sasasasas'
}).then(x=>{
})除了系统的循环组件，最基本的循环组件展示
constructor(props){
super(props)
this.state = {
ary:[1,2,3,4],
}
render(){
let alltitle = []
this.state.ary.map((x)=>{
alltitle.push(标题:{x} )
})
return(
{alltitle}. //循环展示组件
)}