React項目中出現(xiàn)頻率較高的ES6語法

ZHAO_ 發(fā)布于2019-08-19 18:32 / 852人閱讀

摘要：學(xué)習(xí)過程中，發(fā)現(xiàn)無論是上的還是相關(guān)文檔，語法都有大量的使用。如下使用語法來定義一個組件有幾個注意點使用了的繼承語法，關(guān)鍵字這里使用了上面說的語法方法名的簡寫，注意方法之間不加是構(gòu)造函數(shù)，可以替代。內(nèi)需要調(diào)用父類的構(gòu)造函數(shù)即，否則就會報錯。

學(xué)習(xí)React過程中，發(fā)現(xiàn)無論是github上的Demo還是React相關(guān)文檔，ES6語法都有大量的使用。如果不了解一些ES6語法，很難學(xué)習(xí)下去。如果轉(zhuǎn)戰(zhàn)ES6，系統(tǒng)學(xué)習(xí)戰(zhàn)線又較長。所以把一些常用的ES6語法做一些總結(jié)，有助于讀懂React，Redux的文檔。特別提醒：一些細(xì)節(jié)學(xué)習(xí)還是需要仔細(xì)查閱文檔。

可以通過這個在線工具寫ES6代碼：http://www.es6fiddle.net/

let&const

這兩個關(guān)鍵字大家應(yīng)該都有了解，主要是引入了塊級作用域，不存在變量提升，不能重復(fù)定義等特性。const是用來定義常量的。
文檔：http://es6.ruanyifeng.com/#do...

解構(gòu)賦值

常規(guī)用法

let { x } = { x: 1, y: 2}
let { PropTypes } = React

這是對象的解構(gòu)賦值，等同于let PropTypes = React.PropTypes(注意這里包含了兩步：聲明變量PropTypes&賦值為React.PropTypes)。

所以這樣寫也是OK的

let PropTypes
{ PropTypes } = React

可以同時寫多變量,如

let { PropTypes, Component } = React

如果想定義的變量名和屬性名不一樣，可以這樣寫

let { x: x1 } = { x: 1, y: 2}

聲明x1變量，并賦值為1。注意x是模式，不是變量也不會被賦值

除了對象，數(shù)組，字符串等都有解構(gòu)賦值的用法。
看文檔：http://es6.ruanyifeng.com/#do...

對象的拓展 屬性的簡潔表達(dá)方式

let x = "123"
let obj = { x, y: "33" }//等同于 let obj = { x: x, y: "33"}

如上代碼所示，ES6允許對象內(nèi)只寫屬性名，不寫屬性值，屬性值就等于改與屬性名相等的變量值

方法名也可以簡寫

let User = {
    method() { //等同于method: function(){
        //...
    }
}

屬性名表達(dá)式

let key = "id"
let obj = {
   [key]: "1010",  //注意與 key: "1010" 的區(qū)別
   ["use" + "name" ]: "x"   
}

把表達(dá)式寫在[]中，表達(dá)式的值作為字段名稱。
注意屬性名表達(dá)式與屬性名簡寫不能同時使用。如下

let key = "id"
let id = "1010"
let obj = {
   [key]
}

ES6 Class

使用ES6語法來定義一個React組件

export class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
    this.tick = this.tick.bind(this);
  }

  tick() {
    this.setState({count: this.state.count + 1});
  }

  render() {
    return (
      
        Clicks: {this.state.count}
      
    );
  }
}
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };

有幾個注意點：
使用了ES6的繼承語法，關(guān)鍵字extends

這里使用了上面說的語法：方法名的簡寫，注意方法之間不加,

constructor是構(gòu)造函數(shù)，可以替代getInitialState。constructor內(nèi)需要調(diào)用父類的構(gòu)造函數(shù)即super(props)，否則就會報錯。因為子類沒有自己的this對象，需要從父類繼承。所以有用到this的語句需要寫在super(props)之后。

this.tick = this.tick.bind(this);

這里使用bind來綁定執(zhí)行的作用域(使用React.createClass是自動綁定的)，也可在render中監(jiān)聽事件的地方寫bind(this)，如下:


    Clicks: {this.state.count}

不過官方文檔建議是統(tǒng)一寫在constructor 中，這樣該方法就只需要綁定一次。

除了使用bind(this)，還可以使用箭頭函數(shù)

this.tick()}>
    Clicks: {this.state.count}

這里就體現(xiàn)了箭頭函數(shù)的特性：

函數(shù)體內(nèi)的this就是定義時的對象，而不是調(diào)用時所在的對象。也就是說箭頭函數(shù)的this指向是固定的，而普通函數(shù)是可變的。

箭頭函數(shù)

ES6允許使用=>來定義函數(shù)

let f = v => v + 2
//等同于
let f = function(v){
    return v + 2
}

如果有多個參數(shù)

let f = (x, y) => x + y

函數(shù)體有多條語句，用大括號包起來

let f = (x, y) => {
    x = x + 1
    y = y + 3
    return x + y 
}

在總結(jié)ES6的class語法時也提到：箭頭函數(shù)的this對象就是定義時所在的this對象，與執(zhí)行時所在的對象無關(guān)
還有一點可以幫助理解：箭頭函數(shù)的this指向能保持不變，不是因為內(nèi)部有綁定的機制，而是箭頭函數(shù)沒有自己的this，導(dǎo)致代碼內(nèi)的this就是外層代碼塊的this
看文檔：http://es6.ruanyifeng.com/#do...箭頭函數(shù)

export&import

export用于輸出模塊對外的接口，import用于導(dǎo)入其他模塊提供的功能。

export let client = "APP"  //輸出變量
export function mul(x, y){  //輸出函數(shù)
    return x + y
}
export class Toast(){} //輸出類

也可以統(tǒng)一輸出

//文件名 util.js
let client = "APP"  //輸出變量
function mul(x, y){  //輸出函數(shù)
    return x + y
}
export { client, mul }

對應(yīng)的導(dǎo)入應(yīng)該這樣用：

//注意這里有大括號，并且名稱和輸出時保持一致
import { client, mul } from "./util.js"

下面這樣寫也可以

import * as U from "./util.js"
U.client //使用

我們很常用還有export default命令，用于輸出默認(rèn)的方法，變量或類

export default React.createClass({ 
    // ...
})

引入的時候就比較方便，可以隨意指定名字

import Tab from "tab"  //注意這里沒有大括號

文檔：http://es6.ruanyifeng.com/#do...

對象的拓展運算符...

拓展運算符屬于ES7的提案，但babel已經(jīng)支持，在Redux的示例Demo中很常見。
拓展運算符可以用來合并兩個對象

//state = { name: "y" } 
return {...state, name: "x", id: 101 }
//返回 { name: "x", id: 101}

有兩個點：取出state對象的所有可遍歷屬性，拷貝到當(dāng)前對象上；如果自定義的屬性放后面，拓展運算符的同名屬性值則會覆蓋掉。

這中用法等同與Object.assgin

Object.assgin({}, state, { name: "x", id: 101 })

使用拓展運算符需要安裝transform-object-rest-spread插件，然后在babel中配置。配置如下:

test: /.js$/,
exclude: /node_modules/,
loader: "babel",
query:{
    presets: ["react", "es2015"],
    plugins: ["transform-object-rest-spread"]
}

文檔：http://babeljs.io/docs/plugin...
http://es6.ruanyifeng.com/#do...對象的擴展運算符

推薦ES6教程：http://www.hubwiz.com/course/...

GPU云服務(wù)器云服務(wù)器性價比較高的vps 性價比較高的主機國內(nèi)性價比較高的云主機性價比較高的服務(wù)器

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79665.html

發(fā)表評論

登陸后可評論

0條評論

ZHAO_

男|高級講師

我要關(guān)注我要私信

TA的文章

??【C++教程第二篇】：兩千字入門必備基礎(chǔ)，建議收藏??

閱讀 1448·2021-09-03 10:29
【基礎(chǔ)】固定列寬的表格及示例演示

閱讀 3470·2019-08-29 16:24
如何優(yōu)雅的選擇字體(font-family)

閱讀 2041·2019-08-29 11:03
手把手教你用typescript擼一個npm包

閱讀 1425·2019-08-26 13:52
canvas繪制視頻封面

閱讀 2938·2019-08-26 11:36
javascript中的依賴注入【轉(zhuǎn)】

閱讀 2800·2019-08-23 17:19
正則表達(dá)式- [...]

閱讀 572·2019-08-23 17:14
Proxy介紹

閱讀 822·2019-08-23 13:59

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

React項目中出現(xiàn)頻率較高的ES6語法

相關(guān)文章

2019年前端的3個趨勢

React16時代，該用什么姿勢寫 React ?

2018年前端面試題

webpack優(yōu)化

eslint總結(jié)

發(fā)表評論

0條評論

ZHAO_

男|高級講師

TA的文章

??【C++教程第二篇】：兩千字入門必備基礎(chǔ)，建議收藏??

【基礎(chǔ)】固定列寬的表格及示例演示

如何優(yōu)雅的選擇字體(font-family)

手把手教你用typescript擼一個npm包

canvas繪制視頻封面

javascript中的依賴注入【轉(zhuǎn)】

正則表達(dá)式- [...]

Proxy介紹

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

React項目中出現(xiàn)頻率較高的ES6語法

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！