React項目中出現頻率較高的ES6語法

ZHAO_ 發布于2019-08-19 18:32 / 843人閱讀

摘要：學習過程中，發現無論是上的還是相關文檔，語法都有大量的使用。如下使用語法來定義一個組件有幾個注意點使用了的繼承語法，關鍵字這里使用了上面說的語法方法名的簡寫，注意方法之間不加是構造函數，可以替代。內需要調用父類的構造函數即，否則就會報錯。

學習React過程中，發現無論是github上的Demo還是React相關文檔，ES6語法都有大量的使用。如果不了解一些ES6語法，很難學習下去。如果轉戰ES6，系統學習戰線又較長。所以把一些常用的ES6語法做一些總結，有助于讀懂React，Redux的文檔。特別提醒：一些細節學習還是需要仔細查閱文檔。

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

let&const

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

解構賦值

常規用法

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

這是對象的解構賦值，等同于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是模式，不是變量也不會被賦值

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

對象的拓展 屬性的簡潔表達方式

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

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

方法名也可以簡寫

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

屬性名表達式

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

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

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的繼承語法，關鍵字extends

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

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

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

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


    Clicks: {this.state.count}

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

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

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

這里就體現了箭頭函數的特性：

函數體內的this就是定義時的對象，而不是調用時所在的對象。也就是說箭頭函數的this指向是固定的，而普通函數是可變的。

箭頭函數

ES6允許使用=>來定義函數

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

如果有多個參數

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

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

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

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

export&import

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

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

也可以統一輸出

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

對應的導入應該這樣用：

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

下面這樣寫也可以

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

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

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

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

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

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

對象的拓展運算符...

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

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

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

這中用法等同與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云服務器性價比較高的vps 性價比較高的主機國內性價比較高的云主機性價比較高的服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79665.html

2019年前端的3個趨勢

摘要：組件成為前端最基本的物料，融合在組件中的方案日趨成熟。組件成為最基本的前端物料，讓組件化更徹底在的調研報告中，開發者有愿意繼續，有愿意繼續。需要留意的是，有表示對感興趣，因此獲得的最感興趣獎。簡介： JavaScript 應用范圍廣泛，靜態類型語言 TypeScript 會繼續得到更多開發者的青睞。組件成為前端最基本的物料，CSS 融合在組件中(CSS in JS)的方案日趨成熟...

yanwei 2019-08-23 14:30 評論0 收藏0
React16時代，該用什么姿勢寫 React ?

摘要：的返回值將作為的參數，如果返回，則不更新，不能返回或以外的值，否則會警告。在更新之前調用，此時已更新返回值作為的第個參數一般用于獲取之前的數據語法是從的返回值，默認是的使用場景一般是獲取組建更新之前的滾動條位置。 React16 后的各功能點是多個版本陸陸續續迭代增加的，本篇文章的講解是建立在 16.6.0 版本上本篇文章主旨在介紹 React16 之后版本中新增或修改的地方，所以對于...

Reducto 2019-08-23 15:33 評論0 收藏0
2018年前端面試題

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

beita 2019-08-22 15:48 評論0 收藏0
webpack優化

摘要：使用要給項目構建接入動態鏈接庫的思想，需要完成以下事情把網頁依賴的基礎模塊抽離出來，打包到一個個單獨的動態鏈接庫中去。接入已經內置了對動態鏈接庫的支持，需要通過個內置的插件接入，它們分別是插件用于打包出一個個單獨的動態鏈接庫文件。 webpack優化查看所有文檔頁面：全棧開發，獲取更多信息。原文鏈接：webpack優化，原文廣告模態框遮擋，閱讀體驗不好，所以整理成本文，方便查找。 ...

ChanceWong 2019-08-22 17:34 評論0 收藏0
eslint總結

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

keke 2019-08-23 13:59 評論0 收藏0