当前位置: 首页 > Web前端 > HTML

React&ES6

时间:2023-04-03 00:36:52 HTML

1.classES6提供了一种更接近传统语言的写法,引入了Class(类)作为对象模板的概念。使用class关键字,可以定义一个类。基本上,ES6类可以看作只是一个语法糖。它的大部分功能都可以通过ES5来实现。新的类写法只是让对象原型的写法更清晰,更像面向对象编程的语法。特点1.类的所有方法都定义在类的原型属性上classPoint{constructor(){//...}}==Point.prototype={constructor(){},};2.Point。prototype.constructor===Point//true3、定义“类”方法时,前面不用加关键字function,把函数定义放在里面即可。4.类中没有变量提升器,这和ES5完全不一样。5.如果一个类的方法中包含this,则默认指向该类的实例。6、如果在方法前加static关键字,表示该方法不会被实例继承,而是直接通过类调用。称为“静态方法”。7.写法ES5写法functionPoint(x,y){this.x=x;this.y=y;}Point.prototype.toString=function(){return'('+this.x+','+this.y+')';};varp=newPoint(1,2);ES6classPoint{constructor(x,y){this.x=x;这个.y=y;}toString(){return'('+this.x+','+this.y+')';}}2.constructor()——构造器方法这是ES6对类的默认方法,在通过new命令生成对象实例时自动调用。而且,这个方法必须存在于类中。如果没有显式定义,默认添加一个空的constructor()方法。1、constructor方法默认返回实例对象(即this)classPoint{constructor(x,y){this.x=x;这个.y=y;}}point.hasOwnProperty('x')//true2.super()-继承在类方法中,使用extends关键字实现继承。子类必须在constructor()中调用super()方法,否则新建实例时会报错。super方法必须在构造函数中调用,因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行处理,super代表父类的构造函数。super虽然代表了父类A的构造函数,但是它返回的是子类B的实例,也就是super里面的this引用了B,所以这里的super()等价于A.prototype.constructor.call(this,props)。A类{}B类扩展A{constructor(){super();//ES6要求子类的构造函数必须执行一次super函数,否则会报错。}}3.如果要在构造函数中使用this.props,必须给super加上参数:super(props);3.React.js中的ref和DOM操作顺便说一下,其实可以给组件标签添加refthis.input=input}/>//input是得到的节点.childrengetsclassCardextendsComponent{render(){return({this.props.children[0]}

{this.props.children[1]}
)}}ReactDOM.render(
children[0]
children[1]
,document.getElementById('root'))5.默认配置defaultProps&&组件配置参数添加类型校验comment:PropTypes.object//const{comment}=this.props}staticpropTypes={comment:PropTypes.object.isRequired}}6、react中对bind(this)的理解bind的返回值是指定this值和初始化参数转换后的原函数。JSX中传入的事件不是字符串,而是函数(如:onClick={this.handleClick}),此时onClick是一个中间变量,所以处理函数中的this点会丢失。解决这个问题的方法是在调用函数的时候绑定(this),这样无论事件处理函数怎么传递,this点始终是当前实例化的对象。当然,如果不想使用bind(this),我们可以在声明函数的时候使用箭头函数将函数内容返回到一个变量中,调用的时候直接使用this。变量名是1clickwithbind2constructor(props){super(props);this.state={};this.handleClick=this.handleClick.bind(this)}3{this.handleClick()}>7.高阶组件高阶组件是一个函数(不是组件),它将组件作为参数并返回一个新组件。这个新组件将使用您传递给它的组件作为子组件data:null}}componentWillMount(){letdata=localStorage.getItem(name)this.setState({data})}render(){return}}returnNewComponent}importwrapWithLoadDatafrom'./wrapWithLoadData'classInputWithUserNameextendsComponent{render(){return}}InputWithUserName=wrapWithLoadData(InputWithUserName,'username')exportdefaultInputWithUserName8.export&&模块函数主要由两个命令组成:export和import。export命令用于指定模块的对外接口,import命令用于导入其他模块提供的功能。模块是单个文件。文件内部的所有变量都无法从外部获得。如果想让外部能够读取模块内部的某个变量,就必须使用export关键字输出变量1。export命令指定了外部接口,必须与变量建立一一对应关系在模块内部。2.export语句输出接口,其对应的值是一个动态绑定关系,即通过该接口可以获取到模块内部的实时值。3.请注意,在输出中使用{}表示它是一个接口。如果不使用,该值会报错//exportvaryear=1958;varfirstName='Michael';varlastName='Jackson';varyear=1958;export{firstName,lastName,year};----------//errorexport1;//报错varm=1;exportm;------------//Writing1exportvarm=1;//Writing2varm=1;export{m};//写3varn=1;export{nasm};//functionfunctionf(){}export{f};4.import命令接受一对大括号,它指定要从其他模块导入的变量名。花括号中的变量名必须与导入模块(profile.js)的对外接口名相同5.如果要重命名输入变量,在import命令中使用as关键字重命名输入变量6.import命令输入的变量都是只读的,因为它的本质是一个输入接口。也就是说,不允许在加载模块的脚本中改写接口。7、注意import命令有提升作用,会提升到整个模块的头部。先执行8.import是静态执行的,所以不能使用表达式和变量import{lastNameassurname}from'./profile.js';import{myMethod}from'util';//util是模块文件的名称,必须配置它来告诉引擎如何获取这个模块import'lodash';//import语句将执行加载的模块9.模块的整体加载除了指定某个输出值外,还可以使用整体加载,即用星号(*)指定一个对象,所有的输出值都加载到这个上目的。//circle.jsexportfunctionarea(radius){returnMath.PI*radius*radius;}exportfunctioncircumference(radius){return2*Math.PI*radius;}import*ascirclefrom'./circle';console.log('Circlearea:'+circle.area(4));console.log('Circumferencelength:'+circle.circumference(14));10.exportdefault命令,为模块指定默认输出//export-default.jsexportdefaultfunction(){console.log('foo');}//import-default.jsimportcustomNamefrom'./export-default';customName();//'富'1。使用exportdefault时,对应的import语句不需要使用大括号//第一组exportdefaultfunctioncrc32(){//输出//...}importcrc32from'crc32';//输入//第二组导出函数crc32(){//输出//...};从'crc32'导入{crc32};//输入//结合import_,{each,forEach}from'lodash';2.exportdefault命令实际上只是输出一个名为default的变量,所以后面不能跟变量声明语句//correctexportvara=1;//正确的vara=1;出口默认一个;//错误的exportdefaultvara=1;11.解构赋值本质上是,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋值相应的值。下面是一些嵌套数组解构的例子let[foo,[[bar],baz]]=[1,[[2],3]];foo//1bar//2baz//3let[,,third]=["foo","bar","baz"];third//"baz"let[x,,y]=[1,2,3];x//1y//3let[head,...tail]=[1,2,3,4];head//1tail//[2,3,4]let[x,y,...z]=['a'];x//"a"y//undefinedz//[]1.如果等号右边不是数组(或者严格来说不是可遍历结构,见《Iterator》章节),那么就会报错//errorlet[foo]=1;let[foo]=假;设[foo]=NaN;2。解构赋值允许指定默认值let[foo=true]=[];foo//truelet[x,y='b']=['a'];//x='a',y='b'让[x,y='b']=['a',undefined];//x='a',y='b'3.解构不仅可以用于数组,还可以用于对象//简单模型let{bar,foo}={foo:"aaa",bar:"bbb"};foo//"aaa"bar//"bbb"let{baz}={foo:"aaa",bar:"bbb"};baz//undefined//基本模型varrobotA={name:"Bender"};varrobotB={名称:“柔印”};var{名称:nameA}=robotA;var{name:nameB}=robotB;nameA//"Bender"nameB//"Flexo"//多重解构constnode={loc:{start:{line:1,column:5}}};let{loc,地点:{开始},地点:{开始:{line}}}=node;line//1loc//Object{start:Object}start//Object{line:1,column:5}//默认值var{x,y=5}={x:1};x//1y//5var{message:msg="Somethingwentwrong"}={};//JavaScript引擎会将{x}理解为一个代码块,所以会出现语法错误//只有不要写花括号在行首,避免JavaScript将其解释为解决此问题的代码块letx;({x}={x:1});//字符解构const[a,b,c,d,e]='hello';a//"h"b//"e"c//"l"d//"l"e//"o"12箭头函数箭头函数没有this,所以需要通过查找作用域链来确定this的值意味着如果一个箭头函数被一个非箭头函数包含,则this绑定到最近的非箭头函数的this。没有参数不能被new关键字调用没有原型没有super格式1:多个参数(param1,param2,...,paramN)=>{statements}//statements应该有一个return语句(param1,param2,...,paramN)=>expression//相当于返回表达式格式2:有参数(singleParam)=>{statements}singleParam=>{statements}//可以去掉括号格式3:无参数()=>{statements}格式4:返回对象params=>({foo:bar})格式5:支持扩展符号(param1,param2,...rest)=>{statements}格式6:支持默认值(param1=defaultValue1,param2,...,paramN=defaultValueN)=>{statements}格式7:支持解构赋值varf=([a,b]=[1,2],{x:c}={x:a+b})=>a+b+c;F();//613.Decorator装饰器应用//@connect原理装饰器是对类进行处理的函数。装饰器函数的第一个参数是要装饰的目标类。@是语法糖1.类修饰functiondecorator(target){target.isTestable=true;}@decoratorclassA{}//等价于classA{}A=decorator(A)||A;A.isTestable//true2.带参数的装饰器functiontestable(isTestable){returnfunction(target){target.isTestable=isTestable;}}@testable(true)classMyTestableClass{}MyTestableClass.isTestable//true3。结合redux库classMyReactComponentextendsReact.Component{}exportdefaultconnect(mapStateToProps,mapDispatchToProps)(MyReactComponent);//connect(mapStateToProps,mapDispatchToProps)返回一个函数//Add()即(MyReactComponent),再次执行函数,传入一个组件并返回修改后的Component==@connect(mapStateToProps,mapDispatchToProps)//将props导入修改后的组件exportdefaultclassMyReactComponentextendsReact.Component{}