react.js是用es6写的,可以用babel转译为es5,也可以用babel转译为javascript的jsx;由于react的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。使用es6来创建组件的语法更加简洁,这种语法避免了过多的react样板代码,而更多的使用纯javascript语法,更符合javascript语法习惯。
本教程操作环境:windows7系统、ecmascript 6&&react17版、dell g3电脑。
reactjs是构建视图最流行的前端库,reactjs是用es6写的,可以用babel转译为es5,也可以用babel转译为javascript的jsx。由于react的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,它可能是将来web开发的主流工具。
react使用es6和es5写法对比
创建组件
es6 class创建的组件语法更加简明,也更符合javascript。内部的方法不需要使用function关键字。
react.createclass
import react from 'react';const mycomponent = react.createclass({ render: function() { return ( <div>以前的方式创建的组件</div> ); }});export default mycomponent;
react.component(es6)
import react,{ component } from 'react';class mycomponent extends component { render() { return ( <div>es6方式创建的组件</div> ); }}export default mycomponent;
props proptypes and getdefaultprops
使用react.component创建组件,需要通过在constructor中调用super()将props传递给react.component。另外react 0.13之后props必须是不可变的。
由于是用es6 class语法创建组件,其内部只允许定义方法,而不能定义属性,class的属性只能定义在class之外。所以proptypes要写在组件外部。
对于之前的getdefaultprops方法,由于props不可变,所以现在被定义为一个属性,和proptypes一样,要定义在class外部。
react.createclass
import react from 'react';const mycomponent = react.createclass({ proptypes: { nameprop: react.proptypes.string }, getdefaultprops() { return { nameprop: '' }; }, render: function() { return ( <div>以前的方式创建的组件</div> ); }});export default mycomponent;
react.component(es6)
import react,{ component } from 'react';class mycomponent extends component { constructor(props) { super(props); } render() { return ( <div>es6方式创建的组件</div> ); }}mycomponent.proptypes = { nameprop: react.proptypes.string};mycomponent.defaultprops = { nameprop: ''};export default mycomponent;
state
使用es6 class语法创建组件,初始化state的工作要在constructor中完成。不需要再调用getinitialstate方法。这种语法更加的符合javascript语言习惯。
react.createclass
import react from 'react';const mycomponent = react.createclass({ getinitialstate: function() { return { data: [] }; }, render: function() { return ( <div>以前的方式创建的组件</div> ); }});export default mycomponent;
react.component(es6)
import react,{ component } from 'react';class mycomponent extends component { constructor(props) { super(props); this.state = { data: [] }; } render() { return ( <div>es6方式创建的组件</div> ); }}export default mycomponent;
this
使用es6 class语法创建组件, class中的方法不会自动将this绑定到实例中。必须使用 .bind(this)或者 箭头函数 =>来进行手动绑定。
react.createclass
import react from 'react';const mycomponent = react.createclass({ handleclick: function() { console.log(this); }, render: function() { return ( <div onclick={this.handleclick}>以前的方式创建的组件</div> ); }});export default mycomponent;
react.component(es6)
import react,{ component } from 'react';class mycomponent extends component { handleclick() { console.log(this); } render() { return ( <div onclick={this.handleclick.bind(this)}>es6方式创建的组件</div> ); }}export default mycomponent;
也可以将绑定方法写到constructor中:
import react,{ component } from 'react';class mycomponent extends component { constructor(props) { super(props); this.handleclick = this.handleclick.bind(this); } handleclick() { console.log(this); } render() { return ( <div onclick={this.handleclick}>es6方式创建的组件</div> ); }}export default mycomponent;
或者使用箭头函数 => :
mport react,{ component } from 'react';class mycomponent extends component { handleclick = () => { console.log(this); } render() { return ( <div onclick={this.handleclick}>es6方式创建的组件</div> ); }}export default mycomponent;
mixins
使用es6语法来创建组件是不支持react mixins的,如果一定要使用react mixins就只能使用react.createclass方法来创建组件了。
import react,{ component } from 'react';var setintervalmixin = { dosomething: function() { console.log('do somethis...'); },};const contacts = react.createclass({ mixins: [setintervalmixin], handleclick() { this.dosomething(); //使用mixin }, render() { return ( <div onclick={this.handleclick}></div> ); }});export default contacts;
总结
总的来说使用es6来创建组件的语法更加简洁,这种语法避免了过多的react样板代码,而更多的使用纯javascript语法,更符合javascript语法习惯。react官方并没有强制性要求使用哪种语法,根据需要合理的选择即可。
【相关推荐:javascript视频教程、编程视频】
以上就是react.js是用es6写的吗的详细内容。