亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

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

ZHAO_ / 896人閱讀

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

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

可以通過(guò)這個(gè)在線工具寫(xiě)ES6代碼：http://www.es6fiddle.net/

let&const

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

解構(gòu)賦值

常規(guī)用法

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

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

所以這樣寫(xiě)也是OK的

let PropTypes
{ PropTypes } = React

可以同時(shí)寫(xiě)多變量,如

let { PropTypes, Component } = React

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

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

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

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

對(duì)象的拓展 屬性的簡(jiǎn)潔表達(dá)方式 
let x = "123"
let obj = { x, y: "33" }//等同于 let obj = { x: x, y: "33"}

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

方法名也可以簡(jiǎn)寫(xiě) 
let User = {
    method() { //等同于method: function(){
        //...
    }
}
屬性名表達(dá)式 
let key = "id"
let obj = {
   [key]: "1010",  //注意與 key: "1010" 的區(qū)別
   ["use" + "name" ]: "x"   
}

把表達(dá)式寫(xiě)在[]中，表達(dá)式的值作為字段名稱(chēng)。
注意屬性名表達(dá)式與屬性名簡(jiǎn)寫(xiě)不能同時(shí)使用。如下

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

使用ES6語(yǔ)法來(lái)定義一個(gè)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 };

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

這里使用了上面說(shuō)的語(yǔ)法：方法名的簡(jiǎn)寫(xiě)，注意方法之間不加,

constructor是構(gòu)造函數(shù)，可以替代getInitialState。constructor內(nèi)需要調(diào)用父類(lèi)的構(gòu)造函數(shù)即super(props)，否則就會(huì)報(bào)錯(cuò)。因?yàn)樽宇?lèi)沒(méi)有自己的this對(duì)象，需要從父類(lèi)繼承。所以有用到this的語(yǔ)句需要寫(xiě)在super(props)之后。

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

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


    Clicks: {this.state.count}

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

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

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

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

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

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

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

如果有多個(gè)參數(shù)

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

函數(shù)體有多條語(yǔ)句，用大括號(hào)包起來(lái)

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

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

export&import

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

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

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

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

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

//注意這里有大括號(hào)，并且名稱(chēng)和輸出時(shí)保持一致
import { client, mul } from "./util.js"

下面這樣寫(xiě)也可以

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

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

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

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

import Tab from "tab"  //注意這里沒(méi)有大括號(hào)

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

對(duì)象的拓展運(yùn)算符...

拓展運(yùn)算符屬于ES7的提案，但babel已經(jīng)支持，在Redux的示例Demo中很常見(jiàn)。
拓展運(yùn)算符可以用來(lái)合并兩個(gè)對(duì)象

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

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

這中用法等同與Object.assgin

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

使用拓展運(yùn)算符需要安裝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...對(duì)象的擴(kuò)展運(yùn)算符

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/79665.html

相關(guān)文章

  • 2019年前端的3個(gè)趨勢(shì)

    摘要：組件成為前端最基本的物料，融合在組件中的方案日趨成熟。組件成為最基本的前端物料，讓組件化更徹底在的調(diào)研報(bào)告中，開(kāi)發(fā)者有愿意繼續(xù)，有愿意繼續(xù)。需要留意的是，有表示對(duì)感興趣，因此獲得的最感興趣獎(jiǎng)。 簡(jiǎn)介： JavaScript 應(yīng)用范圍廣泛，靜態(tài)類(lèi)型語(yǔ)言 TypeScript 會(huì)繼續(xù)得到更多開(kāi)發(fā)者的青睞。 組件成為前端最基本的物料，CSS 融合在組件中(CSS in JS)的方案日趨成熟...

    yanwei 評(píng)論0 收藏0

  • React16時(shí)代，該用什么姿勢(shì)寫(xiě) React ?

    摘要：的返回值將作為的參數(shù)，如果返回，則不更新，不能返回或以外的值，否則會(huì)警告。在更新之前調(diào)用，此時(shí)已更新返回值作為的第個(gè)參數(shù)一般用于獲取之前的數(shù)據(jù)語(yǔ)法是從的返回值，默認(rèn)是的使用場(chǎng)景一般是獲取組建更新之前的滾動(dòng)條位置。 React16 后的各功能點(diǎn)是多個(gè)版本陸陸續(xù)續(xù)迭代增加的，本篇文章的講解是建立在 16.6.0 版本上本篇文章主旨在介紹 React16 之后版本中新增或修改的地方，所以對(duì)于...

    Reducto 評(píng)論0 收藏0

  • 2018年前端面試題

    摘要：三月去面試了幾家公司，不大不小，把面試時(shí)面試官問(wèn)的問(wèn)題總結(jié)一下供大家參考。很明顯，面試時(shí)問(wèn)題以及出現(xiàn)頻率非常高，并且包括，在方面問(wèn)的比較多的主要是跨域以及。面試時(shí)更側(cè)重于在實(shí)際項(xiàng)目中，遇到問(wèn)題你是怎么解決的。 三月去面試了幾家公司，不大不小，把面試時(shí)面試官問(wèn)的問(wèn)題總結(jié)一下供大家參考。很明顯，面試時(shí)問(wèn)題vue以及react出現(xiàn)頻率非常高，并且包括webpack，在JS方面問(wèn)的比較多的主要...

    beita 評(píng)論0 收藏0

  • webpack優(yōu)化

    摘要：使用要給項(xiàng)目構(gòu)建接入動(dòng)態(tài)鏈接庫(kù)的思想，需要完成以下事情把網(wǎng)頁(yè)依賴(lài)的基礎(chǔ)模塊抽離出來(lái)，打包到一個(gè)個(gè)單獨(dú)的動(dòng)態(tài)鏈接庫(kù)中去。接入已經(jīng)內(nèi)置了對(duì)動(dòng)態(tài)鏈接庫(kù)的支持，需要通過(guò)個(gè)內(nèi)置的插件接入，它們分別是插件用于打包出一個(gè)個(gè)單獨(dú)的動(dòng)態(tài)鏈接庫(kù)文件。 webpack優(yōu)化 查看所有文檔頁(yè)面：全棧開(kāi)發(fā)，獲取更多信息。原文鏈接：webpack優(yōu)化，原文廣告模態(tài)框遮擋，閱讀體驗(yàn)不好，所以整理成本文，方便查找。 ...

    ChanceWong 評(píng)論0 收藏0

  • eslint總結(jié)

    摘要：初始命令初始命令如下生成文件自動(dòng)修復(fù)錯(cuò)誤。第一個(gè)是錯(cuò)誤級(jí)別關(guān)閉規(guī)則將規(guī)則視為一個(gè)警告不會(huì)影響退出碼將規(guī)則視為一個(gè)錯(cuò)誤退出碼為可以從基礎(chǔ)配置中繼承已啟用的規(guī)則。一旦發(fā)現(xiàn)配置文件中有，它就會(huì)停止在父級(jí)目錄中尋找。 1、初始命令 eslint初始命令如下: (1) eslint --init： 生成.eslintrc.js文件(2) eslint src --fix: 自動(dòng)修復(fù)錯(cuò)誤。但是只能...

    keke 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

ZHAO_

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<