刚开始学 js 被里面各种语法和语法糖整的头昏脑涨, 下面的图很能形容我的样子
0ff41bd5ad6eddc491088d7732dbb6fd5366334a.jpg
为了不让自己啥啥啥 记录一下那些让我看懵逼的语法, 主要记录语法名称, 详细使用看下面的链接,讲的都很清楚
// 模式匹配
let {name} = this.props
// 箭头函数 省去了大括号 但是只能执行一条语句
let fn = () => console.log('输出');
// 箭头函数 有大括号 可以执行多条语句
let fn = () => {
console.log('输出');
console.log('输出');
}
// 完全声明 (name,age) => void 标明类型 等号后面是给fn赋值 类似写法: name:string = "wangxiaoming"
fn:(name,age) => void = (name,age) => {
console.log(age);
console.log(name);
}
// 还可以不赋值 也就是undefined 类似写法: name:string
fn:(name,age) => void
// Promise
function cook() {
console.log('开始做饭');
var p = new Promise(function(resolve,reject) {
setTimeout(() => {
resolve('开始吃饭');
}, 1000);
});
return p;
}
function eat(data) {
console.log(data);
var p = new Promise((resolve,reject) => {
setTimeout(() => {
// throw new Error('米被打翻了');
console.log('吃饭完毕');
reject('一个碗和一双筷子');
}, 2000);
});
return p;
}
// 调用方式1
cook().then(eat, (data) => {
console.log(data); // 输出一个碗和一双筷子
})
// 调用方式2
cook().then(eat).catch((data) => {
console.log(data); // 一个碗和一双筷子
});
/*
整体输出顺序为:
开始做饭
开始吃饭
吃饭完毕
一个碗和一双筷子
**/
// 多类型 "solid" | "dotted" | "dashed"中的任意一种值
borderStyle?: "solid" | "dotted" | "dashed";
// 多类型 string | int | any中的任意一种类型的值
let name: string | int | any
// 最初学rn的时候第一眼看到的就这个方法 , 里面就一个return语句, 难以理解的是这个return() 是个什么鬼, 其实这是jsx的语法糖,最终return返回的是一个react对象
render() {
return (
<View style = {[styles.style, styles.flex]}>{this.items(10)}
</View>
);
}
// ================
// 在jsx语句中, 不能够直接使用js代码, 要使用{}把js语句包裹起来, 而在js中使用jsx 可以直接使用 如果是多行 可以用()包裹
items(count) {
let its = [];
for (i = 0;i < count; i++) {
its[i] = (<UIItem key = {i} />);
}
return its;
}
// ps 在jsx中不仅可以使用react组件还可以使用html标签,react会通过组件名的首字母大小写进行区分, react自定义组件首字母必须大写, html原生标签首字母必须小写.
import React from 'react';
// 正确！ 这是一个组件，首字母应该大写：
function Hello(props) {
// 正确！这种使用 <div> 是合法的，因为 div 是一个有效的 HTML 标记：
return <div>Hello {props.toWhat}</div>;
}
function HelloWorld() {
// 正确！React 认为 <Hello /> 是一个组件，因为它首字母应是大写的：
return <Hello toWhat="World" />;
}
