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"  
  
  
  
            href="https://reactjs.org"  
  
  
  
            target="_blank"  
  
  
  
            rel="noopener noreferrer"  
  
  
  
          >  
  
  
  
            Learn React  
  
  
  
            
  
  
  
          
  
  
  
      

如果之前你从未学习过 ES6 ，那么你可能认为这个 class 语句是 React 的一个特性。 实际上这是 ES6 的一个新特性，这就是为什么正确学习 ES6 可以让你更好地理解 React 代码。 我们将从 ES6 的类开始。

ES6 的类

ES6 引入了 class 语法，类似于 Java 或 Python 等 OO(面向对象) 语言。 ES6 中的基本类如下所示：

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

class 语法后跟一个可用于创建新对象的标识符（或一个名称）。 始终在对象初始化中调用构造函数方法。 传递给这个对象的任何参数都将传递给新对象。 例如：

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

类可以定义任意它所需的方法，在这种情况下，我们定义了一个返回字符串的 hello 方法。

类继承

类可以扩展另一个类的定义，从该类初始化的新对象将具有这两个类的所有方法。

 
 
 
  
  
  
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. 
 
 

继承另一个类的类，通常称为 child 类或 sub 类，而正在扩展的类称为 parent 类或 super 类。 子类也可以覆盖父类中定义的方法，这意味着它将使用自己定义的新方法来替换父类方法的定义。 例如，让我们覆盖 hello 函数：

 
 
 
  
  
  
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 
 
 

就这样，我们重写了 Developer 类中的 hello 方法。

在React 中使用

现在我们了解了 ES6 的类和继承，我们可以理解 src / app.js 中定义的 React 类。 这是一个 React 组件，但它实际上只是一个普通的 ES6 类，它继承了从 React 包导入的 React Component 类的定义。

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

这使得我们能够使用 render() 方法，JSX ，this.state 和其他方法。 所有这些定义都在Component 类中。 但正如我们稍后将看到的，class 不是定义 React Component 的唯一方法。 如果你不需要状态和其他生命周期方法，则可以使用函数。

使用 ES6 中的 let 和 const 来声明变量

因为 JavaScript 的 var 关键字是声明全局的变量，所以在 ES6 中引入了两个新的变量声明来解决这个问题，即 let 和 const 。 它们都用于声明变量。 区别在于 const 在声明后不能改变它的值，而 let 则可以。 这两个声明都是本地的，这意味着如果在函数作用域内声明 let ，则不能在函数外部调用它。

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

用哪个呢？

按以往经验来说，默认使用 const 声明变量。 稍后当您编写应用程序时，当你意识到 const 的值需要更改，才是你应该将const 重构为 let 时。 希望它会让你习惯新的关键字，并且你将开始认识到应用程序中需要使用 const 或 let 的模式。

我们什么时候在 React 中使用呢?

在我们需要变量的时候：

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

在整个应用的生命周期中 greeting 并不会发生改变，所以我们在这里使用 const

箭头函数

箭头函数是 ES6 的一种新特性，在现代代码库中几乎被广泛使用，因为它使代码简洁易读。 它允许我们使用更短的语法编写函数。

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

如果您是一位经验丰富的 JS 开发人员，那么从常规函数语法转换为箭头语法可能会让您感到不舒服。 当我学习箭头函数时，我用这两个简单的步骤来重写我的函数：

1.  移除 function 关键字
2.  在 () 后面加上 =>

括号仍然用于传递参数，如果只有一个参数，则可以省略括号。

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

隐藏的 return

如果箭头函数只有一行，则可以返回值而无需使用 return 关键字以及大括号。

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

在 React 中的使用

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

等同于 ES6 的类组件

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

在 React 应用程序中使用箭头功能可使代码更简洁。 但它也会从组件中删除状态的使用。 这种类型的组件称为无状态功能组件。 你会在许多 React 教程中看到这个名字。

解析数组和对象的赋值

ES6 中引入的最有用的新语法之一，解构赋值只是复制对象或数组的一部分并将它们放入命名变量中。 一个简单的例子：

 
 
 
  
  
  
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 
 
 

如您所见，我们将开发人员对象中的 firstName 和 lastName 分配给新变量 firstName 和 lastName 。 现在，如果要将 firstName 放入名为 name 的新变量中，该怎么办？

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

解构也适用于数组，使用索引而不是对象键：

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

你可以通过传入 , 来在解构的过程中跳过一些下标:

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

在 React 中的使用

最常见是在方法中解构 state:

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

或者是在无状态的函数组件中，结合之前提到的例子:

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

我们可以立即简单地解构参数：

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

Map 和 filter

虽然本文侧重于 ES6 ，但需要提及 JavaScript 数组 Map 和 filter 方法，因为它们可能是构建 React 应用程序时最常用的 ES5 功能之一。 特别是在处理数据上。

这两种方法在处理数据时使用得更多。 例如，假设从 API 结果中获取返回 JSON 数据的数组：

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

然后我们可以在 React 中呈现项目列表，如下所示：

 
 
 
  
  
  
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 中筛选数据

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

ES6 模块系统

ES6 模块系统使 JavaScript 能够导入和导出文件。 让我们再看一下 src / app.js 代码来解释这一点。

 
 
 
  
  
  
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"  
  
  
  
            href="https://reactjs.org"  
  
  
  
            target="_blank"  
  
  
  
            rel="noopener noreferrer"  
  
  
  
          >  
  
  
  
            Learn React