剛開(kāi)始學(xué) js 被里面各種語(yǔ)法和語(yǔ)法糖整的頭昏腦漲, 下面的圖很能形容我的樣子

0ff41bd5ad6eddc491088d7732dbb6fd5366334a.jpg

為了不讓自己啥啥啥 記錄一下那些讓我看懵逼的語(yǔ)法, 主要記錄語(yǔ)法名稱(chēng), 詳細(xì)使用看下面的鏈接,講的都很清楚

// 模式匹配
let {name} = this.props

模式匹配詳解

// 箭頭函數(shù) 省去了大括號(hào) 但是只能執(zhí)行一條語(yǔ)句
let fn = () => console.log('輸出');

// 箭頭函數(shù) 有大括號(hào) 可以執(zhí)行多條語(yǔ)句
let fn = () => { 
console.log('輸出'); 
console.log('輸出'); 
}

// 完全聲明 (name,age) => void 標(biāo)明類(lèi)型 等號(hào)后面是給fn賦值 類(lèi)似寫(xiě)法: name:string = "wangxiaoming" 
fn:(name,age) => void = (name,age) => {
    console.log(age); 
    console.log(name);
}
// 還可以不賦值 也就是undefined 類(lèi)似寫(xiě)法: name:string
fn:(name,age) => void

箭頭函數(shù)詳解

// Promise 
function cook() {
    console.log('開(kāi)始做飯');
    var p = new Promise(function(resolve,reject) {
        setTimeout(() => {
            resolve('開(kāi)始吃飯');
        }, 1000);
    });
    return p;
}

function eat(data) {
    console.log(data);

    var p = new Promise((resolve,reject) => {
        setTimeout(() => {
            // throw new Error('米被打翻了');
            console.log('吃飯完畢');
            reject('一個(gè)碗和一雙筷子');
        }, 2000);    
    });
    return p;
}

// 調(diào)用方式1  
cook().then(eat, (data) => {
    console.log(data); // 輸出一個(gè)碗和一雙筷子
})

// 調(diào)用方式2 
cook().then(eat).catch((data) => {
    console.log(data); // 一個(gè)碗和一雙筷子
});
/*
整體輸出順序?yàn)?

開(kāi)始做飯

開(kāi)始吃飯

吃飯完畢

一個(gè)碗和一雙筷子
**/

Promise語(yǔ)法

// 多類(lèi)型 "solid" | "dotted" | "dashed"中的任意一種值
borderStyle?: "solid" | "dotted" | "dashed";
// 多類(lèi)型 string | int | any中的任意一種類(lèi)型的值
let name: string | int | any

TypeScript( 簡(jiǎn)稱(chēng)TS )語(yǔ)法

// 最初學(xué)rn的時(shí)候第一眼看到的就這個(gè)方法 , 里面就一個(gè)return語(yǔ)句, 難以理解的是這個(gè)return() 是個(gè)什么鬼, 其實(shí)這是jsx的語(yǔ)法糖,最終return返回的是一個(gè)react對(duì)象
render() {
        return (
            <View style = {[styles.style, styles.flex]}>{this.items(10)}
            </View>
        );
    }
// ================
// 在jsx語(yǔ)句中, 不能夠直接使用js代碼, 要使用{}把js語(yǔ)句包裹起來(lái), 而在js中使用jsx 可以直接使用 如果是多行 可以用()包裹
items(count) {
        let its = [];
        for (i = 0;i < count; i++) {
            its[i] = (<UIItem key = {i} />);
        }
        return its;
    }
 // ps 在jsx中不僅可以使用react組件還可以使用html標(biāo)簽,react會(huì)通過(guò)組件名的首字母大小寫(xiě)進(jìn)行區(qū)分, react自定義組件首字母必須大寫(xiě), html原生標(biāo)簽首字母必須小寫(xiě).
import React from 'react';

// 正確哄啄！ 這是一個(gè)組件歇竟，首字母應(yīng)該大寫(xiě)：
function Hello(props) {
  // 正確驰唬！這種使用 <div> 是合法的镀赌，因?yàn)?div 是一個(gè)有效的 HTML 標(biāo)記：
  return <div>Hello {props.toWhat}</div>;
}

function HelloWorld() {
  // 正確！React 認(rèn)為 <Hello /> 是一個(gè)組件，因?yàn)樗鬃帜笐?yīng)是大寫(xiě)的：
  return <Hello toWhat="World" />;
}

JSX語(yǔ)法解讀