前面写了学习React前必备的JavaScript基础

);}}exportdefaultApp;如果你以前从未学过ES6，你可能会认为class语句是React的一个特性。其实这是ES6的一个新特性，所以学好ES6可以让你更好地理解React代码。我们将从ES6类开始。ES6的类ES6引入了类语法，类似于Java或Python等OO（面向对象）语言。ES6中的基本类如下所示：classDeveloper{constructor(name){this.name=name;}hello(){return'HelloWorld!Iam'+this.name+'andIamawebdeveloper';}}类语法后跟类语法可用于为新对象创建标识符（或名称）。始终在对象初始化时调用构造方法。传递给该对象的任何参数都将传递给新对象。例如：varnathan=newDeveloper('Nathan');nathan.hello();//HelloWorld!IamNathanandIamawebdeveloper类可以定义它需要的任何方法，在本例中我们定义了一个返回字符串的hello方法。从一个类继承的类可以扩展另一个类的定义，并且从该类初始化的新对象将具有两个类的所有方法。classReactDeveloperextendsDeveloper{installReact(){return'installingReact..Done.';}}varnathan=newReactDeveloper('Nathan');nathan.hello();//HelloWorld!IamNathanandIamawebdevelopernathan.installReact();//installingReact..Done.Inheritance另一个类的类，通常称为子类或子类，被扩展的类称为父类或超类。子类也可以覆盖父类中定义的方法，这意味着它将用自己定义的新方法替换父类中方法的定义。例如，让我们重写hello函数：Nathan');nathan.hello();//HelloWorld!IamNathanandIamaREACTdeveloper就这样，我们重写Developer类中的hello方法。使用React现在我们了解了ES6类和继承，我们可以理解src/app.js中定义的React类。这是一个React组件，但它实际上只是一个普通的ES6类，它继承了从React包中导入的ReactComponent类的定义。importReact,{Component}from'react';classAppextendsComponent{//classcontentrender(){return(

HelloReact!

)}}这允许我们使用render()方法、JSX、this.state和其他方法。所有这些定义都在Component类中。但正如我们稍后将看到的，类并不是定义React组件的唯一方式。如果你不需要状态和其他生命周期方法，你可以使用函数。在ES6中使用let和const声明变量由于JavaScript的var关键字是声明全局变量，所以在ES6中引入了两个新的变量声明来解决这个问题，即let和const。它们都用于声明变量。不同的是，const声明后不能改变它的值，而let可以。这两个声明都是局部的，这意味着如果let在函数作用域内声明，则不能在函数外调用。constname="David";letage=28;varoccupation="SoftwareEngineer";使用哪一个？根据经验，变量默认声明为const。稍后，当您编写应用程序时，当您意识到const的值需要更改时，您应该将const重构为let。希望它能让您习惯新的关键字，并且您将开始识别应用程序中需要使用const或let的模式。我们什么时候在React中使用它？当我们需要变量时：importReact,{Component}from'react';classAppextendsComponent{//classcontentrender(){constgreeting='WelcometoReact';return(

{greeting}

)}}问候语始终不变应用程序的生命周期，所以我们在这里使用const箭头函数箭头函数是ES6的新特性，在现代代码库中几乎普遍使用，因为它使代码简洁易读。它允许我们使用更短的语法编写函数。//regularfunctionconsttestFunction=function(){//content..}//arrowfunctionconsttestFunction=()=>{//content..}如果你是一个经验丰富的JS开发者，从常规函数语法切换到箭头语法可能会让你不舒服.当我学习箭头函数时，我用这两个简单的步骤重写了我的函数：去掉function关键字并在()后添加=>括号仍然用于传递参数，如果只有一个参数括号可以省略。consttestFunction=(firstName,lastName)=>{returnfirstName+''+lastName;}constsingleParam=firstName=>{returnfirstName;}隐藏返回如果箭头函数只有一行，可以不使用return关键字和大括号返回一个值。consttestFunction=()=>'你好。';testFunction();React中constHelloWorld=(props)=>{return

{props.hello}

;}的使用相当于ES6类组件classHelloWorldextendsComponent{render(){return(

{props.hello}

;);}}在React应用中使用箭头函数可以让代码更加简洁。但它也从组件中删除了状态的使用。这种类型的组件称为无状态功能组件。你会在很多React教程中看到这个名字。解析数组和对象赋值作为ES6中引入的最有用的新语法之一，解构赋值只是简单地复制对象或数组的一部分并将它们放入命名变量中。一个简单的例子：constdeveloper={firstName:'Nathan',lastName:'Sebhastian',developer:true,age:25,}//destructuredeveloperobjectconst{firstName,lastName}=developer;console.log(firstName);//returns'Nathan'console.log(lastName);//returns'Sebhastian'console.log(developer);//returnstheobject如您所见，我们将开发人员对象中的firstName和lastName分配给新变量firstName和lastName。现在，如果您想将firstName放入一个名为name的新变量中怎么办？const{firstName:name}=developer;console.log(name);//返回'Nathan'解构也适用于数组，使用索引而不是对象键：constnumbers=[1,2,3,4,5];const[one,two]=numbers;//one=1,two=2在解构的过程中可以跳过一些下标，传入：const[one,two,,four]=numbers;//one最常用of=1,two=2,four=4在React中就是解构方法中的状态：reactFunction=()=>{const{name,email}=this.state;};或者在一个无状态的函数组件中，结合前面提到的例子：constHelloWorld=(props)=>{return

{props.hello}

;}我们可以简单的立即解构参数：constHelloWorld=({hello})=>{return

{hello}

;}Map和filter虽然本文主要关注ES6，但需要提及JavaScript数组Map和filter方法，因为它们可能是最常用的方法之一在构建React应用程序时使用了ES5特性。尤其是在处理数据的时候。这两种方式在处理数据的时候用的比较多。例如，假设从API结果返回一个JSON数据数组：constusers=[{name:'Nathan',age:25},{name:'Jack',age:30},{name:'Joe',年龄:28},];然后我们可以像这样在React中渲染项目列表：importReact,{Component}from'react';classAppextendsComponent{//classcontentrender(){constusers=[{name:'Nathan',age:25},{name:'Jack',age:30},{name:'Joe',age:28},];return(

{users.map(user=>
• {user.name}
)}

)}}我们也可以在渲染中过滤数据

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

ES6模块系统ES6模块系统使JavaScript能够导入和导出文件。让我们再看一下src/app.js代码来解释这一点。importReact,{Component}from'react';importlogofrom'./logo.svg';import'./App.css';classAppextendsComponent{render(){return(

编辑src/App.js并保存重新加载。

LearnReact