import React, { Component } from 'react';  
  
  
  
import logo from './logo.svg';  
  
  
  
import './App.css';  
  
  
  
class App extends Component {  
  
  
  
  render() {  
  
  
  
    return (  
  
  
  
        
  
  
  
          
  
  
  
            
  
  
  
          
  
  
  
  
            Edit src/App.js and save to reload.  
  
  
  
          
  
  
  
  
            
  
  
            className="App-link"  
  
  
  
              
  
  
  
            target="_blank"  
  
  
  
            rel="noopener noreferrer"  
  
  
  
          >  
  
  
  
            Learn React  
  
  
  
            
  
  
  
          
  
  
  
      

如果之前你從未學(xué)習(xí)過(guò) ES6 ，那么你可能認(rèn)為這個(gè) class 語(yǔ)句是 React 的一個(gè)特性。 實(shí)際上這是 ES6 的一個(gè)新特性，這就是為什么正確學(xué)習(xí) ES6 可以讓你更好地理解 React 代碼。 我們將從 ES6 的類(lèi)開(kāi)始。

ES6 的類(lèi)

ES6 引入了 class 語(yǔ)法，類(lèi)似于 Java 或 Python 等 OO(面向?qū)ο? 語(yǔ)言。 ES6 中的基本類(lèi)如下所示：

 
 
 
  
  
  
class Developer {  
  
  
  
  constructor(name){  
  
  
  
    this.name = name;  
  
  
  
  }  
  
  
  
  hello(){  
  
  
  
    return 'Hello World! I am ' + this.name + ' and I am a web developer';  
  
  
  
  }  
  
  
  
} 
 
 

class 語(yǔ)法后跟一個(gè)可用于創(chuàng)建新對(duì)象的標(biāo)識(shí)符（或一個(gè)名稱）。 始終在對(duì)象初始化中調(diào)用構(gòu)造函數(shù)方法。 傳遞給這個(gè)對(duì)象的任何參數(shù)都將傳遞給新對(duì)象。 例如：

 
 
 
  
  
  
var nathan = new Developer('Nathan');  
  
  
  
nathan.hello(); // Hello World! I am Nathan and I am a web developer 
 
 

類(lèi)可以定義任意它所需的方法，在這種情況下，我們定義了一個(gè)返回字符串的 hello 方法。

類(lèi)繼承

類(lèi)可以擴(kuò)展另一個(gè)類(lèi)的定義，從該類(lèi)初始化的新對(duì)象將具有這兩個(gè)類(lèi)的所有方法。

 
 
 
  
  
  
class ReactDeveloper extends Developer {  
  
  
  
  installReact(){  
  
  
  
    return 'installing React .. Done.';  
  
  
  
  }  
  
  
  
}  
  
  
  
var nathan = new ReactDeveloper('Nathan');  
  
  
  
nathan.hello(); // Hello World! I am Nathan and I am a web developer  
  
  
  
nathan.installReact(); // installing React .. Done. 
 
 

繼承另一個(gè)類(lèi)的類(lèi)，通常稱為 child 類(lèi)或 sub 類(lèi)，而正在擴(kuò)展的類(lèi)稱為 parent 類(lèi)或 super 類(lèi)。 子類(lèi)也可以覆蓋父類(lèi)中定義的方法，這意味著它將使用自己定義的新方法來(lái)替換父類(lèi)方法的定義。 例如，讓我們覆蓋 hello 函數(shù)：

 
 
 
  
  
  
class ReactDeveloper extends Developer {  
  
  
  
  installReact(){  
  
  
  
    return 'installing React .. Done.';  
  
  
  
  } 
  
  
  
  hello(){  
  
  
  
    return 'Hello World! I am ' + this.name + ' and I am a REACT developer';  
  
  
  
  }  
  
  
  
}  
  
  
  
var nathan = new ReactDeveloper('Nathan');  
  
  
  
nathan.hello(); // Hello World! I am Nathan and I am a REACT developer 
 
 

就這樣，我們重寫(xiě)了 Developer 類(lèi)中的 hello 方法。

在React 中使用

現(xiàn)在我們了解了 ES6 的類(lèi)和繼承，我們可以理解 src / app.js 中定義的 React 類(lèi)。 這是一個(gè) React 組件，但它實(shí)際上只是一個(gè)普通的 ES6 類(lèi)，它繼承了從 React 包導(dǎo)入的 React Component 類(lèi)的定義。

 
 
 
  
  
  
import React, { Component } from 'react';  
  
  
  
class App extends Component {  
  
  
  
  // class content  
  
  
  
  render(){  
  
  
  
    return (  
  
  
  
      
Hello React!
  
  
  
  
    )  
  
  
  
  }  
  
  
  
} 
 
 

這使得我們能夠使用 render() 方法，JSX ，this.state 和其他方法。 所有這些定義都在Component 類(lèi)中。 但正如我們稍后將看到的，class 不是定義 React Component 的唯一方法。 如果你不需要狀態(tài)和其他生命周期方法，則可以使用函數(shù)。

使用 ES6 中的 let 和 const 來(lái)聲明變量

因?yàn)?JavaScript 的 var 關(guān)鍵字是聲明全局的變量，所以在 ES6 中引入了兩個(gè)新的變量聲明來(lái)解決這個(gè)問(wèn)題，即 let 和 const 。 它們都用于聲明變量。 區(qū)別在于 const 在聲明后不能改變它的值，而 let 則可以。 這兩個(gè)聲明都是本地的，這意味著如果在函數(shù)作用域內(nèi)聲明 let ，則不能在函數(shù)外部調(diào)用它。

 
 
 
  
  
  
const name = "David";  
  
  
  
let age = 28;  
  
  
  
var occupation = "Software Engineer"; 
 
 

用哪個(gè)呢？

按以往經(jīng)驗(yàn)來(lái)說(shuō)，默認(rèn)使用 const 聲明變量。 稍后當(dāng)您編寫(xiě)應(yīng)用程序時(shí)，當(dāng)你意識(shí)到 const 的值需要更改，才是你應(yīng)該將const 重構(gòu)為 let 時(shí)。 希望它會(huì)讓你習(xí)慣新的關(guān)鍵字，并且你將開(kāi)始認(rèn)識(shí)到應(yīng)用程序中需要使用 const 或 let 的模式。

我們什么時(shí)候在 React 中使用呢?

在我們需要變量的時(shí)候：

 
 
 
  
  
  
import React, { Component } from 'react';  
  
  
  
class App extends Component {  
  
  
  
  // class content  
  
  
  
  render(){  
  
  
  
    const greeting = 'Welcome to React';  
  
  
  
    return (  
  
  
  
      
{greeting}
  
  
  
  
    )  
  
  
  
  }  
  
  
  
} 
 
 

在整個(gè)應(yīng)用的生命周期中 greeting 并不會(huì)發(fā)生改變，所以我們?cè)谶@里使用 const

箭頭函數(shù)

箭頭函數(shù)是 ES6 的一種新特性，在現(xiàn)代代碼庫(kù)中幾乎被廣泛使用，因?yàn)樗勾a簡(jiǎn)潔易讀。 它允許我們使用更短的語(yǔ)法編寫(xiě)函數(shù)。

 
 
 
  
  
  
// regular function  
  
  
  
const testFunction = function() {  
  
  
  
  // content..  
  
  
  
}  
  
  
  
// arrow function  
  
  
  
const testFunction = () => {  
  
  
  
  // content..  
  
  
  
} 
 
 

如果您是一位經(jīng)驗(yàn)豐富的 JS 開(kāi)發(fā)人員，那么從常規(guī)函數(shù)語(yǔ)法轉(zhuǎn)換為箭頭語(yǔ)法可能會(huì)讓您感到不舒服。 當(dāng)我學(xué)習(xí)箭頭函數(shù)時(shí)，我用這兩個(gè)簡(jiǎn)單的步驟來(lái)重寫(xiě)我的函數(shù)：

1.  移除 function 關(guān)鍵字
2.  在 () 后面加上 =>

括號(hào)仍然用于傳遞參數(shù)，如果只有一個(gè)參數(shù)，則可以省略括號(hào)。

 
 
 
  
  
  
const testFunction = (firstName, lastName) => {  
  
  
  
  return firstName+' '+lastName;  
  
  
  
}  
  
  
  
const singleParam = firstName => {  
  
  
  
  return firstName;  
  
  
  
} 
 
 

隱藏的 return

如果箭頭函數(shù)只有一行，則可以返回值而無(wú)需使用 return 關(guān)鍵字以及大括號(hào)。

 
 
 
  
  
  
const testFunction = () => 'hello there.';  
  
  
  
testFunction();  
 
 

在 React 中的使用

 
 
 
  
  
  
const HelloWorld = (props) => {  
  
  
  
  return 
{props.hello}
;  
  
  
  
} 
 
 

等同于 ES6 的類(lèi)組件

 
 
 
  
  
  
class HelloWorld extends Component {  
  
  
  
  render() {  
  
  
  
    return (  
  
  
  
      
{props.hello}
;  
  
  
  
    );  
  
  
  
  }  
  
  
  
} 
 
 

在 React 應(yīng)用程序中使用箭頭功能可使代碼更簡(jiǎn)潔。 但它也會(huì)從組件中刪除狀態(tài)的使用。 這種類(lèi)型的組件稱為無(wú)狀態(tài)功能組件。 你會(huì)在許多 React 教程中看到這個(gè)名字。

解析數(shù)組和對(duì)象的賦值

ES6 中引入的最有用的新語(yǔ)法之一，解構(gòu)賦值只是復(fù)制對(duì)象或數(shù)組的一部分并將它們放入命名變量中。 一個(gè)簡(jiǎn)單的例子：

 
 
 
  
  
  
const developer = {  
  
  
  
  firstName: 'Nathan',  
  
  
  
  lastName: 'Sebhastian',  
  
  
  
  developer: true,  
  
  
  
  age: 25,  
  
  
  
}  
  
  
  
//destructure developer object  
  
  
  
const { firstName, lastName } = developer;  
  
  
  
console.log(firstName); // returns 'Nathan'  
  
  
  
console.log(lastName); // returns 'Sebhastian'  
  
  
  
console.log(developer); // returns the object 
 
 

如您所見(jiàn)，我們將開(kāi)發(fā)人員對(duì)象中的 firstName 和 lastName 分配給新變量 firstName 和 lastName 。 現(xiàn)在，如果要將 firstName 放入名為 name 的新變量中，該怎么辦？

 
 
 
  
  
  
const { firstName:name } = developer;  
  
  
  
console.log(name); // returns 'Nathan' 
 
 

解構(gòu)也適用于數(shù)組，使用索引而不是對(duì)象鍵：

 
 
 
  
  
  
const numbers = [1,2,3,4,5];  
  
  
  
const [one, two] = numbers; // one = 1, two = 2 
 
 

你可以通過(guò)傳入 , 來(lái)在解構(gòu)的過(guò)程中跳過(guò)一些下標(biāo):

 
 
 
  
  
  
const [one, two, , four] = numbers; // one = 1, two = 2, four = 4 
 
 

在 React 中的使用

最常見(jiàn)是在方法中解構(gòu) state:

 
 
 
  
  
  
reactFunction = () => {  
  
  
  
  const { name, email } = this.state;  
  
  
  
}; 
 
 

或者是在無(wú)狀態(tài)的函數(shù)組件中，結(jié)合之前提到的例子:

 
 
 
  
  
  
const HelloWorld = (props) => {  
  
  
  
  return 
{props.hello}
;  
  
  
  
} 
 
 

我們可以立即簡(jiǎn)單地解構(gòu)參數(shù)：

 
 
 
  
  
  
const HelloWorld = ({ hello }) => {  
  
  
  
  return 
{hello}
;  
  
  
  
} 
 
 

Map 和 filter

雖然本文側(cè)重于 ES6 ，但需要提及 JavaScript 數(shù)組 Map 和 filter 方法，因?yàn)樗鼈兛赡苁菢?gòu)建 React 應(yīng)用程序時(shí)最常用的 ES5 功能之一。 特別是在處理數(shù)據(jù)上。

這兩種方法在處理數(shù)據(jù)時(shí)使用得更多。 例如，假設(shè)從 API 結(jié)果中獲取返回 JSON 數(shù)據(jù)的數(shù)組：

 
 
 
  
  
  
const users = [  
  
  
  
  { name: 'Nathan', age: 25 },  
  
  
  
  { name: 'Jack', age: 30 },  
  
  
  
  { name: 'Joe', age: 28 },  
  
  
  
]; 
 
 

然后我們可以在 React 中呈現(xiàn)項(xiàng)目列表，如下所示：

 
 
 
  
  
  
import React, { Component } from 'react';  
  
  
  
class App extends Component {  
  
  
  
  // class content  
  
  
  
  render(){  
  
  
  
    const users = [  
  
  
  
      { name: 'Nathan', age: 25 },  
  
  
  
      { name: 'Jack', age: 30 },  
  
  
  
      { name: 'Joe', age: 28 },  
  
  
  
    ];  
  
  
  
    return (  
  
  
  
      
    
  
  
        {users  
  
  
  
          .map(user => 
{user.name}
)    
  
  
        }  
  
  
  
      
  
  
  
  
    )  
  
  
  
  }  
  
  
  
} 
 
 

我們同樣可以在 render 中篩選數(shù)據(jù)

 
 
 
  
  
  
    
  
  
  {users  
  
  
  
    .filter(user => user.age > 26)  
  
  
  
    .map(user => 
{user.name}
)    
  
  
  }  
  
  
  
 
 
 

ES6 模塊系統(tǒng)

ES6 模塊系統(tǒng)使 JavaScript 能夠?qū)牒蛯?dǎo)出文件。 讓我們?cè)倏匆幌?src / app.js 代碼來(lái)解釋這一點(diǎn)。

 
 
 
  
  
  
import React, { Component } from 'react';  
  
  
  
import logo from './logo.svg';  
  
  
  
import './App.css';  
  
  
  
class App extends Component {  
  
  
  
  render() {  
  
  
  
    return (  
  
  
  
        
  
  
  
          
  
  
  
            
  
  
  
          
  
  
  
  
            Edit src/App.js and save to reload.  
  
  
  
          
  
  
  
  
            
  
  
            className="App-link"  
  
  
  
              
  
  
  
            target="_blank"  
  
  
  
            rel="noopener noreferrer"  
  
  
  
          >  
  
  
  
            Learn React