RN 语法解析

刚开始学 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); // 一个碗和一双筷子
});
/*
整体输出顺序为:

开始做饭

开始吃饭

吃饭完毕

一个碗和一双筷子
**/

Promise语法

---

// 多类型 "solid" | "dotted" | "dashed"中的任意一种值
borderStyle?: "solid" | "dotted" | "dashed";
// 多类型 string | int | any中的任意一种类型的值
let name: string | int | any

TypeScript( 简称TS )语法

// 最初学rn的时候第一眼看到的就这个方法 , 里面就一个return语句, 难以理解的是这个return() 是个什么鬼, 其实这是jsx的语法糖,最终return返回的是一个react对象
render() {
        return (
            {this.items(10)}
            
        );
    }
// ================
// 在jsx语句中, 不能够直接使用js代码, 要使用{}把js语句包裹起来, 而在js中使用jsx 可以直接使用 如果是多行 可以用()包裹
items(count) {
        let its = [];
        for (i = 0;i < count; i++) {
            its[i] = ();
        }
        return its;
    }
 // ps 在jsx中不仅可以使用react组件还可以使用html标签,react会通过组件名的首字母大小写进行区分, react自定义组件首字母必须大写, html原生标签首字母必须小写.
import React from 'react';

// 正确！ 这是一个组件，首字母应该大写：
function Hello(props) {
  // 正确！这种使用 
 是合法的，因为 div 是一个有效的 HTML 标记：
  return 
Hello {props.toWhat}
;
}

function HelloWorld() {
  // 正确！React 认为  是一个组件，因为它首字母应是大写的：
  return ;
}

JSX语法解读